leftyer/BootstrapBlazor
1
0
Fork 0
mirror of https://gitee.com/LongbowEnterprise/BootstrapBlazor.git synced 2025-12-06 07:28:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(DateTimePicker): add IsButton parameter (#6999)

Browse Source 
* feat: 增加日期选择按钮

* refactor: 增加逻辑

* refactor: 移除 DateTimePickerButton 组件

* refactor: 重构脚本支持 Button 模式切换

* feat: 增加按钮元素

* doc: 增加多语言

* doc: 更新示例

* doc: 文档格式化

* test: 更新单元测试

* chore: bump version 9.11.5-beta05
This commit is contained in:
Argo Zhang
2025-10-24 21:13:33 +08:00
committed by GitHub
parent 7239ed0f1a
commit 37ab016e2b
17 changed files with 327 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
localization/de.json
View File

@@ -34,6 +34,7 @@
"AutoScrollText": "AutoScroll" "AutoScrollText": "AutoScroll"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "wählen",
"DatePlaceHolder": "Datum auswählen", "DatePlaceHolder": "Datum auswählen",
"TimePlaceHolder": "Uhrzeit auswählen", "TimePlaceHolder": "Uhrzeit auswählen",
"DateTimePlaceHolderText": "Bitte auswählen ...", "DateTimePlaceHolderText": "Bitte auswählen ...",

1
localization/es.json
View File

@@ -34,6 +34,7 @@
"AutoScrollText": "AutoScroll" "AutoScrollText": "AutoScroll"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "Seleccione",
"DatePlaceHolder": "Seleccione fecha", "DatePlaceHolder": "Seleccione fecha",
"TimePlaceHolder": "Seleccione hora", "TimePlaceHolder": "Seleccione hora",
"DateTimePlaceHolderText": "Por favor seleccione ...", "DateTimePlaceHolderText": "Por favor seleccione ...",

1
localization/it.json
View File

@@ -45,6 +45,7 @@
"AutoScrollText": "Scorrimento automatico" "AutoScrollText": "Scorrimento automatico"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "Seleziona",
"DatePlaceHolder": "Seleziona la data", "DatePlaceHolder": "Seleziona la data",
"TimePlaceHolder": "Seleziona l'ora", "TimePlaceHolder": "Seleziona l'ora",
"DateTimePlaceHolderText": "Per favore seleziona ...", "DateTimePlaceHolderText": "Per favore seleziona ...",

1
localization/pt.json
View File

@@ -34,6 +34,7 @@
"AutoScrollText": "Rolagem automática" "AutoScrollText": "Rolagem automática"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "Selecione",
"DatePlaceHolder": "Selecione a data", "DatePlaceHolder": "Selecione a data",
"TimePlaceHolder": "Selecione o horário", "TimePlaceHolder": "Selecione o horário",
"DateTimePlaceHolderText": "Por favor, selecione ...", "DateTimePlaceHolderText": "Por favor, selecione ...",

3
localization/ru-RU.json
View File

@@ -1,4 +1,4 @@
{ {
"BootstrapBlazor.Components.AutoComplete": { "BootstrapBlazor.Components.AutoComplete": {
"NoDataTip": "Нет данных", "NoDataTip": "Нет данных",
"PlaceHolder": "Пожалуйста, введите" "PlaceHolder": "Пожалуйста, введите"
@@ -34,6 +34,7 @@
"AutoScrollText": "Автопрокрутка" "AutoScrollText": "Автопрокрутка"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "Выберите",
"DatePlaceHolder": "Выберите дату", "DatePlaceHolder": "Выберите дату",
"TimePlaceHolder": "Выберите время", "TimePlaceHolder": "Выберите время",
"DateTimePlaceHolderText": "Пожалуйста, выберите ...", "DateTimePlaceHolderText": "Пожалуйста, выберите ...",

1
localization/th-TH.json
View File

@@ -34,6 +34,7 @@
"AutoScrollText": "เลื่อนอัตโนมัติ" "AutoScrollText": "เลื่อนอัตโนมัติ"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "เลือก",
"DatePlaceHolder": "เลือกวันที่", "DatePlaceHolder": "เลือกวันที่",
"TimePlaceHolder": "เลือกเวลา", "TimePlaceHolder": "เลือกเวลา",
"DateTimePlaceHolderText": "กรุณาเลือก ...", "DateTimePlaceHolderText": "กรุณาเลือก ...",

1
localization/uk-UA.json
View File

@@ -34,6 +34,7 @@
"AutoScrollText": "Автопрокрутка" "AutoScrollText": "Автопрокрутка"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "Виберіть",
"DatePlaceHolder": "Виберіть дату", "DatePlaceHolder": "Виберіть дату",
"TimePlaceHolder": "Виберіть час", "TimePlaceHolder": "Виберіть час",
"DateTimePlaceHolderText": "Будь ласка, виберіть ...", "DateTimePlaceHolderText": "Будь ласка, виберіть ...",

1
localization/zh-TW.json
View File

@@ -34,6 +34,7 @@
"AutoScrollText": "自動滾屏" "AutoScrollText": "自動滾屏"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "選擇",
"DatePlaceHolder": "選擇日期", "DatePlaceHolder": "選擇日期",
"TimePlaceHolder": "選擇時間", "TimePlaceHolder": "選擇時間",
"DateTimePlaceHolderText": "請選擇日期時間", "DateTimePlaceHolderText": "請選擇日期時間",

354
src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor
View File

@@ -5,221 +5,241 @@
<h4>@Localizer["Description"]</h4> <h4>@Localizer["Description"]</h4>
<DemoBlock Title="@Localizer["DateTimePickerTitle"]" Introduction="@Localizer["DateTimePickerIntro"]" Name="DateTimePicker"> <DemoBlock Title="@Localizer["DateTimePickerTitle"]" Introduction="@Localizer["DateTimePickerIntro"]" Name="DateTimePicker">
<DateTimePicker ViewMode="DatePickerViewMode.DateTime" TimeFormat="hh\:mm" <section ignore class="row g-3 mb-3">
Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged"> <div class="col-12 col-sm-6">
<TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" /> <BootstrapInputGroup>
</DateTimePicker> <BootstrapInputGroupLabel DisplayText="IsButton"></BootstrapInputGroupLabel>
<ConsoleLogger @ref="TimePickerLogger" class="mt-3" /> <Switch @bind-Value="_isButton"></Switch>
</BootstrapInputGroup>
</div>
</section>
<DateTimePicker ViewMode="DatePickerViewMode.DateTime" TimeFormat="hh\:mm" IsButton="_isButton"
Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged">
<TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" />
</DateTimePicker>
<ConsoleLogger @ref="TimePickerLogger" class="mt-3" />
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal"> <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
<section ignore> <section ignore>
<GroupBox Title="@Localizer["Feature"]"> <GroupBox Title="@Localizer["Feature"]">
<div class="row g-3 form-inline text-end"> <div class="row g-3 form-inline text-end">
<div class="col-12 col-sm-3"> <div class="col-12 col-sm-6 col-lg-3">
<Switch DisplayText="@Localizer["FeatureShowLunar"]" ShowLabel="true" @bind-Value="_showLunar" /> <BootstrapInputGroup>
</div> <BootstrapInputGroupLabel DisplayText="@Localizer["FeatureShowLunar"]"></BootstrapInputGroupLabel>
<div class="col-12 col-sm-3"> <Switch @bind-Value="_showLunar" />
<Switch DisplayText="@Localizer["FeatureShowSolarTerm"]" ShowLabel="true" @bind-Value="_showSolarTerm" /> </BootstrapInputGroup>
</div> </div>
<div class="col-12 col-sm-3"> <div class="col-12 col-sm-6 col-lg-3">
<Switch DisplayText="@Localizer["FeatureShowFestivals"]" ShowLabel="true" @bind-Value="_showFestivals" /> <BootstrapInputGroup>
</div> <BootstrapInputGroupLabel DisplayText="@Localizer["FeatureShowSolarTerm"]"></BootstrapInputGroupLabel>
<div class="col-12 col-sm-3"> <Switch @bind-Value="_showSolarTerm" />
<Switch DisplayText="@Localizer["FeatureShowHolidays"]" ShowLabel="true" @bind-Value="_showHolidays" /> </BootstrapInputGroup>
</div> </div>
</div> <div class="col-12 col-sm-6 col-lg-3">
</GroupBox> <BootstrapInputGroup>
<div class="mt-3"> <BootstrapInputGroupLabel DisplayText="@Localizer["FeatureShowFestivals"]"></BootstrapInputGroupLabel>
<Pre>builder.Services.AddBootstrapHolidayService();</Pre> <Switch @bind-Value="_showFestivals" />
</div> </BootstrapInputGroup>
</section> </div>
<DatePickerBody @bind-Value="Value" OnConfirm="@NormalOnConfirm" ShowFooter="false" ShowLunar="_showLunar" ShowSolarTerm="_showSolarTerm" ShowFestivals="_showFestivals" ShowHolidays="_showHolidays" /> <div class="col-12 col-sm-6 col-lg-3">
<ConsoleLogger @ref="NormalLogger" class="mt-3" /> <BootstrapInputGroup>
<section ignore> <BootstrapInputGroupLabel DisplayText="@Localizer["FeatureShowHolidays"]"></BootstrapInputGroupLabel>
<Tips class="mt-3"> <Switch @bind-Value="_showHolidays" />
<p>@((MarkupString)Localizer["FeatureIntro"].Value)</p> </BootstrapInputGroup>
<ul class="ul-demo mt-3"> </div>
<li>@((MarkupString)Localizer["FeatureShowLunarIntro"].Value)</li> </div>
<li>@((MarkupString)Localizer["FeatureShowSolarTermIntro"].Value)</li> </GroupBox>
<li>@((MarkupString)Localizer["FeatureShowFestivalsIntro"].Value)</li> <div class="mt-3">
<li>@((MarkupString)Localizer["FeatureShowHolidaysIntro"].Value)</li> <Pre>builder.Services.AddBootstrapHolidayService();</Pre>
</ul> </div>
<div>@((MarkupString)Localizer["FeatureFestivalIntro"].Value)</div> </section>
</Tips> <DatePickerBody @bind-Value="Value" OnConfirm="@NormalOnConfirm" ShowFooter="false" ShowLunar="_showLunar" ShowSolarTerm="_showSolarTerm" ShowFestivals="_showFestivals" ShowHolidays="_showHolidays" />
</section> <ConsoleLogger @ref="NormalLogger" class="mt-3" />
<section ignore>
<Tips class="mt-3">
<p>@((MarkupString)Localizer["FeatureIntro"].Value)</p>
<ul class="ul-demo mt-3">
<li>@((MarkupString)Localizer["FeatureShowLunarIntro"].Value)</li>
<li>@((MarkupString)Localizer["FeatureShowSolarTermIntro"].Value)</li>
<li>@((MarkupString)Localizer["FeatureShowFestivalsIntro"].Value)</li>
<li>@((MarkupString)Localizer["FeatureShowHolidaysIntro"].Value)</li>
</ul>
<div>@((MarkupString)Localizer["FeatureFestivalIntro"].Value)</div>
</Tips>
</section>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm"> <DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
<ValidateForm Model="this"> <ValidateForm Model="this">
<div class="row g-3"> <div class="row g-3">
<div class="col-12 col-sm-auto"> <div class="col-12 col-sm-auto">
<DateTimePicker @bind-Value="@ValidateFormValue" /> <DateTimePicker @bind-Value="@ValidateFormValue" />
</div> </div>
<div class="col-12 col-sm-auto align-self-end"> <div class="col-12 col-sm-auto align-self-end">
<Button ButtonType="ButtonType.Submit" Text="@Localizer["SubmitText"]" Icon="fa-solid fa-floppy-disk"></Button> <Button ButtonType="ButtonType.Submit" Text="@Localizer["SubmitText"]" Icon="fa-solid fa-floppy-disk"></Button>
</div> </div>
</div> </div>
</ValidateForm> </ValidateForm>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["ShowIconTitle"]" Introduction="@Localizer["ShowIconIntro"]" Name="ShowIcon"> <DemoBlock Title="@Localizer["ShowIconTitle"]" Introduction="@Localizer["ShowIconIntro"]" Name="ShowIcon">
<DateTimePicker TValue="DateTimeOffset?" ShowIcon="false" /> <DateTimePicker TValue="DateTimeOffset ?" ShowIcon="false" />
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["DateTimeOffsetTitle"]" Introduction="@Localizer["DateTimeOffsetIntro"]" Name="DateTimeOffset"> <DemoBlock Title="@Localizer["DateTimeOffsetTitle"]" Introduction="@Localizer["DateTimeOffsetIntro"]" Name="DateTimeOffset">
<DateTimePicker @bind-Value="DateTimeOffsetValue" /> <DateTimePicker @bind-Value="DateTimeOffsetValue" />
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue"> <DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
<div class="row g-3"> <div class="row g-3">
<div class="col-sm-6"> <div class="col-sm-6">
<DateTimePicker @bind-Value="@BindValue" IsEditable="true" DateFormat="dd/MM/yyyy" /> <DateTimePicker @bind-Value="@BindValue" IsEditable="true" DateFormat="dd/MM/yyyy" />
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<input class="form-control" @bind="@BindValueString" /> <input class="form-control" @bind="@BindValueString" />
</div> </div>
</div> </div>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["IsEditableTitle"]" Introduction="@Localizer["IsEditableIntro"]" Name="IsEditable"> <DemoBlock Title="@Localizer["IsEditableTitle"]" Introduction="@Localizer["IsEditableIntro"]" Name="IsEditable">
<div class="row g-3"> <div class="row g-3">
<div class="col-sm-6"> <div class="col-sm-6">
<DateTimePicker @bind-Value="@BindValue" IsEditable="true" DateFormat="yyyy-MM-dd" /> <DateTimePicker @bind-Value="@BindValue" IsEditable="true" DateFormat="yyyy-MM-dd" />
</div> </div>
</div> </div>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewMode"> <DemoBlock Title="@Localizer["ViewModeTitle"]" Introduction="@Localizer["ViewModeIntro"]" Name="ViewMode">
<section ignore>@((MarkupString)Localizer["ViewModeTip"].Value)</section> <section ignore>@((MarkupString)Localizer["ViewModeTip"].Value)</section>
<div class="row g-3"> <div class="row g-3">
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<DateTimePicker @bind-Value="YearValue" ShowLabel="true" DisplayText="Year" ViewMode="DatePickerViewMode.Year" DateFormat="yyyy" /> <DateTimePicker @bind-Value="YearValue" ShowLabel="true" DisplayText="Year" ViewMode="DatePickerViewMode.Year" DateFormat="yyyy" />
</div> </div>
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<DateTimePicker @bind-Value="MonthValue" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" DateFormat="yyyy-MM" /> <DateTimePicker @bind-Value="MonthValue" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" DateFormat="yyyy-MM" />
</div> </div>
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<DateTimePicker @bind-Value="DateValue" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" DateFormat="yyyy-MM-dd" /> <DateTimePicker @bind-Value="DateValue" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" DateFormat="yyyy-MM-dd" />
</div> </div>
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<DateTimePicker @bind-Value="DateTimeValue" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" DateTimeFormat="yyyy-MM-dd HH:mm:ss" /> <DateTimePicker @bind-Value="DateTimeValue" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" DateTimeFormat="yyyy-MM-dd HH:mm:ss" />
</div> </div>
</div> </div>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["NullValueTitle"]" Introduction="@Localizer["NullValueIntro"]" Name="NullValue"> <DemoBlock Title="@Localizer["NullValueTitle"]" Introduction="@Localizer["NullValueIntro"]" Name="NullValue">
<section ignore>@((MarkupString)Localizer["NullValueTip"].Value)</section> <section ignore>@((MarkupString)Localizer["NullValueTip"].Value)</section>
<div class="row g-3"> <div class="row g-3">
<div class="col-12 col-sm-8"> <div class="col-12 col-sm-8">
<DateTimePicker @bind-Value="@BindNullValue" /> <DateTimePicker @bind-Value="@BindNullValue" />
</div> </div>
<div class="col-12 col-sm-4"> <div class="col-12 col-sm-4">
<Display TValue="string" Value="@GetNullValueString" /> <Display TValue="string" Value="@GetNullValueString" />
</div> </div>
</div> </div>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel"> <DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel">
<section ignore class="mb-3"> <section ignore class="mb-3">
@((MarkupString)Localizer["ShowLabelTip"].Value) @((MarkupString)Localizer["ShowLabelTip"].Value)
</section> </section>
<DateTimePicker ShowLabel="true" DisplayText="@Localizer["DisplayText"]" @bind-Value="@ShowLabelValue" /> <DateTimePicker ShowLabel="true" DisplayText="@Localizer["DisplayText"]" @bind-Value="@ShowLabelValue" />
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="IsDisabled"> <DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="IsDisabled">
<div class="row g-3"> <div class="row g-3">
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<DateTimePicker IsDisabled="IsDisabled" Value="DateTime.Today" /> <DateTimePicker IsDisabled="IsDisabled" Value="DateTime.Today" />
</div> </div>
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<Switch @bind-Value="@IsDisabled" /> <Switch @bind-Value="@IsDisabled" />
</div> </div>
</div> </div>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar"> <DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar">
<DateTimePicker ShowSidebar="true" @bind-Value="SidebarValue" /> <DateTimePicker ShowSidebar="true" @bind-Value="SidebarValue" />
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue"> <DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue">
<DateTimePicker @bind-Value="@AllowValue" <DateTimePicker @bind-Value="@AllowValue"
MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))" MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))"
MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" /> MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose"> <DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose">
<section ignore class="mb-3"> <section ignore class="mb-3">
@((MarkupString)Localizer["BlockAutoCloseDesc"].Value) @((MarkupString)Localizer["BlockAutoCloseDesc"].Value)
</section> </section>
<DateTimePicker @bind-Value="@AutoCloseValue" AutoClose="false" /> <DateTimePicker @bind-Value="@AutoCloseValue" AutoClose="false" />
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group"> <DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
<div class="row g-3"> <div class="row g-3">
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<BootstrapInputGroup> <BootstrapInputGroup>
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" /> <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" />
<DateTimePicker TValue="DateTime" ShowIcon="false" /> <DateTimePicker TValue="DateTime" ShowIcon="false" />
</BootstrapInputGroup> </BootstrapInputGroup>
</div> </div>
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<BootstrapInputGroup> <BootstrapInputGroup>
<DateTimePicker TValue="DateTime" /> <DateTimePicker TValue="DateTime" />
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" /> <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
</BootstrapInputGroup> </BootstrapInputGroup>
</div> </div>
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<BootstrapInputGroup> <BootstrapInputGroup>
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" /> <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" />
<DateTimePicker TValue="DateTime" ShowIcon="false" /> <DateTimePicker TValue="DateTime" ShowIcon="false" />
<BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" /> <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
</BootstrapInputGroup> </BootstrapInputGroup>
</div> </div>
</div> </div>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["DayTemplateTitle"]" Introduction="@Localizer["DayTemplateIntro"]" Name="DayTemplate"> <DemoBlock Title="@Localizer["DayTemplateTitle"]" Introduction="@Localizer["DayTemplateIntro"]" Name="DayTemplate">
<DateTimePicker TValue="DateTimeOffset?" CustomClass="custom-picker"> <DateTimePicker TValue="DateTimeOffset ?" CustomClass="custom-picker">
<DayTemplate> <DayTemplate>
<span class="custom-cell"> <span class="custom-cell">
<span>@context.Day</span> <span>@context.Day</span>
<span class="@GetMarkByDay(context)"></span> <span class="@GetMarkByDay(context)"></span>
</span> </span>
</DayTemplate> </DayTemplate>
</DateTimePicker> </DateTimePicker>
</DemoBlock> </DemoBlock>
<DemoBlock Title="@Localizer["DisableDayCallbackTitle"]" Introduction="@Localizer["DisableDayCallbackIntro"]" Name="OnDisabledDayCallback"> <DemoBlock Title="@Localizer["DisableDayCallbackTitle"]" Introduction="@Localizer["DisableDayCallbackIntro"]" Name="OnDisabledDayCallback">
<section ignore> <section ignore>
<Tips> <Tips>
@((MarkupString)Localizer["DisableDayCallbackTip"].Value) @((MarkupString)Localizer["DisableDayCallbackTip"].Value)
</Tips> </Tips>
<GroupBox Title="@Localizer["DisableOptions"]"> <GroupBox Title="@Localizer["DisableOptions"]">
<div class="row g-3 form-inline text-end"> <div class="row g-3 form-inline text-end">
<div class="col-12 col-sm-6 col-md-auto"> <div class="col-12 col-sm-6 col-md-auto">
<Switch DisplayText="@Localizer["DisableWeekend"]" ShowLabel="true" @bind-Value="_disableWeekend" OnValueChanged="OnDisabledDaysChanged" /> <Switch DisplayText="@Localizer["DisableWeekend"]" ShowLabel="true" @bind-Value="_disableWeekend" OnValueChanged="OnDisabledDaysChanged" />
</div> </div>
<div class="col-12 col-sm-6 col-md-auto"> <div class="col-12 col-sm-6 col-md-auto">
<Switch DisplayText="@Localizer["DisableToday"]" ShowLabel="true" @bind-Value="_disableToday" OnValueChanged="OnDisabledDaysChanged" /> <Switch DisplayText="@Localizer["DisableToday"]" ShowLabel="true" @bind-Value="_disableToday" OnValueChanged="OnDisabledDaysChanged" />
</div> </div>
</div> </div>
</GroupBox> </GroupBox>
</section> </section>
<div class="row form-inline g-3"> <div class="row form-inline g-3">
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<DateTimePicker ViewMode="DatePickerViewMode.DateTime" DisplayText="@Localizer["DisableDayCallbackAllowNullDisplayText"]" <DateTimePicker ViewMode="DatePickerViewMode.DateTime" DisplayText="@Localizer["DisableDayCallbackAllowNullDisplayText"]"
ShowLabel="true" @bind-Value="@_disabledNullValue" @ref="_picker1" ShowLabel="true" @bind-Value="@_disabledNullValue" @ref="_picker1"
OnGetDisabledDaysCallback="OnGetDisabledDaysCallback" DisplayDisabledDayAsEmpty="true"> OnGetDisabledDaysCallback="OnGetDisabledDaysCallback" DisplayDisabledDayAsEmpty="true">
</DateTimePicker> </DateTimePicker>
</div> </div>
<div class="col-12 col-sm-6"> <div class="col-12 col-sm-6">
<DateTimePicker ViewMode="DatePickerViewMode.DateTime" DisplayText="@Localizer["DisableDayCallbackNotAllowNullDisplayText"]" <DateTimePicker ViewMode="DatePickerViewMode.DateTime" DisplayText="@Localizer["DisableDayCallbackNotAllowNullDisplayText"]"
ShowLabel="true" @bind-Value="@_disabledValue" @ref="_picker2" ShowLabel="true" @bind-Value="@_disabledValue" @ref="_picker2"
OnGetDisabledDaysCallback="OnGetDisabledDaysCallback"> OnGetDisabledDaysCallback="OnGetDisabledDaysCallback">
</DateTimePicker> </DateTimePicker>
</div> </div>
</div> </div>
</DemoBlock> </DemoBlock>
<AttributeTable Items="@GetAttributes()" /> <AttributeTable Items="@GetAttributes()" />

1
src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs
View File

@@ -95,6 +95,7 @@ public sealed partial class DateTimePickers
private bool _disableToday = true; private bool _disableToday = true;
private DateTime? _disabledNullValue = DateTime.Today; private DateTime? _disabledNullValue = DateTime.Today;
private DateTime _disabledValue = DateTime.Today; private DateTime _disabledValue = DateTime.Today;
private bool _isButton = false;
private async Task<List<DateTime>> OnGetDisabledDaysCallback(DateTime start, DateTime end) private async Task<List<DateTime>> OnGetDisabledDaysCallback(DateTime start, DateTime end)
{ {

4
src/BootstrapBlazor/BootstrapBlazor.csproj
View File

@@ -1,11 +1,11 @@
<Project Sdk="Microsoft.NET.Sdk.Razor"> <Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup Condition="'$(VisualStudioVersion)' == '17.0'"> <PropertyGroup Condition="'$(VisualStudioVersion)' == '17.0'">
<Version>9.11.5-beta04</Version> <Version>9.11.5-beta05</Version>
</PropertyGroup> </PropertyGroup>
<PropertyGroup Condition="'$(VisualStudioVersion)' == '18.0'"> <PropertyGroup Condition="'$(VisualStudioVersion)' == '18.0'">
<Version>10.0.0-rc.2.1.3</Version> <Version>10.0.0-rc.2.1.4</Version>
</PropertyGroup> </PropertyGroup>
<ItemGroup> <ItemGroup>

19
src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor
View File

@@ -8,12 +8,21 @@
<BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" /> <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
} }
<div @attributes="@AdditionalAttributes" tabindex="@TabIndexString" id="@Id" class="@ClassString" data-bb-dropdown=".picker-panel"> <div @attributes="@AdditionalAttributes" tabindex="@TabIndexString" id="@Id" class="@ClassString" data-bb-dropdown=".picker-panel">
<input readonly="@ReadonlyString" class="@InputClassName" @bind="@CurrentValueAsString" placeholder="@PlaceholderString" @if(IsButton)
disabled="@Disabled" data-bs-toggle="@Constants.DropdownToggleString" data-bs-placement="@PlacementString"
data-bs-custom-class="@CustomClassString" @onblur="OnBlur" />
@if (ShowIcon)
{ {
<i class="@DateTimePickerIconClassString"></i> <button type="button" class="@ButtonClassString" disabled="@Disabled"
data-bs-toggle="@Constants.DropdownToggleString" data-bs-placement="@PlacementString"
data-bs-custom-class="@CustomClassString">@PickerButtonText</button>
}
else
{
<input readonly="@ReadonlyString" class="@InputClassName" @bind="@CurrentValueAsString" placeholder="@PlaceholderString"
disabled="@Disabled" data-bs-toggle="@Constants.DropdownToggleString" data-bs-placement="@PlacementString"
data-bs-custom-class="@CustomClassString" @onblur="OnBlur" />
@if (ShowIcon)
{
<i class="@DateTimePickerIconClassString"></i>
}
} }
<DatePickerBody @bind-Value="SelectedValue" @ref="_pickerBody" FirstDayOfWeek="FirstDayOfWeek" <DatePickerBody @bind-Value="SelectedValue" @ref="_pickerBody" FirstDayOfWeek="FirstDayOfWeek"
ShowClearButton="AllowNull" ShowSidebar="ShowSidebar" SidebarTemplate="SidebarTemplate" ShowClearButton="AllowNull" ShowSidebar="ShowSidebar" SidebarTemplate="SidebarTemplate"

46
src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs
View File

@@ -31,6 +31,10 @@ public partial class DateTimePicker<TValue>
.AddClass(ValidCss) .AddClass(ValidCss)
.Build(); .Build();
private string? ButtonClassString => CssBuilder.Default("btn dropdown-toggle")
.AddClass($"btn-{ButtonColor.ToDescriptionString()}", ButtonColor != Color.None)
.Build();
/// <summary> /// <summary>
/// 获得 组件小图标样式 /// 获得 组件小图标样式
/// </summary> /// </summary>
@@ -54,6 +58,24 @@ public partial class DateTimePicker<TValue>
/// </summary> /// </summary>
private bool AllowNull { get; set; } private bool AllowNull { get; set; }
/// <summary>
/// 获得/设置 是否显示为按钮样式 默认 false
/// </summary>
[Parameter]
public bool IsButton { get; set; }
/// <summary>
/// 获得/设置 选择按钮文本 默认 null 读取资源文件
/// </summary>
[Parameter]
public string? PickerButtonText { get; set; }
/// <summary>
/// 获得/设置 选择按钮颜色 默认 <see cref="Color.Primary"/>
/// </summary>
[Parameter]
public Color ButtonColor { get; set; } = Color.Primary;
/// <summary> /// <summary>
/// 获得/设置 时间格式化字符串 默认值为 null /// 获得/设置 时间格式化字符串 默认值为 null
/// </summary> /// </summary>
@@ -292,6 +314,7 @@ public partial class DateTimePicker<TValue>
DateTimeFormat ??= Localizer[nameof(DateTimeFormat)]; DateTimeFormat ??= Localizer[nameof(DateTimeFormat)];
DateFormat ??= Localizer[nameof(DateFormat)]; DateFormat ??= Localizer[nameof(DateFormat)];
TimeFormat ??= Localizer[nameof(TimeFormat)]; TimeFormat ??= Localizer[nameof(TimeFormat)];
PickerButtonText ??= Localizer[nameof(PickerButtonText)];
Icon ??= IconTheme.GetIconByKey(ComponentIcons.DateTimePickerIcon); Icon ??= IconTheme.GetIconByKey(ComponentIcons.DateTimePickerIcon);
@@ -371,6 +394,29 @@ public partial class DateTimePicker<TValue>
/// <returns></returns> /// <returns></returns>
protected override bool ShouldRender() => _render; protected override bool ShouldRender() => _render;
private bool _isButton = false;
/// <summary>
/// <inheritdoc/>
/// </summary>
/// <param name="firstRender"></param>
/// <returns></returns>
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
// 首次渲染时同步 IsButton 参数值
_isButton = IsButton;
}
if (_isButton != IsButton)
{
_isButton = IsButton;
await InvokeVoidAsync("reset", Id);
}
}
/// <summary> /// <summary>
/// 格式化数值方法 /// 格式化数值方法
/// </summary> /// </summary>

69
src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js
View File

@@ -8,6 +8,12 @@ export function init(id, invoke, options) {
return return
} }
const popover = createPopover(el, invoke, options);
const input = handlerInput(el, popover);
Data.set(id, { el, input, invoke, options, popover });
}
const createPopover = (el, invoke, options) => {
const popover = Popover.init(el, { const popover = Popover.init(el, {
dropdownSelector: el.getAttribute('data-bb-dropdown'), dropdownSelector: el.getAttribute('data-bb-dropdown'),
isDisabled: () => { isDisabled: () => {
@@ -19,27 +25,47 @@ export function init(id, invoke, options) {
} }
} }
}); });
const input = el.querySelector('.datetime-picker-input'); return popover;
const dateTimePicker = { }
input,
popover
}
Data.set(id, dateTimePicker);
EventHandler.on(input, 'keydown', e => { const handlerInput = (el, popover) => {
if (e.key === 'Tab' && popover.isShown()) { const input = el.querySelector('.datetime-picker-input');
popover.hide(); if (input) {
} EventHandler.on(input, 'keydown', e => {
}); if (e.key === 'Tab' && popover.isShown()) {
EventHandler.on(input, 'keyup', e => { popover.hide();
if (e.key === 'Escape') { }
popover.hide(); });
input.blur(); EventHandler.on(input, 'keyup', e => {
} if (e.key === 'Escape') {
else if (e.key === 'Tab') { popover.hide();
popover.show(); input.blur();
} }
}); else if (e.key === 'Tab') {
popover.show();
}
});
}
return input;
}
const disposeInput = input => {
if (input) {
EventHandler.off(input, 'keydown');
EventHandler.off(input, 'keyup');
}
}
export function reset(id) {
const picker = Data.get(id);
if (picker) {
const { el, input, popover, invoke, options } = picker;
disposeInput(input);
Popover.dispose(popover);
picker.popover = createPopover(el, invoke, options);
picker.input = handlerInput(picker.el, picker.popover);
}
} }
export function hide(id) { export function hide(id) {
@@ -55,8 +81,7 @@ export function dispose(id) {
if (data) { if (data) {
const { input, popover } = data; const { input, popover } = data;
EventHandler.off(input, 'keydown'); disposeInput(input);
EventHandler.off(input, 'keyup');
Popover.dispose(popover) Popover.dispose(popover)
} }
} }

1
src/BootstrapBlazor/Locales/en.json
View File

@@ -34,6 +34,7 @@
"AutoScrollText": "AutoScroll" "AutoScrollText": "AutoScroll"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "Picker ...",
"DatePlaceHolder": "Select date", "DatePlaceHolder": "Select date",
"TimePlaceHolder": "Select time", "TimePlaceHolder": "Select time",
"DateTimePlaceHolderText": "Please select ...", "DateTimePlaceHolderText": "Please select ...",

1
src/BootstrapBlazor/Locales/zh.json
View File

@@ -34,6 +34,7 @@
"AutoScrollText": "自动滚屏" "AutoScrollText": "自动滚屏"
}, },
"BootstrapBlazor.Components.DateTimePicker": { "BootstrapBlazor.Components.DateTimePicker": {
"PickerButtonText": "选择",
"DatePlaceHolder": "选择日期", "DatePlaceHolder": "选择日期",
"TimePlaceHolder": "选择时间", "TimePlaceHolder": "选择时间",
"DateTimePlaceHolderText": "请选择日期时间", "DateTimePlaceHolderText": "请选择日期时间",

19
test/UnitTest/Components/DateTimePickerTest.cs
View File

@@ -388,6 +388,25 @@ public class DateTimePickerTest : BootstrapBlazorTestBase
pb.Add(a => a.TimeFormat, null); pb.Add(a => a.TimeFormat, null);
}); });
} }
[Fact]
public void IsButton_Ok()
{
var cut = Context.RenderComponent<DateTimePicker<DateTime>>(pb =>
{
pb.Add(a => a.IsButton, true);
pb.Add(a => a.ButtonColor, Color.Danger);
pb.Add(a => a.PickerButtonText, "Pick DateTime");
});
cut.Contains("btn dropdown-toggle btn-danger");
cut.SetParametersAndRender(pb =>
{
pb.Add(a => a.IsButton, false);
});
cut.DoesNotContain("btn dropdown-toggle btn-danger");
cut.Contains("dropdown-toggle form-control datetime-picker-input");
}
#endregion #endregion
#region DatePicker #region DatePicker