ant-design-blazor/components/date-picker/RangePicker.razor
agolub-s 8e60219b35
feat(module: datepicker): add mask to DatePickerBase for input value constraint (#3120)
* Add support multiple date formats for DatePickerBase

* Fix test

* Extend docs

* Fix merge

* Revert "Add support multiple date formats for DatePickerBase"

This reverts commit 9021dcdd

* Refactoring. Add mask property for DatePickerBase. For input value constraint.

* Some fixes

* Refactoring

* Add value converter for MaskInput

* Some fix

* fix Chinese

* Refactoring

* Fix tests

* Fix tests

* clean up

* Fix tests

* Pass mask to RangePicker

* Fix AvatarTests

* Fix merge

* Stage

* Stabilized tests

---------

Co-authored-by: James Yeung <shunjiey@hotmail.com>
2023-10-05 17:24:16 +08:00

143 lines
6.8 KiB
C#

@namespace AntDesign
@inherits DatePickerBase<TValue>
@typeparam TValue
@using AntDesign.Internal;
<CascadingValue Value='$"{PrefixCls}-dropdown"' Name="PrefixCls">
<OverlayTrigger @ref="_dropDown"
Visible="Open"
IsButton="@true"
Disabled="IsDisabled()"
PopupContainerSelector="@PopupContainerSelector"
BoundaryAdjustMode="@BoundaryAdjustMode"
Placement="Placement"
OnVisibleChange="OverlayVisibleChange"
OverlayClassName="ant-picker-dropdown-range"
OverlayEnterCls="ant-slide-up-enter ant-slide-up-enter-active ant-slide-up"
OverlayLeaveCls="ant-slide-up-leave ant-slide-up-leave-active ant-slide-up"
Trigger="new[] { Trigger.Click }">
<Overlay>
<div class="@(PrefixCls)-range-arrow" style="@_rangeArrowStyle" />
<div class="@(PrefixCls)-panel-container" @onclick="@PickerClicked">
<div class="@(PrefixCls)-panels">
<div class="@_panelClassMapper.Class" style="@(Picker == DatePickerType.Date && IsShowTime && GetOnFocusPickerIndex() == (RTL ? 0 : 1) ? "display: none;": "")">
<DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="@(RTL ? 1 : 0)" OnSelect="async (date, index) => await OnSelect(date, index)" />
</div>
<div class="@_panelClassMapper.Class">
<DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="@(RTL ? 0 : 1)" OnSelect="async (date, index) => await OnSelect(date, index)" />
</div>
</div>
@if (ShowFooter)
{
<div class="@(PrefixCls)-footer">
@if (RenderExtraFooter != null)
{
<div class="@(PrefixCls)-footer-extra">
@RenderExtraFooter
</div>
}
@if (ShowRanges)
{
<ul class="@(PrefixCls)-ranges">
@foreach (var range in Ranges)
{
<li class="ant-picker-preset" @onmouseout="()=>OnRangeItemOut(range.Value)" @onmouseover="()=>OnRangeItemOver(range.Value)">
<span class="ant-tag ant-tag-blue" @onclick="()=>OnRangeItemClicked(range.Value)">@range.Key</span>
</li>
}
</ul>
}
</div>
}
</div>
</Overlay>
<Unbound>
<div class="@ClassMapper.Class"
@ref="@context.Current"
style="@Style"
Id="@Id">
<DatePickerInput @ref="_inputStart"
PrefixCls="@PrefixCls"
Size="@Size"
Disabled="IsDisabled(0)"
Value="@GetInputValue(0)"
Placeholder="@_placeholders[0]"
ReadOnly="@InputReadOnly"
AutoFocus="@AutoFocus"
OnClick="async e => await OnInputClick(0)"
OnInput="e => OnInput(e, 0)"
OnKeyDown="e => OnKeyDown(e, 0)"
Onfocus="() => OnFocus(0)"
OnBlur="e => OnBlur(0)"
ShowTime="@(Picker == DatePickerType.Time)"
ShowSuffixIcon="false"
Mask="@Mask"
IsRange="@IsRange"
AllowClear="@AllowClear"
HtmlInputSize="@HtmlInputSize"
FeedbackIcon="@FormItem?.FeedbackIcon"
OnClickClear="e => ClearValue(-1)" />
<div class="@(PrefixCls)-range-separator">
<span aria-label="to" class="@(PrefixCls)-separator">
<Icon Type="swap-right" Theme="outline" />
</span>
</div>
<DatePickerInput @ref="_inputEnd"
PrefixCls="@PrefixCls"
Size="@Size"
Disabled="IsDisabled(1)"
Value="@GetInputValue(1)"
Placeholder="@_placeholders[1]"
ReadOnly="@InputReadOnly"
AutoFocus="@AutoFocus"
OnClick="async e => await OnInputClick(1)"
OnSuffixIconClick="OnSuffixIconClick"
OnInput="e => OnInput(e, 1)"
OnKeyDown="e => OnKeyDown(e, 1)"
Onfocus="() => OnFocus(1)"
OnBlur="e => OnBlur(1)"
ShowTime="@(Picker == DatePickerType.Time)"
IsRange="@IsRange"
Mask="@Mask"
AllowClear="@AllowClear"
HtmlInputSize="@HtmlInputSize"
SuffixIcon="@SuffixIcon"
FeedbackIcon="@FormItem?.FeedbackIcon"
OnClickClear="e => ClearValue(-1)" />
<div class="@(PrefixCls)-active-bar" style="@_activeBarStyle"></div>
<span class="@(PrefixCls)-suffix" @onclick="@(_=> OnSuffixIconClick())">
@if (SuffixIcon != null)
{
@SuffixIcon
}
else if (Picker == DatePickerType.Time)
{
<Icon Type="clock-circle" />
}
else
{
<Icon Type="calendar" />
}
@if (FormItem?.FeedbackIcon != null)
{
@FormItem.FeedbackIcon
}
</span>
@if (ShowClear())
{
<span class="@(PrefixCls)-clear" @onclick="@(e => ClearValue(-1))">
<Icon Type="close-circle" Theme="fill" />
</span>
}
</div>
</Unbound>
</OverlayTrigger>
</CascadingValue>