ant-design-blazor/components/date-picker/RangePicker.razor

@namespace AntDesign
@inherits DatePickerBase<TValue>
@typeparam TValue
@using AntDesign.Internal;

<CascadingValue Value='$"{PrefixCls}-dropdown"' Name="PrefixCls">
    <OverlayTrigger @ref="_dropDown"
                    Visible="Open"
                    IsButton="@true"
                    Disabled="Disabled"
                    PopupContainerSelector="@PopupContainerSelector"
                    OnVisibleChange="visible => AutoFocus = visible"
                    OverlayEnterCls="slide-up-enter slide-up-enter-active slide-up ant-picker-dropdown-range"
                    OverlayLeaveCls="slide-up-leave slide-up-leave-active slide-up ant-picker-dropdown-range"
                    Trigger="new TriggerType[] { TriggerType.Click }">
        <Overlay>
            <div class="@(PrefixCls)-range-arrow" style="@_rangeArrowStyle"/>
            <div class="@(PrefixCls)-panel-container">
                <div class="@(PrefixCls)-panels">
                    <div class="@(PrefixCls)-panel">
                        <DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="0" OnSelect="async (date, index) => await OnSelect(date)"/>
                    </div>
                    <div class="@(PrefixCls)-panel">
                        <DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="1" OnSelect="async (date, index) => await OnSelect(date)"/>
                    </div>
                </div>
            </div>
        </Overlay>
        <ChildContent>
            <div class="@ClassMapper.Class"
                 @ref="@Ref"
                 style="@Style"
                 Id="@Id">
                <DatePickerInput @ref="_inputStart"
                                 PrefixCls="@PrefixCls"
                                 Size="@Size"
                                 Disabled="@Disabled"
                                 Value="@GetInputValue(0)"
                                 Placeholder="@_placeholders[0]"
                                 ReadOnly="@InputReadOnly"
                                 AutoFocus="@AutoFocus"
                                 OnClick="async e => { await OnInputClick(0); }"
                                 OnInput="e => OnInput(e, 0)"
                                 ShowTime="@(Picker == DatePickerType.Time)" 
                                 ShowSuffixIcon="false"
                                 IsRange="@IsRange"
                                 AllowClear="@AllowClear"
                                 OnClickClear="e => ClearValue(0)"
                />

                <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="@Disabled"
                                    Value="@GetInputValue(1)"
                                    Placeholder="@_placeholders[1]"
                                    ReadOnly="@InputReadOnly"
                                    AutoFocus="@AutoFocus"
                                    OnClick="async e => { await OnInputClick(1); }"
                                    OnInput="e => OnInput(e, 0)"
                                    ShowTime="@(Picker == DatePickerType.Time)"
                                    IsRange="@IsRange"
                                    AllowClear="@AllowClear"
                                    OnClickClear="e => ClearValue(0)"
                />
                <div class="@(PrefixCls)-active-bar" style="@_activeBarStyle"></div>
            </div>
        </ChildContent>
    </OverlayTrigger>
</CascadingValue>