mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 05:29:47 +08:00
!3709 doc(#I689XO)：update datetimepicker demos
* doc: 格式化文档 * doc: 格式化文档 * doc: 格式化文档 * doc: 格式化文档 * doc: 格式化文档 * update DateTimePocker demos * update DateTimePicker demos step1
This commit is contained in:
Lambert Lee
Argo
parent
2d62c3584e
commit
a4570466b7
@ -0,0 +1 @@
|
||||
<DateTimePicker AutoClose="false" TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))" />
|
||||
@ -0,0 +1 @@
|
||||
<DateTimePicker TValue="DateTime" Value="@DateTime.Today" />
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" IsDisabled="IsDisabled" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<Switch @bind-Value="@IsDisabled" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool IsDisabled { get; set; } = true;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
@inject IStringLocalizer<DateTimePickerGroup> Localizer
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
|
||||
<DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
|
||||
<DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,5 @@
|
||||
<DateTimePicker TValue="DateTime"
|
||||
ViewMode="DatePickerViewMode.Date"
|
||||
Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
|
||||
MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))"
|
||||
MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
|
||||
@ -0,0 +1,17 @@
|
||||
@inject IStringLocalizer<DateTimePickerNormal> Localizer
|
||||
|
||||
<div style="width: 320px;">
|
||||
<DatePickerBody ValueChanged="@DateValueChanged" ShowFooter="false" />
|
||||
</div>
|
||||
<BlockLogger @ref="DateLogger" class="mt-3" />
|
||||
|
||||
@code {
|
||||
[NotNull]
|
||||
private BlockLogger? DateLogger { get; set; }
|
||||
|
||||
private Task DateValueChanged(DateTime d)
|
||||
{
|
||||
DateLogger.Log($"{Localizer["Log1Text"]}: {d:yyyy-MM-dd}");
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-8">
|
||||
<DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-4">
|
||||
<Display TValue="string" Value="@GetNullValueString" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private DateTime? BindNullValue { get; set; }
|
||||
|
||||
private string GetNullValueString => BindNullValue.HasValue ? BindNullValue.Value.ToString("yyyy-MM-dd") : "";
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<DateTimePicker TValue="DateTime?" Value="@BindValue" ValueChanged="@DateTimeValueChanged" Placement="Placement.Right" />
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<input class="form-control" @bind="@BindValueString" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private DateTime? BindValue { get; set; } = DateTime.Today;
|
||||
|
||||
private Task DateTimeValueChanged(DateTime? d)
|
||||
{
|
||||
BindValue = d;
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private string BindValueString
|
||||
{
|
||||
get => BindValue.HasValue ? BindValue.Value.ToString("yyyy-MM-dd") : "";
|
||||
set => BindValue = DateTime.TryParse(value, out var d) ? d : DateTime.Today;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
@inject IStringLocalizer<DateTimePickerShowLabel> Localizer
|
||||
|
||||
<DateTimePicker TValue="DateTime?" ShowLabel="true" DisplayText="@Localizer["DisplayText"]" @bind-Value="@BindNullValue" />
|
||||
|
||||
@code {
|
||||
private DateTime? BindNullValue { get; set; }
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<DateTimePicker TValue="DateTime" ShowSidebar="true" ViewMode="DatePickerViewMode.DateTime" />
|
||||
@ -0,0 +1,37 @@
|
||||
@inject IStringLocalizer<DateTimePickerTime> Localizer
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="mb-1"><code>TimeSpan</code>@Localizer["Codetext"]</div>
|
||||
<TimePickerBody @bind-Value="@SpanValue" />
|
||||
<BootstrapInput @bind-Value="@SpanValue" TValue="TimeSpan" Formatter="@FormatterSpanString" style="width: 180px; margin-top: 0.5rem;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="mb-1"><code>string</code>@Localizer["Codetext"]</div>
|
||||
<TimePickerBody Value="@TimeNow" ValueChanged="@OnValueChange" />
|
||||
<BootstrapInput @bind-Value="@SpanValue2" style="width: 180px; margin-top: 0.5rem;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private TimeSpan TimeNow { get; set; } = DateTime.Now - DateTime.Today;
|
||||
|
||||
private TimeSpan SpanValue { get; set; } = DateTime.Now.Subtract(DateTime.Today);
|
||||
|
||||
private string SpanValue2 { get; set; } = DateTime.Now.ToString("HH:mm:ss");
|
||||
|
||||
private static string FormatterSpanString(TimeSpan ts)
|
||||
{
|
||||
return ts.ToString("hh\\:mm\\:ss");
|
||||
}
|
||||
|
||||
private void OnValueChange(TimeSpan ts)
|
||||
{
|
||||
SpanValue2 = ts.ToString("hh\\:mm\\:ss");
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
@inject IStringLocalizer<DateTimePickerValidateForm> Localizer
|
||||
|
||||
<ValidateForm Model="this">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-auto">
|
||||
<DateTimePicker @bind-Value="@this.ModelValidateValue" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-auto align-self-end">
|
||||
<Button ButtonType="ButtonType.Submit" Text="@SubmitText" Icon="fa-solid fa-floppy-disk" />
|
||||
</div>
|
||||
</div>
|
||||
</ValidateForm>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// SubmitText
|
||||
/// </summary>
|
||||
private string? SubmitText { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// ModelValidateValue
|
||||
/// </summary>
|
||||
[Required] public DateTime? ModelValidateValue { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// OnInitialized 方法
|
||||
/// </summary>
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
SubmitText ??= Localizer[nameof(SubmitText)];
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
@inject IStringLocalizer<DateTimePickerValueChanged> Localizer
|
||||
|
||||
<TimePickerBody Value="@TimeNow" ValueChanged="@TimeValueChanged" />
|
||||
|
||||
<BlockLogger @ref="TimeLogger" class="mt-3" />
|
||||
|
||||
@code {
|
||||
[NotNull]
|
||||
private BlockLogger? TimeLogger { get; set; }
|
||||
|
||||
private TimeSpan TimeNow { get; set; } = DateTime.Now - DateTime.Today;
|
||||
|
||||
private void TimeValueChanged(TimeSpan d)
|
||||
{
|
||||
TimeLogger.Log($"{Localizer["Log2Text"]}: {d:hh\\:mm\\:ss}");
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Year" ViewMode="DatePickerViewMode.Year" Format="yyyy" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" Format="yyyy-MM" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" Format="yyyy-MM-dd" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" Format="yyyy-MM-dd HH:mm:ss" />
|
||||
</div>
|
||||
</div>
|
||||
@ -2514,42 +2514,38 @@
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.DateTimePickers": {
|
||||
"Title": "DatePicker",
|
||||
"H1": "Used to select or enter a date",
|
||||
"Block1Title": "Select the day",
|
||||
"Block1Intro": "Select the control based on the date of the day in 「day」as the base unit",
|
||||
"Block2Title": "Select any point in time",
|
||||
"Block2Intro": "You can choose any time",
|
||||
"Block3Title": "Data is bound in both directions",
|
||||
"Block3Intro": "Click the confirm button to select the box value consistent with the text box value",
|
||||
"codetext": "type",
|
||||
"Block4Title": "Client validation",
|
||||
"Block4Intro": "Check data validity and prompt automatically based on custom validation rules",
|
||||
"Block5Title": "Click on the pop-up date box",
|
||||
"Block5Intro": "Select the control based on the date of the day in 「day」 as the base unit",
|
||||
"Block6Title": "Data is bound in both directions",
|
||||
"Block6Intro": "The values in the text box change as the date component time changes",
|
||||
"Block7Title": "Selector with time",
|
||||
"Block7Intro": "Select the date and time in the same selector, click the confirm button and close the pop-up window",
|
||||
"P1": "Set the value of the <code>viewMode</code> property to The <code>DateTime</code> of DatePickerViewMode.DateTime",
|
||||
"Block8Title": "Allow empty time",
|
||||
"Block8Intro": "More for conditional selection",
|
||||
"P2": "The <b>empty</b>button automatically appears when the binding value is <code>DateTime?</code> for an empty type",
|
||||
"Block9Title": "The label is displayed",
|
||||
"Block9Intro": "When you are a form component, the label in front of the component is displayed",
|
||||
"P3": "Set the <code>DisplayText</code> property value to <code>select time</code>",
|
||||
"P4": "The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the <a href='inputs'>[portal]</a>",
|
||||
"DisplayText": "Select the time",
|
||||
"Block10Title": "disable",
|
||||
"Block10Intro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses input",
|
||||
"Block11Title": "Sidebar with shortcuts",
|
||||
"Block11Intro": "When you set the <code>ShowSidebar</code> property value to <code>true</code>, the component displays the shortcut sidebar",
|
||||
"Block12Title": "Set the range of values",
|
||||
"Block12Intro": "Set the <code>MinValue</code> property value to the <code>MaxValue</code> limit the range of optional values, in this case setting the range to <b>45</b>days",
|
||||
"Description": "Used to select or enter a date",
|
||||
"NormalTitle": "Select the day",
|
||||
"NormalIntro": "Select the control based on the date of the day in 「day」as the base unit",
|
||||
"ValueChangedTitle": "Select any point in time",
|
||||
"ValueChangedIntro": "You can choose any time",
|
||||
"TimeTitle": "Data is bound in both directions",
|
||||
"TimeIntro": "Click the confirm button to select the box value consistent with the text box value",
|
||||
"ValidateFormTitle": "Client validation",
|
||||
"ValidateFormIntro": "Check data validity and prompt automatically based on custom validation rules",
|
||||
"DateTitle": "Click on the pop-up date box",
|
||||
"DateIntro": "Select the control based on the date of the day in 「day」 as the base unit",
|
||||
"PlacementTitle": "Data is bound in both directions",
|
||||
"PlacementIntro": "The values in the text box change as the date component time changes",
|
||||
"ViewModeTitle": "Selector with time",
|
||||
"ViewModeIntro": "Select the date and time in the same selector, click the confirm button and close the pop-up window",
|
||||
"ViewModeTip": "Set the value of the <code>viewMode</code> property to The <code>DateTime</code> of DatePickerViewMode.DateTime",
|
||||
"NullValueTitle": "Allow empty time",
|
||||
"NullValueIntro": "More for conditional selection",
|
||||
"NullValueTip": "The <b>empty</b>button automatically appears when the binding value is <code>DateTime?</code> for an empty type",
|
||||
"ShowLabelTitle": "The label is displayed",
|
||||
"ShowLabelIntro": "When you are a form component, the label in front of the component is displayed",
|
||||
"ShowLabelTip1": "Set the <code>DisplayText</code> property value to <code>select time</code>",
|
||||
"ShowLabelTip2": "The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the <a href='inputs'>[portal]</a>",
|
||||
"DisalbedTitle": "Disable",
|
||||
"DisalbedIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses input",
|
||||
"ShowSidebarTitle": "Sidebar with shortcuts",
|
||||
"ShowSidebarIntro": "When you set the <code>ShowSidebar</code> property value to <code>true</code>, the component displays the shortcut sidebar",
|
||||
"MinValueTitle": "Set the range of values",
|
||||
"MinValueIntro": "Set the <code>MinValue</code> property value to the <code>MaxValue</code> limit the range of optional values, in this case setting the range to <b>45</b>days",
|
||||
"BlockAutoCloseTitle": "Auto close",
|
||||
"BlockAutoCloseIntro": "Auto close the popup window by se <code>AutoClose</code> to <code>true</code>",
|
||||
"BlockGroupTitle": "InputGroup",
|
||||
"BlockGroupPrevLabel": "Prev",
|
||||
"BlockGroupSuffixLabel": "Suffix",
|
||||
"BlockGroupIntro": "combox with <code>BootstrapInputGroupLabel</code> inside <code>BootstrapInputGroupLabel</code>",
|
||||
"Att1": "Whether to display the front label",
|
||||
"Att2": "Whether to display the shortcut sidebar",
|
||||
@ -2561,13 +2557,29 @@
|
||||
"Att9": "Get/Set Component display mode The default is the month-to-day display mode",
|
||||
"AttrAutoClose": "Whether auto close the popup window",
|
||||
"Event1": "Confirm that the button calls back the delegate",
|
||||
"Event2": "Callback delegates are used for bidirectional binding when component values change",
|
||||
"Log1Text": "The date selected is",
|
||||
"Log2Text": "The time selected is",
|
||||
"Event2": "Callback delegates are used for bidirectional binding when component values change"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerNormal": {
|
||||
"Log1Text": "The date selected is"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerGroup": {
|
||||
"BlockGroupPrevLabel": "Prev",
|
||||
"BlockGroupSuffixLabel": "Suffix"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerShowLabel": {
|
||||
"DisplayText": "Select the time"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerTime": {
|
||||
"Codetext": "type"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerValidateForm": {
|
||||
"SubmitText": "Save",
|
||||
"ModelValidateValue": "ModelValidateValue",
|
||||
"ModelValidateValue.Required": "{0} is required."
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerValueChanged": {
|
||||
"Log2Text": "The time selected is"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.Editors": {
|
||||
"Title": "Editor",
|
||||
"H1": "Convert the entered text into <code>html</code> code snippets",
|
||||
|
||||
@ -2521,42 +2521,38 @@
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.DateTimePickers": {
|
||||
"Title": "DatePicker 日期选择器",
|
||||
"H1": "用于选择或输入日期",
|
||||
"Block1Title": "选择日",
|
||||
"Block1Intro": "以「日」为基本单位，基础的日期选择控件",
|
||||
"Block2Title": "选择任意时间点",
|
||||
"Block2Intro": "可以选择任意时间",
|
||||
"Block3Title": "数据双向绑定",
|
||||
"Block3Intro": "点击确认按钮时间选择框值与文本框值一致",
|
||||
"codetext": "类型",
|
||||
"Block4Title": "客户端验证",
|
||||
"Block4Intro": "根据自定义验证规则进行数据有效性检查并自动提示",
|
||||
"Block5Title": "点击弹出日期框",
|
||||
"Block5Intro": "以「日」为基本单位，基础的日期选择控件",
|
||||
"Block6Title": "数据双向绑定",
|
||||
"Block6Intro": "日期组件时间改变时文本框内的数值也跟着改变",
|
||||
"Block7Title": "带时间的选择器",
|
||||
"Block7Intro": "在同一个选择器里选择日期和时间，点击确认按钮后关闭弹窗",
|
||||
"P1": "设置 <code>ViewMode</code> 属性值为 <code>DatePickerViewMode.DateTime</code>",
|
||||
"Block8Title": "允许空时间",
|
||||
"Block8Intro": "多用于条件选择",
|
||||
"P2": "绑定值为可为空类型 <code>DateTime?</code> 时自动出现 <b>清空</b> 按钮",
|
||||
"Block9Title": "显示标签",
|
||||
"Block9Intro": "作为表单组件时，显示组件前方标签",
|
||||
"P3": "设置 <code>DisplayText</code> 属性值为 <code>选择时间</code>",
|
||||
"P4": "前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href='inputs'>[传送门]</a>",
|
||||
"DisplayText": "选择时间",
|
||||
"Block10Title": "禁用",
|
||||
"Block10Intro": "设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入",
|
||||
"Block11Title": "带快捷键侧边栏",
|
||||
"Block11Intro": "设置 <code>ShowSidebar</code> 属性值为 <code>true</code> 时，组件显示快捷方式侧边栏",
|
||||
"Block12Title": "设置值范围",
|
||||
"Block12Intro": "设置 <code>MinValue</code> 属性值与 <code>MaxValue</code> 限制可选值范围，本例中设置范围为 <b>45</b> 天",
|
||||
"Description": "用于选择或输入日期",
|
||||
"NormalTitle": "选择日",
|
||||
"NormalIntro": "以「日」为基本单位，基础的日期选择控件",
|
||||
"ValueChangedTitle": "选择任意时间点",
|
||||
"ValueChangedIntro": "可以选择任意时间",
|
||||
"TimeTitle": "数据双向绑定",
|
||||
"TimeIntro": "点击确认按钮时间选择框值与文本框值一致",
|
||||
"ValidateFormTitle": "客户端验证",
|
||||
"ValidateFormIntro": "根据自定义验证规则进行数据有效性检查并自动提示",
|
||||
"DateTitle": "点击弹出日期框",
|
||||
"DateIntro": "以「日」为基本单位，基础的日期选择控件",
|
||||
"PlacementTitle": "数据双向绑定",
|
||||
"PlacementIntro": "日期组件时间改变时文本框内的数值也跟着改变",
|
||||
"ViewModeTitle": "带时间的选择器",
|
||||
"ViewModeIntro": "在同一个选择器里选择日期和时间，点击确认按钮后关闭弹窗",
|
||||
"ViewModeTip": "设置 <code>ViewMode</code> 属性值为 <code>DatePickerViewMode.DateTime</code>",
|
||||
"NullValueTitle": "允许空时间",
|
||||
"NullValueIntro": "多用于条件选择",
|
||||
"NullValueTip": "绑定值为可为空类型 <code>DateTime?</code> 时自动出现 <b>清空</b> 按钮",
|
||||
"ShowLabelTitle": "显示标签",
|
||||
"ShowLabelIntro": "作为表单组件时，显示组件前方标签",
|
||||
"ShowLabelTip1": "设置 <code>DisplayText</code> 属性值为 <code>选择时间</code>",
|
||||
"ShowLabelTip2": "前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href='inputs'>[传送门]</a>",
|
||||
"DisalbedTitle": "禁用",
|
||||
"DisalbedIntro": "设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入",
|
||||
"ShowSidebarTitle": "带快捷键侧边栏",
|
||||
"ShowSidebarIntro": "设置 <code>ShowSidebar</code> 属性值为 <code>true</code> 时，组件显示快捷方式侧边栏",
|
||||
"MinValueTitle": "设置值范围",
|
||||
"MinValueIntro": "设置 <code>MinValue</code> 属性值与 <code>MaxValue</code> 限制可选值范围，本例中设置范围为 <b>45</b> 天",
|
||||
"BlockAutoCloseTitle": "自动关闭",
|
||||
"BlockAutoCloseIntro": "设置 <code>AutoClose</code> 属性值，设置选中日期后自动关闭弹出框",
|
||||
"BlockGroupTitle": "组合使用",
|
||||
"BlockGroupPrevLabel": "前置标签",
|
||||
"BlockGroupSuffixLabel": "后置标签",
|
||||
"BlockGroupIntro": "内置 <code>BootstrapInputGroup</code> 中使用，与 <code>BootstrapInputGroupLabel</code> 组合使用",
|
||||
"Att1": "是否显示前置标签",
|
||||
"Att2": "是否显示快捷侧边栏",
|
||||
@ -2568,13 +2564,29 @@
|
||||
"Att9": "获得/设置 组件显示模式 默认为显示年月日模式",
|
||||
"AttrAutoClose": "选中日期后是否自动关闭弹窗",
|
||||
"Event1": "确认按钮回调委托",
|
||||
"Event2": "组件值改变时回调委托供双向绑定使用",
|
||||
"Log1Text": "选择的日期为",
|
||||
"Log2Text": "选择的时间为",
|
||||
"Event2": "组件值改变时回调委托供双向绑定使用"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerNormal": {
|
||||
"Log1Text": "选择的日期为"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerGroup": {
|
||||
"BlockGroupPrevLabel": "前置标签",
|
||||
"BlockGroupSuffixLabel": "后置标签"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerShowLabel": {
|
||||
"DisplayText": "选择时间"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerTime": {
|
||||
"Codetext": "类型"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerValidateForm": {
|
||||
"SubmitText": "保存",
|
||||
"ModelValidateValue": "属性",
|
||||
"ModelValidateValue.Required": "{0}为必填项"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Demos.DateTimePicker.DateTimePickerValueChanged": {
|
||||
"Log2Text": "选择的时间为"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Samples.Editors": {
|
||||
"Title": "Editor 富文本框",
|
||||
"H1": "将输入的文字转化为 <code>html</code> 代码片段",
|
||||
|
||||
@ -2,172 +2,42 @@
|
||||
|
||||
<h3>@Localizer["Title"]</h3>
|
||||
|
||||
<h4>@Localizer["H1"]</h4>
|
||||
<h4>@Localizer["Description"]</h4>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
|
||||
<div style="width: 320px;">
|
||||
<DatePickerBody ValueChanged="@DateValueChanged" ShowFooter="false" />
|
||||
</div>
|
||||
<BlockLogger @ref="DateLogger" class="mt-3" />
|
||||
<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="DateTimePicker.DateTimePickerNormal" />
|
||||
|
||||
<DemoBlock Title="@Localizer["ValueChangedTitle"]" Introduction="@Localizer["ValueChangedIntro"]" Name="ValueChanged" Demo="DateTimePicker.DateTimePickerValueChanged" />
|
||||
|
||||
<DemoBlock Title="@Localizer["TimeTitle"]" Introduction="@Localizer["TimeIntro"]" Name="Time" Demo="DateTimePicker.DateTimePickerTime" />
|
||||
|
||||
<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm" Demo="DateTimePicker.DateTimePickerValidateForm" />
|
||||
|
||||
<DemoBlock Title="@Localizer["DateTitle"]" Introduction="@Localizer["DateIntro"]" Name="Date" Demo="DateTimePicker.DateTimePickerDate" />
|
||||
|
||||
<DemoBlock Title="@Localizer["PlacementTitle"]" Introduction="@Localizer["PlacementIntro"]" Name="Placement" Demo="DateTimePicker.DateTimePickerPlacement" />
|
||||
|
||||
<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewMode" Demo="DateTimePicker.DateTimePickerViewMode">
|
||||
<p>@((MarkupString)Localizer["ViewModeTip"].Value)</p>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="ValueChanged">
|
||||
<TimePickerBody Value="@TimeNow" ValueChanged="@TimeValueChanged" />
|
||||
|
||||
<BlockLogger @ref="TimeLogger" class="mt-3" />
|
||||
<DemoBlock Title="@Localizer["NullValueTitle"]" Introduction="@Localizer["NullValueIntro"]" Name="NullValue" Demo="DateTimePicker.DateTimePickerNullValue">
|
||||
<p>@((MarkupString)Localizer["NullValueTip"].Value)</p>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Time">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="mb-1"><code>TimeSpan</code> @Localizer["codetext"]</div>
|
||||
<TimePickerBody @bind-Value="@SpanValue" />
|
||||
<BootstrapInput @bind-Value="@SpanValue" Formatter="@FormatterSpanString" style="width: 180px; margin-top: 0.5rem;" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="mb-1"><code>string</code> @Localizer["codetext"]</div>
|
||||
<TimePickerBody Value="@TimeNow" ValueChanged="@OnValueChange" />
|
||||
<BootstrapInput @bind-Value="@SpanValue2" style="width: 180px; margin-top: 0.5rem;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel" Demo="DateTimePicker.DateTimePickerShowLabel">
|
||||
<p>@((MarkupString)Localizer["ShowLabelTip1"].Value)</p>
|
||||
<p>@((MarkupString)Localizer["ShowLabelTip2"].Value)</p>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="ValidateForm">
|
||||
<ValidateForm Model="this">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-auto">
|
||||
<DateTimePicker @bind-Value="@this.ModelValidateValue" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-auto align-self-end">
|
||||
<Button ButtonType="ButtonType.Submit" Text="@SubmitText" Icon="fa-solid fa-floppy-disk" />
|
||||
</div>
|
||||
</div>
|
||||
</ValidateForm>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["DisalbedTitle"]" Introduction="@Localizer["DisalbedIntro"]" Name="Disalbed" Demo="DateTimePicker.DateTimePickerDisalbed" />
|
||||
|
||||
<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Date">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<DateTimePicker TValue="DateTime" Value="@DateTime.Today" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar" Demo="DateTimePicker.DateTimePickerShowSidebar" />
|
||||
|
||||
<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Placement">
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<DateTimePicker TValue="DateTime?" Value="@BindValue" ValueChanged="@DateTimeValueChanged" Placement="Placement.Right" />
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<input class="form-control" @bind="@BindValueString" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue" Demo="DateTimePicker.DateTimePickerMinValue" />
|
||||
|
||||
<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="ViewMode">
|
||||
<p>@((MarkupString)Localizer["P1"].Value)</p>
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" ShowLabel="true"DisplayText="Year" ViewMode="DatePickerViewMode.Year" Format="yyyy" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" Format="yyyy-MM" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" Format="yyyy-MM-dd" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" Format="yyyy-MM-dd HH:mm:ss" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose" Demo="DateTimePicker.DateTimePickerAutoClose" />
|
||||
|
||||
<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="NullValue">
|
||||
<p>@((MarkupString)Localizer["P2"].Value)</p>
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-8">
|
||||
<DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-4">
|
||||
<Display TValue="string" Value="@GetNullValueString" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="ShowLabel">
|
||||
<p>@((MarkupString)Localizer["P3"].Value)</p>
|
||||
<p>@((MarkupString)Localizer["P4"].Value)</p>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" DisplayText="@Localizer["DisplayText"]" ShowLabel="true" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]" Name="Disalbed">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<DateTimePicker TValue="DateTime" IsDisabled="IsDisabled" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<Switch @bind-Value="@IsDisabled" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block12Title"]" Name="ViewModel">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<DateTimePicker TValue="DateTime" ShowSidebar="true" ViewMode="DatePickerViewMode.DateTime" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["Block12Title"]" Introduction="@Localizer["Block12Intro"]" Name="MinValue">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
|
||||
MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))" MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
|
||||
AutoClose="false" />
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
|
||||
<DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<BootstrapInputGroup>
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
|
||||
<DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
|
||||
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
|
||||
</BootstrapInputGroup>
|
||||
</div>
|
||||
</div>
|
||||
</DemoBlock>
|
||||
<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group" Demo="DateTimePicker.DateTimePickerGroup" />
|
||||
|
||||
<AttributeTable Items="@GetAttributes()" />
|
||||
|
||||
|
||||
@ -5,99 +5,14 @@
|
||||
namespace BootstrapBlazor.Shared.Samples;
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// DateTimePickers
|
||||
/// </summary>
|
||||
public sealed partial class DateTimePickers
|
||||
{
|
||||
private TimeSpan SpanValue { get; set; } = DateTime.Now.Subtract(DateTime.Today);
|
||||
|
||||
private string SpanValue2 { get; set; } = DateTime.Now.ToString("HH:mm:ss");
|
||||
|
||||
[NotNull]
|
||||
private BlockLogger? DateLogger { get; set; }
|
||||
|
||||
[NotNull]
|
||||
private BlockLogger? TimeLogger { get; set; }
|
||||
|
||||
private DateTime? BindValue { get; set; } = DateTime.Today;
|
||||
|
||||
private DateTime? BindNullValue { get; set; }
|
||||
|
||||
private bool IsDisabled { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Required]
|
||||
public DateTime? ModelValidateValue { get; set; }
|
||||
|
||||
private string? SubmitText { get; set; }
|
||||
|
||||
private string GetNullValueString => BindNullValue.HasValue ? BindNullValue.Value.ToString("yyyy-MM-dd") : " ";
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IStringLocalizer<DateTimePickers>? Localizer { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// OnInitialized 方法
|
||||
/// </summary>
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
SubmitText ??= Localizer[nameof(SubmitText)];
|
||||
}
|
||||
|
||||
private string BindValueString
|
||||
{
|
||||
get
|
||||
{
|
||||
return BindValue.HasValue ? BindValue.Value.ToString("yyyy-MM-dd") : "";
|
||||
}
|
||||
set
|
||||
{
|
||||
if (DateTime.TryParse(value, out var d))
|
||||
{
|
||||
BindValue = d;
|
||||
}
|
||||
else
|
||||
{
|
||||
BindValue = DateTime.Today;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private Task DateValueChanged(DateTime d)
|
||||
{
|
||||
DateLogger.Log($"{Localizer["Log1Text"]}: {d:yyyy-MM-dd}");
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private static string FormatterSpanString(TimeSpan ts)
|
||||
{
|
||||
return ts.ToString("hh\\:mm\\:ss");
|
||||
}
|
||||
|
||||
private TimeSpan TimeNow { get; set; } = DateTime.Now - DateTime.Today;
|
||||
|
||||
private void TimeValueChanged(TimeSpan d)
|
||||
{
|
||||
TimeLogger.Log($"{Localizer["Log2Text"]}: {d:hh\\:mm\\:ss}");
|
||||
}
|
||||
|
||||
private Task DateTimeValueChanged(DateTime? d)
|
||||
{
|
||||
BindValue = d;
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
private void OnValueChange(TimeSpan ts)
|
||||
{
|
||||
SpanValue2 = ts.ToString("hh\\:mm\\:ss");
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获得事件方法
|
||||
/// </summary>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user