feat: add DateTimeRangePickerView and DateTimeRangePicker components (#2546)

* 🆕 feat(DateTimePicker): support for addings shortcuts for quick select datetime

* update

* update

* add docs and demos

* resolve issues with github review process

docs/Masa.Blazor.Docs/Examples/components/date-time-range-pickers/Default.razor

@@ -0,0 +1,51 @@
+<MRow>
+    <MCol Cols="12">
+        <MSelect @bind-Value="_format"
+                 Filled
+                 HideDetails="true"
+                 Label="TimeFormat"
+                 Items="_items"
+                 ItemValue="u => u.Value"
+                 ItemText="u => u.Name">
+        </MSelect>
+
+        <MCheckbox @bind-Value="_multiSection"
+                   Label="MultiSection"
+                   HideDetails="true">
+            MultiSection
+        </MCheckbox>
+
+        @if (_multiSection)
+        {
+            <MCheckbox @bind-Value="_useSeconds"
+                       Label="UseSeconds"
+                       HideDetails="true">
+            </MCheckbox>
+        }
+    </MCol>
+    <MCol Cols="12">
+        <PDateTimeRangePicker @bind-Start="_start"
+                              @bind-End="_end"
+                              MultiSection="@_multiSection"
+                              UseSeconds="@_useSeconds"
+                              TimeFormat="_format">
+        </PDateTimeRangePicker>
+    </MCol>
+</MRow>
+
+@code {
+
+    private List<(string Name, TimeFormat Value)> _items = new()
+    {
+        new("AM/PM", TimeFormat.AmPm),
+        new("24 Hour", TimeFormat.Hr24)
+    };
+
+    private DateTime? _start = DateTime.Now;
+    private DateTime? _end = DateTime.Now.AddDays(1);
+
+    private bool _multiSection;
+    private bool _useSeconds;
+    private TimeFormat _format;
+
+}

docs/Masa.Blazor.Docs/Examples/components/date-time-range-pickers/DefaultActivator.razor

@@ -0,0 +1,14 @@
+<PDateTimeRangePicker @bind-Start="_start"
+                      @bind-End="_end"
+                      TimeFormat="TimeFormat.Hr24">
+    <PDefaultDateTimePickerActivator Filled
+                                     Clearable
+                                     Format="yyyy-MM-dd HH:mm:ss"/>
+</PDateTimeRangePicker>
+
+@code {
+
+    private DateTime? _start;
+    private DateTime? _end;
+
+}

docs/Masa.Blazor.Docs/Examples/components/date-time-range-pickers/Picker.razor

@@ -0,0 +1,10 @@
+<PDateTimeRangePicker @bind-Start="start"
+                      @bind-End="end">
+</PDateTimeRangePicker>
+
+@code {
+
+    private DateTime? start;
+    private DateTime? end;
+
+}

docs/Masa.Blazor.Docs/wwwroot/data/nav.json

@@ -445,6 +445,11 @@
           {
             "title": "digital-clocks",
             "type": "pickers"
+          },
+          {
+            "title": "date-time-range-pickers",
+            "type": "pickers",
+            "state": "new"
           }
         ]
       },

docs/Masa.Blazor.Docs/wwwroot/pages/components/date-time-range-pickers/en-US.md

@@ -0,0 +1,27 @@
+---
+title: Date time range pickers
+tag: "Preset"
+release: v1.11.0
+related:
+  - /blazor/components/date-pickers
+  - /blazor/components/digital-clocks
+  - /blazor/components/date-time-pickers
+---
+
+## Usage
+
+<masa-example file="Examples.components.date_time_range_pickers.Picker"></masa-example>
+
+## Examples
+
+### Configure default activator {#default-activator}
+
+By default, use a [MTextField](/blazor/components/text-fields) as the activator. You can configure the default activator with **PDefaultDateTimePickerActivator**.
+
+<masa-example file="Examples.components.date_time_range_pickers.DefaultActivator"></masa-example>
+
+## View components
+
+### DateTimeRangePickerView
+
+<masa-example file="Examples.components.date_time_range_pickers.Default"></masa-example>

docs/Masa.Blazor.Docs/wwwroot/pages/components/date-time-range-pickers/zh-CN.md

@@ -0,0 +1,27 @@
+---
+title: Date time range pickers（日期时间范围选择器）
+tag: "预置"
+release: v1.11.0
+related:
+  - /blazor/components/date-pickers
+  - /blazor/components/digital-clocks
+  - /blazor/components/date-time-pickers
+---
+
+## 使用 {#usage}
+
+<masa-example file="Examples.components.date_time_range_pickers.Picker"></masa-example>
+
+## 示例 {#examples}
+
+### 配置默认触发器 {#default-activator}
+
+默认使用一个 [MTextField](/blazor/components/text-fields) 作为触发器。可以通过 **PDefaultDateTimePickerActivator** 配置默认触发器。
+
+<masa-example file="Examples.components.date_time_range_pickers.DefaultActivator"></masa-example>
+
+## 视图组件 {#view-components}
+
+### DateTimeRangePickerView
+
+<masa-example file="Examples.components.date_time_range_pickers.Default"></masa-example>

docs/Masa.Docs.Shared/wwwroot/locale/en-US.json

@@ -240,6 +240,7 @@
   "digital-clocks": "Digital clocks",
   "date-time-pickers": "Date time picker",
   "date-digital-clock-pickers": "Date digital clock pickers",
+  "date-time-range-pickers": "Date time range pickers",
   "popup-service": "Popup service",
   "progress": "Progress",
   "progress-circular": "Progress circular",

docs/Masa.Docs.Shared/wwwroot/locale/zh-CN.json

@@ -238,6 +238,7 @@
   "digital-clocks": "Digital clocks（数字时钟）",
   "date-time-pickers": "Date time picker（日期时间选择器）",
   "date-digital-clock-pickers": "Date digital clock pickers（日期数字时钟选择器）",
+  "date-time-range-pickers": "Date time range pickers（日期时间范围选择器）",
   "popup-service": "Popup service（弹出层服务）",
   "progress": "Progress（进度条）",
   "progress-circular": "Progress circular（进度环）",