diff --git a/components/date-picker/AntDatePicker.Razor.cs b/components/date-picker/AntDatePicker.Razor.cs index 8a36761b4..4399fa3b5 100644 --- a/components/date-picker/AntDatePicker.Razor.cs +++ b/components/date-picker/AntDatePicker.Razor.cs @@ -31,6 +31,9 @@ namespace AntBlazor } } + [Parameter] + public string PopupContainerSelector { get; set; } + [Parameter] public bool Disabled { get; set; } = false; @@ -41,8 +44,7 @@ namespace AntBlazor public bool AutoFocus { get; set; } = false; [Parameter] - public bool Open { get; set; } = false; - + public bool Open { get; set; } [Parameter] public bool InputReadOnly { get; set; } = false; @@ -264,6 +266,7 @@ namespace AntBlazor private AntDatePickerInput _inputStart; private AntDatePickerInput _inputEnd; + private AntDropdown _dropDown; private string _activeBarStyle = ""; @@ -344,21 +347,15 @@ namespace AntBlazor protected string GetInputValue(int index = 0) { - DateTime value; + DateTime? tryGetValue = GetIndexValue(index); - if (_pickerStatus[index]._hadSelectValue) - { - value = _values[index]; - } - else if (_defaultValues[index] != null) - { - value = (DateTime)_defaultValues[index]; - } - else + if (tryGetValue == null) { return ""; } + DateTime value = (DateTime)tryGetValue; + if (!string.IsNullOrEmpty(Format)) { // TODO：Locale @@ -380,36 +377,16 @@ namespace AntBlazor return value.ToString(formater, CultureInfo.CurrentCulture); } - protected void TryOpen() + private void ChangeFocusTarget(bool inputStartFocus, bool inputEndFocus) { - if (!_isClose) + if (!IsRange) { return; } - _isClose = !_isClose; - - AutoFocus = !_isClose; - - _needRefresh = !_isClose; - - OnOpenChange.InvokeAsync(!_isClose); - - StateHasChanged(); - } - - protected void TryClose() - { - if (_isClose) - { - return; - } - - AutoFocus = false; - _isClose = true; _needRefresh = true; - - StateHasChanged(); + _inputStart.IsOnFocused = inputStartFocus; + _inputEnd.IsOnFocused = inputEndFocus; } protected async Task OnSelect(DateTime date) @@ -497,7 +474,7 @@ namespace AntBlazor public void Close() { - TryClose(); + _dropDown.Hide(); } public void ChangeValue(DateTime date, int index = 0) @@ -591,9 +568,20 @@ namespace AntBlazor /// /// /// - public DateTime GetIndexValue(int index) + public DateTime? GetIndexValue(int index) { - return _values[index]; + if (_pickerStatus[index]._hadSelectValue) + { + return _values[index]; + } + else if (_defaultValues[index] != null) + { + return (DateTime)_defaultValues[index]; + } + else + { + return null; + } } public void ChangePickerValue(DateTime date, int index = 0) diff --git a/components/date-picker/AntDatePicker.razor b/components/date-picker/AntDatePicker.razor index 56da10f10..916ef95c4 100644 --- a/components/date-picker/AntDatePicker.razor +++ b/components/date-picker/AntDatePicker.razor @@ -2,72 +2,76 @@ @inherits AntDomComponentBase @using AntBlazor.Internal; -
- @if (IsRange) - { - + + + +
+ @if (IsRange) + { +
+
+ +
+
+ +
+
+ } + else + { +
+ +
+ } +
+ + +
+ -
+ @if (IsRange) + { +
- + -
- } - else - { - - } -
+
+ } +
+ + + - \ No newline at end of file + +*@ \ No newline at end of file diff --git a/components/date-picker/internal/AntDatePickerDatetimePanel.razor b/components/date-picker/internal/AntDatePickerDatetimePanel.razor index 4fa68049a..62d5d90e3 100644 --- a/components/date-picker/internal/AntDatePickerDatetimePanel.razor +++ b/components/date-picker/internal/AntDatePickerDatetimePanel.razor @@ -12,124 +12,124 @@ DateTime startDate = monthFirstDayDate.AddDays(diffDay); } -
- @if (DatePicker.IsShowTime) +
+ @if (DatePicker.IsShowTime) + { + + + + + + + 一 + 二 + 三 + 四 + 五 + 六 + 日 + + + + @currentColDate.Day + + + } + + @{ + var startTime = new DateTime(2020, 1, 1, 0, 0, 0); + var timeFormat = DatePicker.ShowTimeFormat; + + if (Picker == AntDatePickerType.Time && !string.IsNullOrEmpty(DatePicker.Format)) { - - - - - - - 一 - 二 - 三 - 四 - 五 - 六 - 日 - - - - @currentColDate.Day - - + timeFormat = DatePicker.Format; } - @{ - var startTime = new DateTime(2020, 1, 1, 0, 0, 0); - var timeFormat = DatePicker.ShowTimeFormat; - - if (Picker == AntDatePickerType.Time && !string.IsNullOrEmpty(DatePicker.Format)) - { - timeFormat = DatePicker.Format; - } - - AntDatePickerDisabledTime disabledTime = GetDisabledTime(); - } -
-
-
- @PickerValue.ToString(timeFormat)
-
-
-
- @if (timeFormat.ToLower().Contains("hh")) - { -
    - @for (int hour = 0; hour < 24; hour++) - { - var viewTime = startTime; - bool disabled = disabledTime._disabledHours.Contains(hour); - string isSelectedCls = viewTime.Hour == Value.Hour ? $"{DatePicker.PrefixCls}-time-panel-cell-selected" : ""; - string disabledCls = disabled ? $"{DatePicker.PrefixCls}-time-panel-cell-disabled" : ""; - -
  • -
    - @hour -
    -
    • - - startTime = startTime.AddHours(1); - } -
- } - @if (timeFormat.ToLower().Contains("mm")) - { -
    - @for (int minute = 0; minute < 60; minute++) - { - var viewTime = startTime; - bool disabled = disabledTime._disabledMinutes.Contains(minute); - string isSelectedCls = viewTime.Minute == Value.Minute ? $"{DatePicker.PrefixCls}-time-panel-cell-selected" : ""; - string disabledCls = disabled ? $"{DatePicker.PrefixCls}-time-panel-cell-disabled" : ""; - -
  • -
    - @minute -
    -
    • - - startTime = startTime.AddMinutes(1); - } -
- } - @if (timeFormat.ToLower().Contains("ss")) - { -
    - @for (int second = 0; second < 60; second++) - { - var viewTime = startTime; - bool disabled = disabledTime._disabledSeconds.Contains(second); - string isSelectedCls = viewTime.Second == Value.Second ? $"{DatePicker.PrefixCls}-time-panel-cell-selected" : ""; - string disabledCls = disabled ? $"{DatePicker.PrefixCls}-time-panel-cell-disabled" : ""; - -
  • -
    - @second -
    -
    • - - startTime = startTime.AddSeconds(1); - } -
- } + AntDatePickerDisabledTime disabledTime = GetDisabledTime(); + } +
+
+
+ @Value.ToString(timeFormat)
+
+ @if (timeFormat.ToLower().Contains("hh")) + { +
    + @for (int hour = 0; hour < 24; hour++) + { + var viewTime = startTime; + bool disabled = disabledTime._disabledHours.Contains(hour); + string isSelectedCls = viewTime.Hour == Value.Hour ? $"{DatePicker.PrefixCls}-time-panel-cell-selected" : ""; + string disabledCls = disabled ? $"{DatePicker.PrefixCls}-time-panel-cell-disabled" : ""; + +
  • +
    + @hour +
    +
    • + + startTime = startTime.AddHours(1); + } +
+ } + @if (timeFormat.ToLower().Contains("mm")) + { +
    + @for (int minute = 0; minute < 60; minute++) + { + var viewTime = startTime; + bool disabled = disabledTime._disabledMinutes.Contains(minute); + string isSelectedCls = viewTime.Minute == Value.Minute ? $"{DatePicker.PrefixCls}-time-panel-cell-selected" : ""; + string disabledCls = disabled ? $"{DatePicker.PrefixCls}-time-panel-cell-disabled" : ""; + +
  • +
    + @minute +
    +
    • + + startTime = startTime.AddMinutes(1); + } +
+ } + @if (timeFormat.ToLower().Contains("ss")) + { +
    + @for (int second = 0; second < 60; second++) + { + var viewTime = startTime; + bool disabled = disabledTime._disabledSeconds.Contains(second); + string isSelectedCls = viewTime.Second == Value.Second ? $"{DatePicker.PrefixCls}-time-panel-cell-selected" : ""; + string disabledCls = disabled ? $"{DatePicker.PrefixCls}-time-panel-cell-disabled" : ""; + +
  • +
    + @second +
    +
    • + + startTime = startTime.AddSeconds(1); + } +
+ } +
+
@if (DatePicker.RenderExtraFooter != null) { diff --git a/components/date-picker/internal/AntDatePickerPanelBase.cs b/components/date-picker/internal/AntDatePickerPanelBase.cs index dfbd8c98e..ab148b692 100644 --- a/components/date-picker/internal/AntDatePickerPanelBase.cs +++ b/components/date-picker/internal/AntDatePickerPanelBase.cs @@ -115,7 +115,7 @@ namespace AntBlazor protected DateTime PickerValue { get => DatePicker.GetIndexPickerValue(PickerIndex); } - protected DateTime Value { get => DatePicker.GetIndexValue(PickerIndex); } + protected DateTime Value { get => DatePicker.GetIndexValue(PickerIndex) ?? DateTime.Now; } public void PopUpPicker(string type) { diff --git a/components/dropdown/AntDropdown.razor.cs b/components/dropdown/AntDropdown.razor.cs index 61279e838..d699abb31 100644 --- a/components/dropdown/AntDropdown.razor.cs +++ b/components/dropdown/AntDropdown.razor.cs @@ -215,5 +215,15 @@ namespace AntBlazor return false; } + + public async Task Show() + { + await _antDropdownOverlay.Show(); + } + + public async Task Hide() + { + await _antDropdownOverlay.Hide(); + } } } diff --git a/components/dropdown/internal/AntDropdownOverlay.razor b/components/dropdown/internal/AntDropdownOverlay.razor index 5a20a7baf..f2484ef7c 100644 --- a/components/dropdown/internal/AntDropdownOverlay.razor +++ b/components/dropdown/internal/AntDropdownOverlay.razor @@ -4,10 +4,10 @@ @if (_hasAddOverlayToBody == true || _isWaitForOverlayFirstRender) { - string display = Dropdown.Visible ? "" : "visibility: hidden;"; + string display = _isOverlayShow ? "" : "visibility: hidden;"; string overlayCls; - if (!Dropdown.Visible && !_isWaitForOverlayFirstRender) + if (!_isOverlayShow && !_isWaitForOverlayFirstRender) { overlayCls = $"{Dropdown.PrefixCls}-hidden"; display = ""; diff --git a/components/dropdown/internal/AntDropdownOverlay.razor.cs b/components/dropdown/internal/AntDropdownOverlay.razor.cs index 5b951d46c..23391f6ee 100644 --- a/components/dropdown/internal/AntDropdownOverlay.razor.cs +++ b/components/dropdown/internal/AntDropdownOverlay.razor.cs @@ -23,6 +23,9 @@ namespace AntBlazor.Internal private bool _isOverlayFirstRender = true; private bool _isWaitForOverlayFirstRender = false; + private bool _preVisible = false; + private bool _isOverlayShow = false; + private int? _overlayLeft = null; private int? _overlayTop = null; @@ -31,6 +34,21 @@ namespace AntBlazor.Internal private const int OVERLAY_TOP_OFFSET = 4; + protected override async Task OnParametersSetAsync() + { + if (!_isOverlayShow && Dropdown.Visible && !_preVisible) + { + await Show(_overlayLeft, _overlayTop); + } + else if (_isOverlayShow && !Dropdown.Visible && _preVisible) + { + await Hide(); + } + + _preVisible = Dropdown.Visible; + await base.OnParametersSetAsync(); + } + protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) @@ -41,29 +59,18 @@ namespace AntBlazor.Internal { await JsInvokeAsync(JSInteropConstants.addClsToFirstChild, Ref, $"disabled"); } - - if (Dropdown.Visible) - { - await Show(_overlayLeft, _overlayTop); - - _overlayLeft = null; - _overlayTop = null; - } } - else + + if (_isWaitForOverlayFirstRender && _isOverlayFirstRender) { - if (_isWaitForOverlayFirstRender && _isOverlayFirstRender) - { - _isOverlayFirstRender = false; + _isOverlayFirstRender = false; - await Show(_overlayLeft, _overlayTop); + await Show(_overlayLeft, _overlayTop); - _isWaitForOverlayFirstRender = false; - _overlayLeft = null; - _overlayTop = null; - } + _isWaitForOverlayFirstRender = false; + _overlayLeft = null; + _overlayTop = null; } - await base.OnAfterRenderAsync(firstRender); } @@ -86,7 +93,7 @@ namespace AntBlazor.Internal public async Task Show(int? overlayLeft = null, int? overlayTop = null) { - if (Dropdown.Visible || Dropdown.Disabled) + if (_isOverlayShow || Dropdown.Disabled) { return; } @@ -102,7 +109,7 @@ namespace AntBlazor.Internal return; } - Dropdown.Visible = true; + _isOverlayShow = true; await AddOverlayToBody(); @@ -124,7 +131,7 @@ namespace AntBlazor.Internal public async Task Hide(bool force = false) { - if (!Dropdown.Visible) + if (!_isOverlayShow) { return; } @@ -147,7 +154,7 @@ namespace AntBlazor.Internal // wait for leave animation await Task.Delay(200); - Dropdown.Visible = false; + _isOverlayShow = false; StateHasChanged(); } @@ -159,7 +166,7 @@ namespace AntBlazor.Internal public bool IsPopup() { - return Dropdown.Visible; + return _isOverlayShow; } private async Task AddOverlayToBody() diff --git a/site/AntBlazor.Docs/Pages/DatePicker.razor b/site/AntBlazor.Docs/Pages/DatePicker.razor index cba4420d3..667afacc7 100644 --- a/site/AntBlazor.Docs/Pages/DatePicker.razor +++ b/site/AntBlazor.Docs/Pages/DatePicker.razor @@ -5,68 +5,68 @@

演示


- + 基本 最简单的用法，在浮层中可以选择或者输入日期。 -
-
-
-
-
+
+
+
+
+
- + 范围选择器 通过设置 Picker 属性，指定范围选择器类型。 -
-
-
-
-
+
+
+
+
+
- + 禁用 选择框的不可用状态。你也可以通过数组单独禁用 RangePicker 的其中一项。 -
+

- + 日期格式 使用 Format 可以自定义日期显示格式。 -
-
+
+
- + 日期时间选择 增加选择时间功能，当 ShowTime 为一个对象时，其属性会传递给内建的 TimePicker。 -
-
+
+
- + 不可选择日期和时间 可用 DisabledDate 和 DisabledTime 分别禁止选择部分日期和时间，其中 DisabledTime 需要和 ShowTime 一起使用。 -
-
-
- @@ -83,11 +83,11 @@ return new AntDatePickerDisabledTime(timeRange[4..15], timeRange[20..55], timeRange[3..19]); } } - + 定制日期单元格 使用 DateRender 可以自定义日期单元格的内容和样式。 -
+
@code{ @@ -96,22 +96,22 @@ if (currentViewDate.Day == 2) { return@二; + } + return @@(currentViewDate.Day); + }; } -return @@(currentViewDate.Day); -}; -} - + 额外的页脚 在浮层中加入额外的页脚，以满足某些定制信息的需求。 -
-
+
+
@code { private RenderFragment extraFooter =@ExtraFooter; } - + 三种大小 三种大小的输入框，若不设置，则为 Default。 @@ -121,21 +121,21 @@ return @@(currentViewDate.Day); Small
-
+
@code { private string datePickerSize = AntDatePickerSize.Default; } - + 无边框 无边框样式。 -
-
-
-
-
+
+
+
+
+
@@ -144,7 +144,7 @@ return @@(currentViewDate.Day);
  • 已实现DatePicker组件：支持date、decade、year、month、quarter、week模式
  • 已实现：MonthPicker、RangePicker、WeekPicker、YearPicker、QuarterPicker（对应DatePicker的各种模式）
  • - 未实现的通用属性：AllowClear、GetPopupContainer、Locale、Mode(Mode为3.0妥协的功能，不打算支持) + 未实现的通用属性：AllowClear、Locale、Mode(Mode为3.0妥协的功能，不打算支持)
  • 未实现的DatePicker属性：showTime.defaultValue、onOk