!2758 feat(#I55NBU): DatatimePicker adapts to InputGroup component

* chore: bump version 6.6.3
* doc: 更新示例增加后缀示例
* doc: 增加适配 InputGroup 示例
* chore: 增加资源文件
* feat: Select 组件与 DatetimePicker 组件适配 InputGroup 组件

src/BootstrapBlazor.Shared/Locales/en.json

@@ -1046,6 +1046,10 @@
     "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",
+    "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",
     "Att3": "The front label displays text",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -1046,6 +1046,10 @@
     "Block11Intro": "设置 <code>ShowSidebar</code> 属性值为 <code>true</code> 时，组件显示快捷方式侧边栏",
     "Block12Title": "设置值范围",
     "Block12Intro": "设置 <code>MinValue</code> 属性值与 <code>MaxValue</code> 限制可选值范围，本例中设置范围为 <b>45</b> 天",
+    "BlockGroupTitle": "组合使用",
+    "BlockGroupPrevLabel": "前置标签",
+    "BlockGroupSuffixLabel": "后置标签",
+    "BlockGroupIntro": "内置 <code>BootstrapInputGroup</code> 中使用，与 <code>BootstrapInputGroupLabel</code> 组合使用",
     "Att1": "是否显示前置标签",
     "Att2": "是否显示快捷侧边栏",
     "Att3": "前置标签显示文本",

src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor

@@ -123,6 +123,30 @@
     </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>
+
 <AttributeTable Items="@GetAttributes()" />
 
 <EventTable Items="@GetEvents()" />

src/BootstrapBlazor.Shared/wwwroot/css/site.css

@@ -1,4 +1,4 @@
-header {
+header {
     background-color: #7952b3;
     box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
     font-size: 1rem;

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>6.6.2</Version>
+    <Version>6.6.3</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.css

@@ -287,12 +287,6 @@
         border-radius: 18px;
     }
 
-@media (min-width: 576px) {
-    .input-group input.form-control {
-        width: 1%;
-    }
-}
-
 .picker-panel-footer {
     border-top: 1px solid #e4e4e4;
     padding: 4px;
@@ -324,3 +318,21 @@
         .picker-panel-footer .picker-panel-link-btn.is-now {
             color: #409eff;
         }
+
+
+.input-group > .datetime-picker,
+.input-group > .select {
+    width: 1%;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+    .input-group > .datetime-picker .form-control {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .input-group > .datetime-picker:not(:last-child) .form-control {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }