diff --git a/localization/de.json b/localization/de.json index f29d59fcae1..a2d35f37742 100644 --- a/localization/de.json +++ b/localization/de.json @@ -34,6 +34,7 @@ "AutoScrollText": "AutoScroll" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "wählen", "DatePlaceHolder": "Datum auswählen", "TimePlaceHolder": "Uhrzeit auswählen", "DateTimePlaceHolderText": "Bitte auswählen ...", diff --git a/localization/es.json b/localization/es.json index d6ecefd934c..9203ebcde0d 100644 --- a/localization/es.json +++ b/localization/es.json @@ -34,6 +34,7 @@ "AutoScrollText": "AutoScroll" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "Seleccione", "DatePlaceHolder": "Seleccione fecha", "TimePlaceHolder": "Seleccione hora", "DateTimePlaceHolderText": "Por favor seleccione ...", diff --git a/localization/it.json b/localization/it.json index 4a2ee6d9f10..cbf4086f62d 100644 --- a/localization/it.json +++ b/localization/it.json @@ -45,6 +45,7 @@ "AutoScrollText": "Scorrimento automatico" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "Seleziona", "DatePlaceHolder": "Seleziona la data", "TimePlaceHolder": "Seleziona l'ora", "DateTimePlaceHolderText": "Per favore seleziona ...", diff --git a/localization/pt.json b/localization/pt.json index 3ab31cbcfe4..7675e56ef63 100644 --- a/localization/pt.json +++ b/localization/pt.json @@ -34,6 +34,7 @@ "AutoScrollText": "Rolagem automática" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "Selecione", "DatePlaceHolder": "Selecione a data", "TimePlaceHolder": "Selecione o horário", "DateTimePlaceHolderText": "Por favor, selecione ...", diff --git a/localization/ru-RU.json b/localization/ru-RU.json index 68230e00ed2..07f553daedf 100644 --- a/localization/ru-RU.json +++ b/localization/ru-RU.json @@ -1,4 +1,4 @@ -{ +{ "BootstrapBlazor.Components.AutoComplete": { "NoDataTip": "Нет данных", "PlaceHolder": "Пожалуйста, введите" @@ -34,6 +34,7 @@ "AutoScrollText": "Автопрокрутка" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "Выберите", "DatePlaceHolder": "Выберите дату", "TimePlaceHolder": "Выберите время", "DateTimePlaceHolderText": "Пожалуйста, выберите ...", diff --git a/localization/th-TH.json b/localization/th-TH.json index f9323e03b2e..cd8994ff533 100644 --- a/localization/th-TH.json +++ b/localization/th-TH.json @@ -34,6 +34,7 @@ "AutoScrollText": "เลื่อนอัตโนมัติ" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "เลือก", "DatePlaceHolder": "เลือกวันที่", "TimePlaceHolder": "เลือกเวลา", "DateTimePlaceHolderText": "กรุณาเลือก ...", diff --git a/localization/uk-UA.json b/localization/uk-UA.json index 73c27db43fb..37bd061ca98 100644 --- a/localization/uk-UA.json +++ b/localization/uk-UA.json @@ -34,6 +34,7 @@ "AutoScrollText": "Автопрокрутка" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "Виберіть", "DatePlaceHolder": "Виберіть дату", "TimePlaceHolder": "Виберіть час", "DateTimePlaceHolderText": "Будь ласка, виберіть ...", diff --git a/localization/zh-TW.json b/localization/zh-TW.json index 5574290aa4c..ce76674fcf3 100644 --- a/localization/zh-TW.json +++ b/localization/zh-TW.json @@ -34,6 +34,7 @@ "AutoScrollText": "自動滾屏" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "選擇", "DatePlaceHolder": "選擇日期", "TimePlaceHolder": "選擇時間", "DateTimePlaceHolderText": "請選擇日期時間", diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor index 2f92e5742a4..828988d560d 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor @@ -5,221 +5,241 @@

@Localizer["Description"]

- - - - +
+
+ + + + +
+
+ + + + -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- 
builder.Services.AddBootstrapHolidayService();
-
-
- - -
- -

@((MarkupString)Localizer["FeatureIntro"].Value)

-
    -
  • @((MarkupString)Localizer["FeatureShowLunarIntro"].Value)
    • -
  • @((MarkupString)Localizer["FeatureShowSolarTermIntro"].Value)
    • -
  • @((MarkupString)Localizer["FeatureShowFestivalsIntro"].Value)
    • -
  • @((MarkupString)Localizer["FeatureShowHolidaysIntro"].Value)
    • -
-
@((MarkupString)Localizer["FeatureFestivalIntro"].Value)
- -
+
+ +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ +
+ 
builder.Services.AddBootstrapHolidayService();
+
+
+ + +
+ +

@((MarkupString)Localizer["FeatureIntro"].Value)

+
    +
  • @((MarkupString)Localizer["FeatureShowLunarIntro"].Value)
    • +
  • @((MarkupString)Localizer["FeatureShowSolarTermIntro"].Value)
    • +
  • @((MarkupString)Localizer["FeatureShowFestivalsIntro"].Value)
    • +
  • @((MarkupString)Localizer["FeatureShowHolidaysIntro"].Value)
    • +
+
@((MarkupString)Localizer["FeatureFestivalIntro"].Value)
+ +
- -
-
- -
-
- -
-
- + +
+
+ +
+
+ +
+
+ - + - + -
-
- -
-
- -
-
+
+
+ +
+
+ +
+
-
-
- -
-
+
+
+ +
+
-
@((MarkupString)Localizer["ViewModeTip"].Value)
-
-
- -
-
- -
-
- -
-
- -
-
+
@((MarkupString)Localizer["ViewModeTip"].Value)
+
+
+ +
+
+ +
+
+ +
+
+ +
+
-
@((MarkupString)Localizer["NullValueTip"].Value)
-
-
- -
-
- -
-
+
@((MarkupString)Localizer["NullValueTip"].Value)
+
+
+ +
+
+ +
+
-
- @((MarkupString)Localizer["ShowLabelTip"].Value) -
- +
+ @((MarkupString)Localizer["ShowLabelTip"].Value) +
+ -
-
- -
-
- -
-
+
+
+ +
+
+ +
+
- + - + -
- @((MarkupString)Localizer["BlockAutoCloseDesc"].Value) -
- +
+ @((MarkupString)Localizer["BlockAutoCloseDesc"].Value) +
+ -
-
- - - - -
-
- - - - -
-
- - - - - -
-
+
+
+ + + + +
+
+ + + + +
+
+ + + + + +
+
- - - - @context.Day - - - - + + + + @context.Day + + + + -
- - @((MarkupString)Localizer["DisableDayCallbackTip"].Value) - - -
-
- -
-
- -
-
- -
-
-
- - -
-
- - -
-
+
+ + @((MarkupString)Localizer["DisableDayCallbackTip"].Value) + + +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+
+ + +
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs index 2213d0f260e..0bafd2997be 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs @@ -95,6 +95,7 @@ private string BindValueString private bool _disableToday = true; private DateTime? _disabledNullValue = DateTime.Today; private DateTime _disabledValue = DateTime.Today; + private bool _isButton = false; private async Task> OnGetDisabledDaysCallback(DateTime start, DateTime end) { diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 67b04463a54..40137ee0570 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,11 +1,11 @@  - 9.11.5-beta04 + 9.11.5-beta05 - 10.0.0-rc.2.1.3 + 10.0.0-rc.2.1.4 diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index 32af2f35364..3cde0ba1564 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -8,12 +8,21 @@ }
- - @if (ShowIcon) + @if(IsButton) { - + + } + else + { + + @if (ShowIcon) + { + + } } .AddClass(ValidCss) .Build(); + private string? ButtonClassString => CssBuilder.Default("btn dropdown-toggle") + .AddClass($"btn-{ButtonColor.ToDescriptionString()}", ButtonColor != Color.None) + .Build(); + /// /// 获得 组件小图标样式 /// @@ -54,6 +58,24 @@ public partial class DateTimePicker /// private bool AllowNull { get; set; } + /// + /// 获得/设置 是否显示为按钮样式 默认 false + /// + [Parameter] + public bool IsButton { get; set; } + + /// + /// 获得/设置 选择按钮文本 默认 null 读取资源文件 + /// + [Parameter] + public string? PickerButtonText { get; set; } + + /// + /// 获得/设置 选择按钮颜色 默认 + /// + [Parameter] + public Color ButtonColor { get; set; } = Color.Primary; + /// /// 获得/设置 时间格式化字符串 默认值为 null /// @@ -292,6 +314,7 @@ protected override void OnParametersSet() DateTimeFormat ??= Localizer[nameof(DateTimeFormat)]; DateFormat ??= Localizer[nameof(DateFormat)]; TimeFormat ??= Localizer[nameof(TimeFormat)]; + PickerButtonText ??= Localizer[nameof(PickerButtonText)]; Icon ??= IconTheme.GetIconByKey(ComponentIcons.DateTimePickerIcon); @@ -371,6 +394,29 @@ protected override async Task OnParametersSetAsync() /// protected override bool ShouldRender() => _render; + private bool _isButton = false; + /// + /// + /// + /// + /// + 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); + } + } + /// /// 格式化数值方法 /// diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js index b4977704f59..30afd7ecdb9 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js @@ -8,6 +8,12 @@ export function init(id, invoke, options) { 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, { dropdownSelector: el.getAttribute('data-bb-dropdown'), isDisabled: () => { @@ -19,27 +25,47 @@ export function init(id, invoke, options) { } } }); + return popover; +} + +const handlerInput = (el, popover) => { const input = el.querySelector('.datetime-picker-input'); - const dateTimePicker = { - input, - popover + if (input) { + EventHandler.on(input, 'keydown', e => { + if (e.key === 'Tab' && popover.isShown()) { + popover.hide(); + } + }); + EventHandler.on(input, 'keyup', e => { + if (e.key === 'Escape') { + popover.hide(); + input.blur(); + } + else if (e.key === 'Tab') { + popover.show(); + } + }); } - Data.set(id, dateTimePicker); + return input; +} - EventHandler.on(input, 'keydown', e => { - if (e.key === 'Tab' && popover.isShown()) { - popover.hide(); - } - }); - EventHandler.on(input, 'keyup', e => { - if (e.key === 'Escape') { - popover.hide(); - input.blur(); - } - else if (e.key === 'Tab') { - popover.show(); - } - }); +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) { @@ -55,8 +81,7 @@ export function dispose(id) { if (data) { const { input, popover } = data; - EventHandler.off(input, 'keydown'); - EventHandler.off(input, 'keyup'); + disposeInput(input); Popover.dispose(popover) } } diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json index e7791af9287..61dab3f09ff 100644 --- a/src/BootstrapBlazor/Locales/en.json +++ b/src/BootstrapBlazor/Locales/en.json @@ -34,6 +34,7 @@ "AutoScrollText": "AutoScroll" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "Picker ...", "DatePlaceHolder": "Select date", "TimePlaceHolder": "Select time", "DateTimePlaceHolderText": "Please select ...", diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json index 84c2a3b821f..d2fee6af068 100644 --- a/src/BootstrapBlazor/Locales/zh.json +++ b/src/BootstrapBlazor/Locales/zh.json @@ -34,6 +34,7 @@ "AutoScrollText": "自动滚屏" }, "BootstrapBlazor.Components.DateTimePicker": { + "PickerButtonText": "选择", "DatePlaceHolder": "选择日期", "TimePlaceHolder": "选择时间", "DateTimePlaceHolderText": "请选择日期时间", diff --git a/test/UnitTest/Components/DateTimePickerTest.cs b/test/UnitTest/Components/DateTimePickerTest.cs index 1cd102d62d8..582a3926dbb 100644 --- a/test/UnitTest/Components/DateTimePickerTest.cs +++ b/test/UnitTest/Components/DateTimePickerTest.cs @@ -388,6 +388,25 @@ public async Task PickTimeMode_Ok() pb.Add(a => a.TimeFormat, null); }); } + + [Fact] + public void IsButton_Ok() + { + var cut = Context.RenderComponent>(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 #region DatePicker