!1883 doc(#I49PL9): add english translation of datetimepickers page

* Merge branch 'dev' of https://gitee.com/LongbowEnterprise/BootstrapBla…
* doc: 添加 DateTimePickers 页面资源文件

src/BootstrapBlazor.Shared/Locales/en.json

@@ -937,6 +937,56 @@
     "Block5Intro": "Built in <code>ValidateForm</code> to use",
     "Event1": "Color change callback delegate method"
   },
+  "BootstrapBlazor.Shared.Pages.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",
+    "Blcok4Title": "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>viewModel</code> property to The <code> DateTime </code> of DatePickerViewModel.DateTime",
+    "Block8Title": "Allow empty time",
+    "Blcok8Intro": "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",
+    "Att1": "Whether to display the front label",
+    "Att2": "Whether to display the shortcut sidebar",
+    "Att3": "The front label displays text",
+    "Att4": "Date format string The default is yyyyy-MM-dd",
+    "Att5": "Whether to display this component",
+    "Att6": "Whether to disable Fasle by default",
+    "Att7": "Time format string The default is hh:mm:ss",
+    "Att8": "The value of the component is a two-way binding with ValueChanged",
+    "Att9": "Get/Set Component Display Mode The default is the month-to-day display mode",
+    "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",
+    "SubmitText": "Save",
+    "ModelValidateValue": "ModelValidateValue",
+    "ModelValidateValue.Required": "{0} is required."
+  },
   "BootstrapBlazor.Shared.Pages.Components.Block": {
     "Title": "",
     "SubTitle": "Demo"
@@ -994,11 +1044,6 @@
     "ShowBarUsageText": "With Bar",
     "IntroText4": "Show <code>Tip</code>"
   },
-  "BootstrapBlazor.Shared.Pages.DateTimePickers": {
-    "SubmitText": "Save",
-    "ModelValidateValue": "ModelValidateValue",
-    "ModelValidateValue.Required": "{0} is required."
-  },
   "BootstrapBlazor.Shared.Pages.Selects": {
     "PlaceHolder": "Not Select"
   },

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -937,6 +937,56 @@
     "Block5Intro": "内置于 <code>ValidateForm</code> 中使用",
     "Event1": "颜色改变回调委托方法"
   },
+  "BootstrapBlazor.Shared.Pages.DateTimePickers": {
+    "Title": "DatePicker 日期选择器",
+    "H1": "用于选择或输入日期",
+    "Block1Title": "选择日",
+    "Block1Intro": "以「日」为基本单位，基础的日期选择控件",
+    "Block2Title": "选择任意时间点",
+    "Block2Intro": "可以选择任意时间",
+    "Block3Title": "数据双向绑定",
+    "Block3Intro": "点击确认按钮时间选择框值与文本框值一致",
+    "codetext": "类型",
+    "Blcok4Title": "客户端验证",
+    "Block4Intro": "根据自定义验证规则进行数据有效性检查并自动提示",
+    "Block5Title": "点击弹出日期框",
+    "Block5Intro": "以「日」为基本单位，基础的日期选择控件",
+    "Block6Title": "数据双向绑定",
+    "Block6Intro": "日期组件时间改变时文本框内的数值也跟着改变",
+    "Block7Title": "带时间的选择器",
+    "Block7Intro": "在同一个选择器里选择日期和时间，点击确认按钮后关闭弹窗",
+    "P1": "设置 <code>ViewModel</code> 属性值为 <code>DatePickerViewModel.DateTime</code>",
+    "Block8Title": "允许空时间",
+    "Blcok8Intro": "多用于条件选择",
+    "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> 天",
+    "Att1": "是否显示前置标签",
+    "Att2": "是否显示快捷侧边栏",
+    "Att3": "前置标签显示文本",
+    "Att4": "日期格式字符串 默认为 yyyy-MM-dd",
+    "Att5": "是否显示本组件",
+    "Att6": "是否禁用 默认为 fasle",
+    "Att7": "时间格式字符串 默认为 hh:mm:ss",
+    "Att8": "组件值与 ValueChanged 作为双向绑定的值",
+    "Att9": "获得/设置 组件显示模式 默认为显示年月日模式",
+    "Event1": "确认按钮回调委托",
+    "Event2": "组件值改变时回调委托供双向绑定使用",
+    "Log1Text": "选择的日期为",
+    "Log2Text": "选择的时间为",
+    "SubmitText": "保存",
+    "ModelValidateValue": "属性",
+    "ModelValidateValue.Required": "{0}为必填项"
+  },
   "BootstrapBlazor.Shared.Pages.Components.Block": {
     "Title": "未设置",
     "SubTitle": "示例"
@@ -994,11 +1044,6 @@
     "ShowBarUsageText": "显示左侧 Bar",
     "IntroText4": "作为 <code>Tip</code> 使用"
   },
-  "BootstrapBlazor.Shared.Pages.DateTimePickers": {
-    "SubmitText": "保存",
-    "ModelValidateValue": "属性",
-    "ModelValidateValue.Required": "{0}为必填项"
-  },
   "BootstrapBlazor.Shared.Pages.Selects": {
     "PlaceHolder": "未选择"
   },

src/BootstrapBlazor.Shared/Pages/Samples/DateTimePickers.razor

@@ -1,34 +1,34 @@
 @page "/datetimepickers"
 
-<h3>DatePicker 日期选择器</h3>
+<h3>@Localizer["Title"]</h3>
 
-<h4>用于选择或输入日期</h4>
+<h4>@Localizer["H1"]</h4>
 
-<Block Title="选择日" Introduction="以「日」为基本单位，基础的日期选择控件">
+<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
     <div style="width: 320px;">
         <DatePickerBody IsShown="true" ValueChanged="@DateValueChanged" ShowFooter="false" />
     </div>
     <BlockLogger @ref="DateLogger" class="mt-3" />
 </Block>
 
-<Block Title="选择任意时间点" Introduction="可以选择任意时间">
+<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
     <TimePickerBody Value="@TimeNow" ValueChanged="@TimeValueChanged" />
 
     <BlockLogger @ref="TimeLogger" class="mt-3" />
 </Block>
 
-<Block Title="数据双向绑定" Introduction="点击确认按钮时间选择框值与文本框值一致">
+<Block Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]">
     <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> 类型</div>
+                <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> 类型</div>
+                <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>
@@ -36,7 +36,7 @@
     </div>
 </Block>
 
-<Block Title="客户端验证" Introduction="根据自定义验证规则进行数据有效性检查并自动提示">
+<Block Title="@Localizer["Blcok4Title"]" Introduction="@Localizer["Block4Intro"]">
     <ValidateForm Model="this">
         <div class="row g-3">
             <div class="col-12 col-sm-auto">
@@ -49,7 +49,7 @@
     </ValidateForm>
 </Block>
 
-<Block Title="点击弹出日期框" Introduction="以「日」为基本单位，基础的日期选择控件">
+<Block Title="" Introduction="">
     <div class="row g-3">
         <div class="col-sm-4">
             <DateTimePicker TValue="DateTime" Value="@DateTime.Today" />
@@ -59,7 +59,7 @@
     <BlockLogger @ref="DateTimeLogger" class="mt-3" />
 </Block>
 
-<Block Title="数据双向绑定" Introduction="日期组件时间改变时文本框内的数值也跟着改变">
+<Block Title="" Introduction="">
     <div class="row g-3">
         <div class="col-sm-6">
             <DateTimePicker TValue="DateTime?" Value="@BindValue" ValueChanged="@DateTimeValueChanged" Placement="Placement.Right" />
@@ -70,13 +70,13 @@
     </div>
 </Block>
 
-<Block Title="带时间的选择器" Introduction="在同一个选择器里选择日期和时间，点击确认按钮后关闭弹窗">
-    <p>设置 <code>ViewModel</code> 属性值为 <code>DatePickerViewModel.DateTime</code></p>
+<Block Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]">
+    <p>@((MarkupString)Localizer["P1"].Value)</p>
     <DateTimePicker TValue="DateTime" ViewModel="DatePickerViewModel.DateTime" />
 </Block>
 
-<Block Title="允许空时间" Introduction="多用于条件选择">
-    <p>绑定值为可为空类型 <code>DateTime?</code> 时自动出现 <b>清空</b> 按钮</p>
+<Block Title="@Localizer["Block8Title"]" Introduction="@Localizer["Blcok8Intro"]">
+    <p>@((MarkupString)Localizer["P2"].Value)</p>
     <div class="row g-3">
         <div class="col-12 col-sm-8">
             <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" />
@@ -87,17 +87,17 @@
     </div>
 </Block>
 
-<Block Title="显示标签" Introduction="作为表单组件时，显示组件前方标签">
-    <p>设置 <code>DisplayText</code> 属性值为 <code>选择时间</code></p>
-    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
+<Block Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]">
+    <p>@((MarkupString)Localizer["P3"].Value)</p>
+    <p>@((MarkupString)Localizer["P4"].Value)</p>
     <div class="row g-3">
         <div class="col-12">
-            <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" DisplayText="选择时间" ShowLabel="true" />
+            <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" DisplayText="@Localizer["DisplayText"]" ShowLabel="true" />
         </div>
     </div>
 </Block>
 
-<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入">
+<Block Title="" Introduction="">
     <div class="row g-3">
         <div class="col-12 col-sm-6">
             <DateTimePicker TValue="DateTime" IsDisabled="IsDisabled" />
@@ -108,7 +108,7 @@
     </div>
 </Block>
 
-<Block Title="带快捷键侧边栏" Introduction="设置 <code>ShowSidebar</code> 属性值为 <code>true</code> 时，组件显示快捷方式侧边栏">
+<Block Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block12Title"]">
     <div class="row g-3">
         <div class="col-12">
             <DateTimePicker TValue="DateTime" ShowSidebar="true" ViewModel="DatePickerViewModel.DateTime" />
@@ -116,7 +116,7 @@
     </div>
 </Block>
 
-<Block Title="设置值范围" Introduction="设置 <code>MinValue</code> 属性值与 <code>MaxValue</code> 限制可选值范围，本例中设置范围为 <b>45</b> 天">
+<Block Title="@Localizer["Block12Title"]" Introduction="@Localizer["Block12Intro"]">
     <div class="row g-3">
         <div class="col-12">
             <DateTimePicker TValue="DateTime" ViewModel="DatePickerViewModel.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"

src/BootstrapBlazor.Shared/Pages/Samples/DateTimePickers.razor.cs

@@ -46,7 +46,7 @@ namespace BootstrapBlazor.Shared.Pages
 
         private string? SubmitText { get; set; }
 
-        private string GetNullValueString => BindNullValue.HasValue ? BindNullValue.Value.ToString("yyyy-MM-dd") : "空值";
+        private string GetNullValueString => BindNullValue.HasValue ? BindNullValue.Value.ToString("yyyy-MM-dd") : " ";
 
         [Inject]
         [NotNull]
@@ -90,7 +90,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// <param name="d"></param>
         private Task DateValueChanged(DateTime d)
         {
-            DateLogger.Log($"选择的日期为: {d:yyyy-MM-dd}");
+            DateLogger.Log($"{Localizer["Log1Text"]}: {d:yyyy-MM-dd}");
             return Task.CompletedTask;
         }
 
@@ -107,7 +107,7 @@ namespace BootstrapBlazor.Shared.Pages
         /// <param name="d"></param>
         private void TimeValueChanged(TimeSpan d)
         {
-            TimeLogger.Log($"选择的时间为: {d:hh\\:mm\\:ss}");
+            TimeLogger.Log($"{Localizer["Log2Text"]}: {d:hh\\:mm\\:ss}");
         }
 
         /// <summary>
@@ -139,13 +139,13 @@ namespace BootstrapBlazor.Shared.Pages
             new EventItem()
             {
                 Name = "OnClickConfirm",
-                Description="确认按钮回调委托",
+                Description = Localizer["Event1"]!,
                 Type ="Action"
             },
             new EventItem()
             {
                 Name = "ValueChanged",
-                Description="组件值改变时回调委托供双向绑定使用",
+                Description = Localizer["Event2"]!,
                 Type ="EventCallback<DateTime?>"
             },
         };
@@ -158,35 +158,35 @@ namespace BootstrapBlazor.Shared.Pages
         {
             new AttributeItem() {
                 Name = "ShowLabel",
-                Description = "是否显示前置标签",
+                Description = Localizer["Att1"]!,
                 Type = "bool",
                 ValueList = "true|false",
                 DefaultValue = "true"
             },
             new AttributeItem() {
                 Name = "ShowSidebar",
-                Description = "是否显示快捷侧边栏",
+                Description = Localizer["Att2"]!,
                 Type = "bool",
                 ValueList = "true|false",
                 DefaultValue = "false"
             },
             new AttributeItem() {
                 Name = "DisplayText",
-                Description = "前置标签显示文本",
+                Description = Localizer["Att3"]!,
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = " — "
             },
             new AttributeItem() {
                 Name = "Format",
-                Description = "日期格式字符串 默认为 yyyy-MM-dd",
+                Description = Localizer["Att4"]!,
                 Type = "string",
                 ValueList = " — ",
                 DefaultValue = "yyyy-MM-dd"
             },
             new AttributeItem() {
                 Name = "IsShown",
-                Description = "是否显示本组件",
+                Description = Localizer["Att5"]!,
                 Type = "boolean",
                 ValueList = "",
                 DefaultValue = "false"
@@ -194,28 +194,28 @@ namespace BootstrapBlazor.Shared.Pages
             new AttributeItem()
             {
                 Name = "IsDisabled",
-                Description = "是否禁用 默认为 fasle",
+                Description = Localizer["Att6"]!,
                 Type = "bool",
                 ValueList = "true|false",
                 DefaultValue = "false"
             },
             new AttributeItem() {
                 Name = "TimeFormat",
-                Description = "时间格式字符串 默认为 hh:mm:ss",
+                Description = Localizer["Att7"]!,
                 Type = "string",
                 ValueList = "",
                 DefaultValue = "hh:mm:ss"
             },
             new AttributeItem() {
                 Name = "Value",
-                Description = "组件值与 ValueChanged 作为双向绑定的值",
+                Description = Localizer["Att8"]!,
                 Type = "TValue",
                 ValueList = "DateTime | DateTime?",
                 DefaultValue = " — "
             },
              new AttributeItem() {
                 Name = "ViewModel",
-                Description = "获得/设置 组件显示模式 默认为显示年月日模式",
+                Description = Localizer["Att9"]!,
                 Type = "DatePickerViewModel",
                 ValueList = " Date / DateTime / Year / Month",
                 DefaultValue = "Date"