antdesignblazor
/
ant-design-blazor
зеркало из https://github.com/ant-design-blazor/ant-design-blazor.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

fix: datepicker issue #94 (#101) 

* fix(module: dropdown): fix bug of default show

* fix(module: datepicker): #94

Co-authored-by: 钟迪龙 <mutouzdl@hotmail.com>
This commit is contained in:
笨木头 2020-05-10 17:33:09 +08:00 коммит произвёл GitHub
Родитель 9351a35072
Коммит ab58b3b429
8 изменённых файлов: 291 добавлений и 282 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

66
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
/// </summary>
/// <param name="index"></param>
/// <returns></returns>
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)

130
components/date-picker/AntDatePicker.razor
Просмотреть файл

@ -2,72 +2,76 @@
@inherits AntDomComponentBase
@using AntBlazor.Internal;
<div class="@ClassMapper.Class"
@ref="@Ref"
style="@Style"
Id="@Id">
@if (IsRange)
{
<AntDatePickerInput @ref="_inputStart"
PrefixCls="@PrefixCls"
Size="@Size"
Disabled="@Disabled"
Value="@GetInputValue(0)"
Placeholder="@_placeholders[0]"
ReadOnly="@InputReadOnly"
Onclick="e => { _needRefresh = true; TryOpen(); _inputStart.IsOnFocused = true; _inputEnd.IsOnFocused = false; }"
ShowSuffixIcon="@false" />
<CascadingValue Value='$"{PrefixCls}-dropdown"' Name="PrefixCls">
<AntDropdown @ref="_dropDown"
Visible="Open"
Disabled="Disabled"
PopupContainerSelector="@PopupContainerSelector"
OnVisibleChange="visible => AutoFocus = visible"
Trigger="new AntDropdownTrigger[] { AntDropdownTrigger.Click }">
<Overlay>
<div class="@(PrefixCls)-panel-container">
@if (IsRange)
{
<div class="@(PrefixCls)-panels">
<div class="@(PrefixCls)-panel">
<AntDatePickerPanelChooser DatePicker="@this" PickerIndex="0" OnSelect="async (date, index) => await OnSelect(date)" />
</div>
<div class="@(PrefixCls)-panel">
<AntDatePickerPanelChooser DatePicker="@this" PickerIndex="1" OnSelect="async (date, index) => await OnSelect(date)" />
</div>
</div>
}
else
{
<div class="@(PrefixCls)-panel">
<AntDatePickerPanelChooser DatePicker="@this" OnSelect="async (date, index) => await OnSelect(date)" />
</div>
}
</div>
</Overlay>
<ChildContent>
<div class="@ClassMapper.Class"
@ref="@Ref"
style="@Style"
Id="@Id">
<AntDatePickerInput @ref="_inputStart"
PrefixCls="@PrefixCls"
Size="@Size"
Disabled="@Disabled"
Value="@GetInputValue(0)"
Placeholder="@_placeholders[0]"
ReadOnly="@InputReadOnly"
AutoFocus="@AutoFocus"
Onclick="e => { ChangeFocusTarget(true, false); }"
OnInput="e => OnInput(e, 0)"
ShowTime="@(Picker == AntDatePickerType.Time)" />
<div class="@(PrefixCls)-range-separator"><span aria-label="to" class="@(PrefixCls)-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg viewBox="0 0 1024 1024" focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
@if (IsRange)
{
<div class="@(PrefixCls)-range-separator"><span aria-label="to" class="@(PrefixCls)-separator"><span role="img" aria-label="swap-right" class="anticon anticon-swap-right"><svg viewBox="0 0 1024 1024" focusable="false" class="" data-icon="swap-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path></svg></span></span></div>
<AntDatePickerInput @ref="_inputEnd"
PrefixCls="@PrefixCls"
Size="@Size"
Disabled="@Disabled"
Value="@GetInputValue(1)"
Placeholder="@_placeholders[1]"
ReadOnly="@InputReadOnly"
ShowTime="@(Picker == AntDatePickerType.Time)"
Onclick="e => { _needRefresh = true; TryOpen(); _inputStart.IsOnFocused = false; _inputEnd.IsOnFocused = true; }" />
<AntDatePickerInput @ref="_inputEnd"
PrefixCls="@PrefixCls"
Size="@Size"
Disabled="@Disabled"
Value="@GetInputValue(1)"
Placeholder="@_placeholders[1]"
ReadOnly="@InputReadOnly"
AutoFocus="@AutoFocus"
Onclick="e => { ChangeFocusTarget(false, true); }"
OnInput="e => OnInput(e, 0)"
ShowTime="@(Picker == AntDatePickerType.Time)" />
<div class="@(PrefixCls)-active-bar" style="@_activeBarStyle"></div>
}
else
{
<AntDatePickerInput @ref="_inputStart"
PrefixCls="@PrefixCls"
Size="@Size"
Disabled="@Disabled"
Value="@GetInputValue(0)"
Placeholder="@_placeholders[0]"
ReadOnly="@InputReadOnly"
AutoFocus="@AutoFocus"
OnInput="e => OnInput(e, 0)"
ShowTime="@(Picker == AntDatePickerType.Time)"
Onclick="e => TryOpen()" />
}
</div>
<div class="@(PrefixCls)-active-bar" style="@_activeBarStyle"></div>
}
</div>
</ChildContent>
</AntDropdown>
</CascadingValue>
<div class="@(PrefixCls)-dropdown @(DropdownClassName) @(PrefixCls)-dropdown-placement-bottomLeft"
@*<div class="@(PrefixCls)-dropdown @(DropdownClassName) @(PrefixCls)-dropdown-placement-bottomLeft"
style="@PopupStyle"
hidden="@(!Open && _isClose)">
<div class="@(PrefixCls)-panel-container">
@if (IsRange)
{
<div class="@(PrefixCls)-panels">
<div class="@(PrefixCls)-panel">
<AntDatePickerPanelChooser DatePicker="@this" PickerIndex="0" OnSelect="async (date, index) => await OnSelect(date)" />
</div>
<div class="@(PrefixCls)-panel">
<AntDatePickerPanelChooser DatePicker="@this" PickerIndex="1" OnSelect="async (date, index) => await OnSelect(date)" />
</div>
</div>
}
else
{
<div class="@(PrefixCls)-panel">
<AntDatePickerPanelChooser DatePicker="@this" OnSelect="async (date, index) => await OnSelect(date)" />
</div>
}
</div>
</div>
</div>*@

224
components/date-picker/internal/AntDatePickerDatetimePanel.razor
Просмотреть файл

@ -12,124 +12,124 @@
DateTime startDate = monthFirstDayDate.AddDays(diffDay);
}
<div class='@(DatePicker.IsShowTime || Picker == AntDatePickerType.Time ? $"{DatePicker.PrefixCls}-datetime-panel" : "")'>
@if (DatePicker.IsShowTime)
<div class='@(DatePicker.IsShowTime || Picker == AntDatePickerType.Time ? $"{DatePicker.PrefixCls}-datetime-panel" : "")'>
@if (DatePicker.IsShowTime)
{
<AntDatePickerTemplate PickerIndex="@PickerIndex"
MaxRow="6"
MaxCol="7"
ViewStartDate="startDate"
ShowFooter="@DatePicker.ShowToday"
IsInView="date => DateHelper.IsSameMonth(date, PickerValue)"
IsToday="date => DateHelper.IsSameDay(date, DatePicker.CurrentDate)"
IsSelected="date => DateHelper.IsSameDay(date, Value)"
GetColTitle='date => date.ToString("yyyy-MM-dd")'
OnValueSelect="OnSelectDate"
GetNextColValue="date => date.AddDays(1)">
<RenderPickerHeader>
<AntDatePickerHeader PickerIndex="@PickerIndex" />
</RenderPickerHeader>
<RenderTableHeader>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
<th>日</th>
</tr>
</RenderTableHeader>
<RenderColValue Context="currentColDate">
@currentColDate.Day
</RenderColValue>
</AntDatePickerTemplate>
}
@{
var startTime = new DateTime(2020, 1, 1, 0, 0, 0);
var timeFormat = DatePicker.ShowTimeFormat;
if (Picker == AntDatePickerType.Time && !string.IsNullOrEmpty(DatePicker.Format))
{
<AntDatePickerTemplate PickerIndex="@PickerIndex"
MaxRow="6"
MaxCol="7"
ViewStartDate="startDate"
ShowFooter="@DatePicker.ShowToday"
IsInView="date => DateHelper.IsSameMonth(date, PickerValue)"
IsToday="date => DateHelper.IsSameDay(date, DatePicker.CurrentDate)"
IsSelected="date => DateHelper.IsSameDay(date, Value)"
GetColTitle='date => date.ToString("yyyy-MM-dd")'
OnValueSelect="OnSelectDate"
GetNextColValue="date => date.AddDays(1)">
<RenderPickerHeader>
<AntDatePickerHeader PickerIndex="@PickerIndex" />
</RenderPickerHeader>
<RenderTableHeader>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
<th>日</th>
</tr>
</RenderTableHeader>
<RenderColValue Context="currentColDate">
@currentColDate.Day
</RenderColValue>
</AntDatePickerTemplate>
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();
}
<div class="@(DatePicker.PrefixCls)-time-panel">
<div class="@(DatePicker.PrefixCls)-header">
<div class="@(DatePicker.PrefixCls)-header-view">
@PickerValue.ToString(timeFormat) <br />
</div>
</div>
<div class="@(DatePicker.PrefixCls)-content">
@if (timeFormat.ToLower().Contains("hh"))
{
<ul class="@(DatePicker.PrefixCls)-time-panel-column" style="position: relative;">
@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" : "";
<li class="@(DatePicker.PrefixCls)-time-panel-cell @isSelectedCls @disabledCls">
<div class="@(DatePicker.PrefixCls)-time-panel-cell-inner"
@onclick="e => { if (!disabled) OnSelectHour(viewTime); }">
@hour
</div>
</li>
startTime = startTime.AddHours(1);
}
</ul>
}
@if (timeFormat.ToLower().Contains("mm"))
{
<ul class="@(DatePicker.PrefixCls)-time-panel-column" style="position: relative;">
@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" : "";
<li class="@(DatePicker.PrefixCls)-time-panel-cell @isSelectedCls @disabledCls">
<div class="@(DatePicker.PrefixCls)-time-panel-cell-inner"
@onclick="e => { if (!disabled) OnSelectMinute(viewTime); }">
@minute
</div>
</li>
startTime = startTime.AddMinutes(1);
}
</ul>
}
@if (timeFormat.ToLower().Contains("ss"))
{
<ul class="@(DatePicker.PrefixCls)-time-panel-column" style="position: relative;">
@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" : "";
<li class="@(DatePicker.PrefixCls)-time-panel-cell @isSelectedCls @disabledCls">
<div class="@(DatePicker.PrefixCls)-time-panel-cell-inner"
@onclick="e => { if (!disabled) OnSelectSecond(viewTime); }">
@second
</div>
</li>
startTime = startTime.AddSeconds(1);
}
</ul>
}
AntDatePickerDisabledTime disabledTime = GetDisabledTime();
}
<div class="@(DatePicker.PrefixCls)-time-panel">
<div class="@(DatePicker.PrefixCls)-header">
<div class="@(DatePicker.PrefixCls)-header-view">
@Value.ToString(timeFormat) <br />
</div>
</div>
<div class="@(DatePicker.PrefixCls)-content">
@if (timeFormat.ToLower().Contains("hh"))
{
<ul class="@(DatePicker.PrefixCls)-time-panel-column" style="position: relative;">
@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" : "";
<li class="@(DatePicker.PrefixCls)-time-panel-cell @isSelectedCls @disabledCls">
<div class="@(DatePicker.PrefixCls)-time-panel-cell-inner"
@onclick="e => { if (!disabled) OnSelectHour(viewTime); }">
@hour
</div>
</li>
startTime = startTime.AddHours(1);
}
</ul>
}
@if (timeFormat.ToLower().Contains("mm"))
{
<ul class="@(DatePicker.PrefixCls)-time-panel-column" style="position: relative;">
@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" : "";
<li class="@(DatePicker.PrefixCls)-time-panel-cell @isSelectedCls @disabledCls">
<div class="@(DatePicker.PrefixCls)-time-panel-cell-inner"
@onclick="e => { if (!disabled) OnSelectMinute(viewTime); }">
@minute
</div>
</li>
startTime = startTime.AddMinutes(1);
}
</ul>
}
@if (timeFormat.ToLower().Contains("ss"))
{
<ul class="@(DatePicker.PrefixCls)-time-panel-column" style="position: relative;">
@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" : "";
<li class="@(DatePicker.PrefixCls)-time-panel-cell @isSelectedCls @disabledCls">
<div class="@(DatePicker.PrefixCls)-time-panel-cell-inner"
@onclick="e => { if (!disabled) OnSelectSecond(viewTime); }">
@second
</div>
</li>
startTime = startTime.AddSeconds(1);
}
</ul>
}
</div>
</div>
</div>
@if (DatePicker.RenderExtraFooter != null)
{

2
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)
{

10
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();
}
}
}

4
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 = "";

53
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()

84
site/AntBlazor.Docs/Pages/DatePicker.razor
Просмотреть файл

@ -5,68 +5,68 @@
<br />
<h2>演示</h2>
<br />
<DemoCard>
<DemoCard id="1">
<Title>基本</Title>
<Description>最简单的用法，在浮层中可以选择或者输入日期。</Description>
<Demo>
<AntDatePicker Picker="@AntDatePickerType.Date" /> <br />
<AntDatePicker Picker="@AntDatePickerType.Week" /> <br />
<AntDatePicker Picker="@AntDatePickerType.Month" /> <br />
<AntDatePicker Picker="@AntDatePickerType.Quarter" /> <br />
<AntDatePicker Picker="@AntDatePickerType.Year" /> <br />
<AntDatePicker PopupContainerSelector="#components-1" Picker="@AntDatePickerType.Date" /> <br />
<AntDatePicker PopupContainerSelector="#components-1" Picker="@AntDatePickerType.Week" /> <br />
<AntDatePicker PopupContainerSelector="#components-1" Picker="@AntDatePickerType.Month" /> <br />
<AntDatePicker PopupContainerSelector="#components-1" Picker="@AntDatePickerType.Quarter" /> <br />
<AntDatePicker PopupContainerSelector="#components-1" Picker="@AntDatePickerType.Year" /> <br />
</Demo>
</DemoCard>
<DemoCard>
<DemoCard id="2">
<Title>范围选择器</Title>
<Description>通过设置 <AntText Code>Picker</AntText> 属性，指定范围选择器类型。</Description>
<Demo>
<AntRangePicker Picker="@AntDatePickerType.Date" /> <br />
<AntRangePicker Picker="@AntDatePickerType.Week" /> <br />
<AntRangePicker Picker="@AntDatePickerType.Month" /> <br />
<AntRangePicker Picker="@AntDatePickerType.Quarter" /> <br />
<AntRangePicker Picker="@AntDatePickerType.Year" /> <br />
<AntRangePicker PopupContainerSelector="#components-2" Picker="@AntDatePickerType.Date" /> <br />
<AntRangePicker PopupContainerSelector="#components-2" Picker="@AntDatePickerType.Week" /> <br />
<AntRangePicker PopupContainerSelector="#components-2" Picker="@AntDatePickerType.Month" /> <br />
<AntRangePicker PopupContainerSelector="#components-2" Picker="@AntDatePickerType.Quarter" /> <br />
<AntRangePicker PopupContainerSelector="#components-2" Picker="@AntDatePickerType.Year" /> <br />
</Demo>
</DemoCard>
<DemoCard>
<DemoCard id="3">
<Title>禁用</Title>
<Description>选择框的不可用状态。你也可以通过数组单独禁用 RangePicker 的其中一项。</Description>
<Demo>
<AntDatePicker Disabled="@true" Picker="@AntDatePickerType.Date" /> <br />
<AntDatePicker PopupContainerSelector="#components-3" Disabled="@true" Picker="@AntDatePickerType.Date" /> <br />
<br />
</Demo>
</DemoCard>
<DemoCard>
<DemoCard id="4">
<Title>日期格式</Title>
<Description>使用 <AntText Code>Format</AntText> 可以自定义日期显示格式。</Description>
<Demo>
<AntDatePicker DefaultValue="new DateTime(2015, 1, 1)" Picker="@AntDatePickerType.Date" Format="yyyy/MM/dd" /> <br />
<AntDatePicker DefaultValue="new DateTime(2015, 1, 1)" Picker="@AntDatePickerType.Date" Format="yyyy/MM" /> <br />
<AntDatePicker PopupContainerSelector="#components-4" DefaultValue="new DateTime(2015, 1, 1)" Picker="@AntDatePickerType.Date" Format="yyyy/MM/dd" /> <br />
<AntDatePicker PopupContainerSelector="#components-4" DefaultValue="new DateTime(2015, 1, 1)" Picker="@AntDatePickerType.Date" Format="yyyy/MM" /> <br />
</Demo>
</DemoCard>
<DemoCard>
<DemoCard id="5">
<Title>日期时间选择</Title>
<Description>增加选择时间功能，当 <AntText Code>ShowTime</AntText> 为一个对象时，其属性会传递给内建的 <AntText Code>TimePicker</AntText>。</Description>
<Demo>
<AntDatePicker Picker="@AntDatePickerType.Date" ShowTime="@true" /> <br />
<AntRangePicker Picker="@AntDatePickerType.Date" ShowTime='@("HH:mm")' /> <br />
<AntDatePicker PopupContainerSelector="#components-5" Picker="@AntDatePickerType.Date" ShowTime="@true" /> <br />
<AntRangePicker PopupContainerSelector="#components-5" Picker="@AntDatePickerType.Date" ShowTime='@("HH:mm")' /> <br />
</Demo>
</DemoCard>
<DemoCard>
<DemoCard id="6">
<Title>不可选择日期和时间</Title>
<Description>可用 <AntText Code>DisabledDate</AntText> 和 <AntText Code>DisabledTime</AntText> 分别禁止选择部分日期和时间，其中 <AntText Code>DisabledTime</AntText> 需要和 <AntText Code>ShowTime</AntText> 一起使用。</Description>
<Demo>
<AntDatePicker Picker="@AntDatePickerType.Date"
<AntDatePicker PopupContainerSelector="#components-6" Picker="@AntDatePickerType.Date"
ShowTime="@true"
DisabledDate="date => date.Day < 20"
DisabledTime="date => GetDisabledTime(date)" />
<br />
<AntDatePicker Picker="@AntDatePickerType.Month"
<AntDatePicker PopupContainerSelector="#components-6" Picker="@AntDatePickerType.Month"
DisabledDate="date => date.Month < 5" />
<br />
<AntRangePicker Picker="@AntDatePickerType.Date"
<AntRangePicker PopupContainerSelector="#components-6" Picker="@AntDatePickerType.Date"
DisabledDate="date => date.Month < 5 && date.Day < 27" />
<br />
<AntRangePicker Picker="@AntDatePickerType.Date"
<AntRangePicker PopupContainerSelector="#components-6" Picker="@AntDatePickerType.Date"
ShowTime='@true'
DisabledDate="date => date.Month < 5 && date.Day < 27" />
</Demo>
@ -83,11 +83,11 @@
return new AntDatePickerDisabledTime(timeRange[4..15], timeRange[20..55], timeRange[3..19]);
}
}
<DemoCard>
<DemoCard id="7">
<Title>定制日期单元格</Title>
<Description>使用 <AntText Code>DateRender</AntText> 可以自定义日期单元格的内容和样式。</Description>
<Demo>
<AntDatePicker Picker="@AntDatePickerType.Date" DateRender="CustomRender" /> <br />
<AntDatePicker PopupContainerSelector="#components-7" Picker="@AntDatePickerType.Date" DateRender="CustomRender" /> <br />
</Demo>
</DemoCard>
@code{
@ -96,22 +96,22 @@
if (currentViewDate.Day == 2)
{
return@<span>二</span>;
}
return @<span>@(currentViewDate.Day)</span>;
};
}
return @<span>@(currentViewDate.Day)</span>;
};
}
<DemoCard>
<DemoCard id="8">
<Title>额外的页脚</Title>
<Description>在浮层中加入额外的页脚，以满足某些定制信息的需求。</Description>
<Demo>
<AntDatePicker Picker="@AntDatePickerType.Date" ShowTime="@true" RenderExtraFooter="extraFooter" /> <br />
<AntRangePicker Picker="@AntDatePickerType.Date" RenderExtraFooter="extraFooter" /> <br />
<AntDatePicker PopupContainerSelector="#components-8" Picker="@AntDatePickerType.Date" ShowTime="@true" RenderExtraFooter="extraFooter" /> <br />
<AntRangePicker PopupContainerSelector="#components-8" Picker="@AntDatePickerType.Date" RenderExtraFooter="extraFooter" /> <br />
</Demo>
</DemoCard>
@code {
private RenderFragment extraFooter =@<span>ExtraFooter</span>;
}
<DemoCard>
<DemoCard id="9">
<Title>三种大小</Title>
<Description>三种大小的输入框，若不设置，则为 <AntText Code>Default</AntText>。</Description>
<Demo>
@ -121,21 +121,21 @@ return @<span>@(currentViewDate.Day)</span>;
<AntRadio RadioButton Value="@AntDatePickerSize.Small">Small</AntRadio>
</AntRadioGroup>
<br />
<AntDatePicker Picker="@AntDatePickerType.Date" Size="@datePickerSize" /> <br />
<AntDatePicker PopupContainerSelector="#components-9" Picker="@AntDatePickerType.Date" Size="@datePickerSize" /> <br />
</Demo>
</DemoCard>
@code {
private string datePickerSize = AntDatePickerSize.Default;
}
<DemoCard>
<DemoCard id="10">
<Title>无边框</Title>
<Description>无边框样式。</Description>
<Demo>
<AntDatePicker Bordered="@false" Picker="@AntDatePickerType.Date" /> <br />
<AntDatePicker Bordered="@false" Picker="@AntDatePickerType.Week" /> <br />
<AntDatePicker Bordered="@false" Picker="@AntDatePickerType.Month" /> <br />
<AntDatePicker Bordered="@false" Picker="@AntDatePickerType.Quarter" /> <br />
<AntDatePicker Bordered="@false" Picker="@AntDatePickerType.Year" /> <br />
<AntDatePicker PopupContainerSelector="#components-10" Bordered="@false" Picker="@AntDatePickerType.Date" /> <br />
<AntDatePicker PopupContainerSelector="#components-10" Bordered="@false" Picker="@AntDatePickerType.Week" /> <br />
<AntDatePicker PopupContainerSelector="#components-10" Bordered="@false" Picker="@AntDatePickerType.Month" /> <br />
<AntDatePicker PopupContainerSelector="#components-10" Bordered="@false" Picker="@AntDatePickerType.Quarter" /> <br />
<AntDatePicker PopupContainerSelector="#components-10" Bordered="@false" Picker="@AntDatePickerType.Year" /> <br />
</Demo>
</DemoCard>
<DemoCard>
@ -144,7 +144,7 @@ return @<span>@(currentViewDate.Day)</span>;
<li>已实现DatePicker组件：支持date、decade、year、month、quarter、week模式</li>
<li>已实现：MonthPicker、RangePicker、WeekPicker、YearPicker、QuarterPicker（对应DatePicker的各种模式）</li>
<li>
未实现的通用属性：AllowClear、GetPopupContainer、Locale、Mode(Mode为3.0妥协的功能，不打算支持)
未实现的通用属性：AllowClear、Locale、Mode(Mode为3.0妥协的功能，不打算支持)
</li>
<li>
未实现的DatePicker属性：showTime.defaultValue、onOk