test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-11-30 11:08:14 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat(module: range-picker): support form (#496)

Browse Source 
* feat(module: range-picker): support form

* fix(module: range-picker): has no default value in from

* fix: picker's close behaviour and range arrow's style is wrong

* feat(module: datepicker): change placeholder on mouse over

* style(module: datepicker): adjust range arrow

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
笨木头 2020-08-14 12:43:48 +08:00 committed by GitHub
parent 7b31935f74
commit e42aa8aeb7
15 changed files with 264 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/calendar/Calendar.razor.cs
View File

@ -3,6 +3,7 @@ using System.Collections.Generic;
using System.Globalization;
using System.Runtime.InteropServices;
using System.Threading.Tasks;
using AntDesign.Internal;
using Microsoft.AspNetCore.Components;
namespace AntDesign
@ -164,6 +165,16 @@ namespace AntDesign
StateHasChanged();
}
string IDatePicker.GetFormatValue(DateTime value, int index)
{
throw new NotImplementedException();
}
void IDatePicker.ChangePlaceholder(string placeholder, int index)
{
throw new NotImplementedException();
}
public string Picker { get { return _picker; } }
public CultureInfo CultureInfo { get; set; } = CultureInfo.CurrentCulture;

4
components/date-picker/IDatePicker.cs
View File

@ -1,5 +1,6 @@
using System;
using System.Globalization;
using AntDesign.Internal;
namespace AntDesign
{
@ -12,6 +13,9 @@ namespace AntDesign
int GetOnFocusPickerIndex();
void ChangePlaceholder(string placeholder, int index = 0);
string GetFormatValue(DateTime value, int index);
void ChangePickerType(string type);
void ChangePickerType(string type, int index);
void InvokeStateHasChanged();

66
components/date-picker/RangePicker.razor
View File

@ -1,5 +1,5 @@
@namespace AntDesign
@inherits DatePickerBase<TValue[]>
@inherits DatePickerBase<TValue>
@typeparam TValue
@using AntDesign.Internal;
@ -14,25 +14,16 @@
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="@(_inputStart.IsOnFocused ? "left: 0px;" : "left: 145px;")"/>
<div class="@(PrefixCls)-range-arrow" style="@_rangeArrowStyle"/>
<div class="@(PrefixCls)-panel-container">
@if (IsRange)
{
<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>
}
else
{
<div class="@(PrefixCls)-panels">
<div class="@(PrefixCls)-panel">
<DatePickerPanelChooser TValue="TValue[]" DatePicker="@this" OnSelect="async (date, index) => await OnSelect(date)"/>
<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>
@ -57,27 +48,28 @@
OnClickClear="e => ClearValue(0)"
/>
@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>
<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>
}
<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>

155
components/date-picker/RangePicker.razor.cs
View File

@ -6,20 +6,21 @@ using Microsoft.AspNetCore.Components;
namespace AntDesign
{
public partial class RangePicker<TValue> : DatePickerBase<TValue[]>
public partial class RangePicker<TValue> : DatePickerBase<TValue>
{
public RangePicker()
{
IsRange = true;
Value = new TValue[2];
DisabledDate = (date) =>
{
var array = Value as Array;
if (_pickerStatus[0]._hadSelectValue && _inputEnd.IsOnFocused)
{
DateTime? value = null;
GetIfNotNull(Value[0], notNullValue =>
GetIfNotNull(Value, 0, notNullValue =>
{
value = notNullValue;
});
@ -32,7 +33,7 @@ namespace AntDesign
if (_pickerStatus[1]._hadSelectValue && _inputStart.IsOnFocused)
{
DateTime? value = null;
GetIfNotNull(Value[1], notNullValue =>
GetIfNotNull(Value, 1, notNullValue =>
{
value = notNullValue;
});
@ -54,14 +55,12 @@ namespace AntDesign
return;
}
if (BindConverter.TryConvertTo(args.Value.ToString(), CultureInfo, out TValue changeValue))
{
Value[index] = changeValue;
var array = Value as Array;
GetIfNotNull(changeValue, (notNullValue) =>
{
_pickerValues[index] = notNullValue;
});
if (BindConverter.TryConvertTo(args.Value.ToString(), CultureInfo, out DateTime changeValue))
{
array.SetValue(changeValue, index);
_pickerValues[index] = changeValue;
StateHasChanged();
}
@ -69,6 +68,28 @@ namespace AntDesign
UpdateCurrentValueAsString();
}
protected override void OnInitialized()
{
base.OnInitialized();
if (Value != null)
{
GetIfNotNull(Value, 0, notNullValue =>
{
ChangeValue(notNullValue, 0);
});
GetIfNotNull(Value, 1, notNullValue =>
{
ChangeValue(notNullValue, 1);
});
}
else
{
Value = CreateInstance();
}
}
/// <summary>
/// Get value by picker index
/// </summary>
@ -78,12 +99,15 @@ namespace AntDesign
{
if (_pickerStatus[index]._hadSelectValue)
{
if (Value[index] == null)
var array = Value as Array;
var indexValue = array.GetValue(index);
if (indexValue == null)
{
return null;
}
return Convert.ToDateTime(Value[index], this.CultureInfo);
return Convert.ToDateTime(indexValue, this.CultureInfo);
}
else if (_defaultValues[index] != null)
{
@ -95,36 +119,35 @@ namespace AntDesign
public override void ChangeValue(DateTime value, int index = 0)
{
bool result = BindConverter.TryConvertTo<TValue>(
value.ToString(CultureInfo), CultureInfo, out var dateTime);
var array = Value as Array;
if (result)
{
Value[index] = dateTime;
}
array.SetValue(value, index);
_pickerStatus[index]._hadSelectValue = true;
_pickerStatus[index]._currentShowHadSelectValue = true;
UpdateCurrentValueAsString(index);
if (IsRange && !IsShowTime && Picker != DatePickerType.Time)
if (!IsShowTime && Picker != DatePickerType.Time)
{
if (_pickerStatus[0]._hadSelectValue && _pickerStatus[1]._hadSelectValue)
if (_pickerStatus[0]._currentShowHadSelectValue && _pickerStatus[1]._currentShowHadSelectValue)
{
Close();
}
}
else if (!IsShowTime && Picker != DatePickerType.Time)
{
Close();
}
}
public override void ClearValue(int index = 0)
{
_isSetPicker = false;
CurrentValue[0] = default;
CurrentValue[1] = default;
var array = CurrentValue as Array;
array.SetValue(default, 0);
array.SetValue(default, 1);
_pickerStatus[0]._hadSelectValue = false;
_pickerStatus[1]._hadSelectValue = false;
Close();
}
@ -132,26 +155,29 @@ namespace AntDesign
{
await _dropDown.Show();
// clear status
_pickerStatus[0]._currentShowHadSelectValue = false;
_pickerStatus[1]._currentShowHadSelectValue = false;
if (index == 0)
{
// change start picker value
if (!_inputStart.IsOnFocused && _pickerStatus[index]._hadSelectValue)
{
GetIfNotNull(Value[index], notNullValue =>
GetIfNotNull(Value, index, notNullValue =>
{
ChangePickerValue(notNullValue, index);
});
}
ChangeFocusTarget(true, false);
}
else
{
// change end picker value
if (!_inputEnd.IsOnFocused && _pickerStatus[index]._hadSelectValue)
{
GetIfNotNull(Value[index], notNullValue =>
GetIfNotNull(Value, index, notNullValue =>
{
ChangePickerValue(notNullValue, index);
});
@ -161,21 +187,80 @@ namespace AntDesign
}
}
private void GetIfNotNull(TValue value, Action<DateTime> notNullAction)
private void GetIfNotNull(TValue value, int index, Action<DateTime> notNullAction)
{
var array = value as Array;
var indexValue = array.GetValue(index);
if (!_isNullable)
{
DateTime dateTime = Convert.ToDateTime(value, CultureInfo);
DateTime dateTime = Convert.ToDateTime(indexValue, CultureInfo);
if (dateTime != DateTime.MinValue)
{
notNullAction?.Invoke(dateTime);
}
}
if (_isNullable && value != null)
if (_isNullable && indexValue != null)
{
notNullAction?.Invoke(Convert.ToDateTime(value, CultureInfo));
notNullAction?.Invoke(Convert.ToDateTime(indexValue, CultureInfo));
}
}
private TValue CreateInstance()
{
if (_isNullable)
{
return (TValue)Array.CreateInstance(typeof(DateTime?), 2).Clone();
}
else
{
return (TValue)Array.CreateInstance(typeof(DateTime), 2).Clone();
}
}
protected override void UpdateCurrentValueAsString(int index = 0)
{
if (EditContext != null)
{
CurrentValueAsString = $"{GetInputValue(0)},{GetInputValue(1)}";
}
}
protected override bool TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)
{
result = default;
validationErrorMessage = $"{FieldIdentifier.FieldName} field isn't valid.";
if (string.IsNullOrEmpty(value))
{
return false;
}
string[] values = value.Split(",");
if (values.Length != 2)
{
return false;
}
var success0 = BindConverter.TryConvertTo<DateTime>(values[0], CultureInfo, out var dateTime0);
var success1 = BindConverter.TryConvertTo<DateTime>(values[1], CultureInfo, out var dateTime1);
if (success0 && success1)
{
result = CreateInstance();
var array = result as Array;
array.SetValue(dateTime0, 0);
array.SetValue(dateTime1, 1);
validationErrorMessage = null;
return true;
}
return false;
}
}
}

61
components/date-picker/internal/DatePickerBase.cs
View File

@ -240,6 +240,7 @@ namespace AntDesign
protected OverlayTrigger _dropDown;
protected string _activeBarStyle = "";
protected string _rangeArrowStyle = "";
protected DatePickerStatus[] _pickerStatus
= new DatePickerStatus[] { new DatePickerStatus(), new DatePickerStatus() };
@ -256,7 +257,8 @@ namespace AntDesign
Picker = DatePickerType.Date;
}
if (typeof(TValue).IsAssignableFrom(typeof(DateTime?)))
Type type = typeof(TValue);
if (type.IsAssignableFrom(typeof(DateTime?)) || type.IsAssignableFrom(typeof(DateTime?[])))
{
_isNullable = true;
}
@ -311,11 +313,13 @@ namespace AntDesign
{
Element element = await JsInvokeAsync<Element>(JSInteropConstants.getDomInfo, _inputStart.Ref);
_activeBarStyle = $"width: {element.clientWidth - 10}px; position: absolute; transform: translate3d(0px, 0px, 0px);";
_rangeArrowStyle = $"left: 12px";
}
else if (_inputEnd.IsOnFocused)
{
Element element = await JsInvokeAsync<Element>(JSInteropConstants.getDomInfo, _inputStart.Ref);
Element element = await JsInvokeAsync<Element>(JSInteropConstants.getDomInfo, _inputEnd.Ref);
_activeBarStyle = $"width: {element.clientWidth - 10}px; position: absolute; transform: translate3d({element.clientWidth + 16}px, 0px, 0px);";
_rangeArrowStyle = $"left: {element.clientWidth + 30}px";
}
else
{
@ -339,23 +343,7 @@ namespace AntDesign
DateTime value = (DateTime)tryGetValue;
if (!string.IsNullOrEmpty(Format))
{
return value.ToString(Format, this.CultureInfo);
}
string formater = _pickerStatus[index]._initPicker switch
{
DatePickerType.Date => IsShowTime ? $"yyyy-MM-dd {ShowTimeFormat}" : "yyyy-MM-dd",
DatePickerType.Week => $"{value.Year}-{DateHelper.GetWeekOfYear(value)}{CultureInfo.GetDateLocale().Week}",
DatePickerType.Month => "yyyy-MM",
DatePickerType.Quarter => $"{value.Year}-{DateHelper.GetDayOfQuarter(value)}",
DatePickerType.Year => "yyyy",
DatePickerType.Time => "HH:mm:dd",
_ => "yyyy-MM-dd",
};
return value.ToString(formater, this.CultureInfo);
return GetFormatValue(value, index);
}
protected void ChangeFocusTarget(bool inputStartFocus, bool inputEndFocus)
@ -391,12 +379,12 @@ namespace AntDesign
// auto focus the other input
if (IsRange && (!IsShowTime || Picker == DatePickerType.Time))
{
if (index == 0 && !_pickerStatus[1]._hadSelectValue && !_inputEnd.IsOnFocused)
if (index == 0 && !_pickerStatus[1]._currentShowHadSelectValue && !_inputEnd.IsOnFocused)
{
await Blur(0);
await Focus(1);
}
if (index == 1 && !_pickerStatus[0]._hadSelectValue && !_inputStart.IsOnFocused)
else if (index == 1 && !_pickerStatus[0]._currentShowHadSelectValue && !_inputStart.IsOnFocused)
{
await Blur(1);
await Focus(0);
@ -449,7 +437,7 @@ namespace AntDesign
}
}
protected void UpdateCurrentValueAsString(int index = 0)
protected virtual void UpdateCurrentValueAsString(int index = 0)
{
if (EditContext != null)
{
@ -529,6 +517,35 @@ namespace AntDesign
return _pickerValues[index];
}
public void ChangePlaceholder(string placeholder, int index = 0)
{
_placeholders[index] = placeholder;
StateHasChanged();
}
public string GetFormatValue(DateTime value, int index)
{
if (!string.IsNullOrEmpty(Format))
{
return value.ToString(Format, this.CultureInfo);
}
string formater = _pickerStatus[index]._initPicker switch
{
DatePickerType.Date => IsShowTime ? $"yyyy-MM-dd {ShowTimeFormat}" : "yyyy-MM-dd",
DatePickerType.Week => $"{value.Year}-{DateHelper.GetWeekOfYear(value)}{CultureInfo.GetDateLocale().Week}",
DatePickerType.Month => "yyyy-MM",
DatePickerType.Quarter => $"{value.Year}-{DateHelper.GetDayOfQuarter(value)}",
DatePickerType.Year => "yyyy",
DatePickerType.Time => "HH:mm:dd",
_ => "yyyy-MM-dd",
};
return value.ToString(formater, this.CultureInfo);
}
internal void ChangePickerValue(DateTime date, int index = 0)
{
TimeSpan interval = date - _pickerValues[index];

7
components/date-picker/internal/DatePickerStatus.cs
View File

@ -4,6 +4,13 @@ namespace AntDesign.Internal
public class DatePickerStatus
{
internal string _initPicker = null;
/// <summary>
/// note that has picker selected value
/// </summary>
internal bool _hadSelectValue = false;
/// <summary>
/// note that has picker selected value. is would set to false when picker open every time.
/// </summary>
internal bool _currentShowHadSelectValue = false;
}
}

29
components/date-picker/internal/DatePickerTemplate.razor.cs
View File

@ -65,6 +65,11 @@ namespace AntDesign.Internal
DatePicker.InvokeStateHasChanged();
}
int focusIndex = DatePicker.GetOnFocusPickerIndex();
string placeholder = DatePicker.GetFormatValue(hoverDateTime, focusIndex);
DatePicker.ChangePlaceholder(placeholder, focusIndex);
}
private void DateOnMouseLeave()
@ -73,6 +78,30 @@ namespace AntDesign.Internal
{
DatePicker.HoverDateTime = null;
}
string placeholder;
if (IsRange)
{
var (startPlaceholder, endPlaceholder) = DatePickerPlaceholder.GetRangePlaceHolderByType(Picker, DatePicker.CultureInfo);
if (DatePicker.GetOnFocusPickerIndex() == 0)
{
placeholder = startPlaceholder;
}
else
{
placeholder = endPlaceholder;
}
}
else
{
placeholder = DatePickerPlaceholder.GetPlaceholderByType(Picker, DatePicker.CultureInfo);
}
int focusIndex = DatePicker.GetOnFocusPickerIndex();
DatePicker.ChangePlaceholder(placeholder, focusIndex);
}
private bool IsDateInRange(DateTime currentColDate)

2
site/AntBlazor.Docs/Demos/Components/DatePicker/demo/DateRender.razor
View File

@ -1,5 +1,5 @@
<DatePicker TValue="DateTime?" Picker="@DatePickerType.Date" DateRender="CustomRender"/><br />
<RangePicker TValue="DateTime?" Picker="@DatePickerType.Date" DateRender="CustomRender" />
<RangePicker TValue="DateTime?[]" Picker="@DatePickerType.Date" DateRender="CustomRender" />
@code
{

4
site/AntBlazor.Docs/Demos/Components/DatePicker/demo/Disabled.razor
View File

@ -2,7 +2,7 @@
<br />
<MonthPicker TValue="DateTime?" Disabled="@true" DefaultValue="new DateTime(2015, 6, 6)" />
<br />
<RangePicker TValue="DateTime?" Disabled="@true" DefaultValue="new DateTime[] { new DateTime(2015, 6, 6), new DateTime(2015, 6, 6) }" />
<RangePicker TValue="DateTime?[]" Disabled="@true" DefaultValue="new DateTime[] { new DateTime(2015, 6, 6), new DateTime(2015, 6, 6) }" />
<br />
<RangePicker TValue="DateTime?" Disabled="@true"
<RangePicker TValue="DateTime?[]" Disabled="@true"
DefaultValue="new DateTime[] { new DateTime(2019, 9, 3), new DateTime(2019, 11, 12) }" />

4
site/AntBlazor.Docs/Demos/Components/DatePicker/demo/DisabledDate.razor
View File

@ -9,9 +9,9 @@
DisabledDate="date => date <= DateTime.Now"
/>
<br />
<RangePicker TValue="DateTime?" DisabledDate="date => date <= DateTime.Now"/>
<RangePicker TValue="DateTime?[]" DisabledDate="date => date <= DateTime.Now"/>
<br />
<RangePicker TValue="DateTime?" ShowTime='@true'
<RangePicker TValue="DateTime?[]" ShowTime='@true'
DisabledDate="date => date <= DateTime.Now"
/>

6
site/AntBlazor.Docs/Demos/Components/DatePicker/demo/ExtraFooter.razor
View File

@ -2,11 +2,11 @@
<br />
<DatePicker TValue="DateTime?" ShowTime="@true" RenderExtraFooter="extraFooter"/>
<br />
<RangePicker TValue="DateTime?" RenderExtraFooter="extraFooter" />
<RangePicker TValue="DateTime?[]" RenderExtraFooter="extraFooter" />
<br />
<RangePicker TValue="DateTime?" ShowTime="@true" RenderExtraFooter="extraFooter"/>
<RangePicker TValue="DateTime?[]" ShowTime="@true" RenderExtraFooter="extraFooter"/>
<br />
<DatePicker TValue="DateTime?" Picker="@DatePickerType.Month" RenderExtraFooter="extraFooter"/>
<DatePicker TValue="DateTime?[]" Picker="@DatePickerType.Month" RenderExtraFooter="extraFooter"/>
@code {
private RenderFragment extraFooter =@<span>extra footer</span>;

12
site/AntBlazor.Docs/Demos/Components/DatePicker/demo/RangePickerDemo.razor
View File

@ -1,11 +1,11 @@
<RangePicker TValue="DateTime?"/>
<RangePicker TValue="DateTime?[]"/>
<br />
<RangePicker TValue="DateTime?" ShowTime="@true"/>
<RangePicker TValue="DateTime?[]" ShowTime="@true"/>
<br />
<RangePicker TValue="DateTime?" Picker="@DatePickerType.Week"/>
<RangePicker TValue="DateTime?[]" Picker="@DatePickerType.Week"/>
<br />
<RangePicker TValue="DateTime?" Picker="@DatePickerType.Month"/>
<RangePicker TValue="DateTime?[]" Picker="@DatePickerType.Month"/>
<br />
<RangePicker TValue="DateTime?" Picker="@DatePickerType.Quarter"/>
<RangePicker TValue="DateTime?[]" Picker="@DatePickerType.Quarter"/>
<br />
<RangePicker TValue="DateTime?" Picker="@DatePickerType.Year"/>
<RangePicker TValue="DateTime?[]" Picker="@DatePickerType.Year"/>

2
site/AntBlazor.Docs/Demos/Components/DatePicker/demo/Size.razor
View File

@ -8,7 +8,7 @@
<br />
<DatePicker TValue="DateTime?" Picker="@DatePickerType.Month" Size="@datePickerSize" />
<br />
<RangePicker TValue="DateTime?" Size="@datePickerSize" />
<RangePicker TValue="DateTime?[]" Size="@datePickerSize" />
<br />
<DatePicker TValue="DateTime?" Picker="@DatePickerType.Week" Size="@datePickerSize" />

2
site/AntBlazor.Docs/Demos/Components/DatePicker/demo/Time.razor
View File

@ -1,6 +1,6 @@
<DatePicker TValue="DateTime?" ShowTime="@true" OnChange="OnChange"/>
<br />
<RangePicker TValue="DateTime?" ShowTime='@("HH:mm")' OnChange="OnChange"/>
<RangePicker TValue="DateTime?[]" ShowTime='@("HH:mm")' OnChange="OnChange"/>
@code
{

29
site/AntBlazor.Docs/Demos/Components/Form/demo/Size.razor
View File

@ -1,11 +1,11 @@
@using System.Text.Json;
<Form Model="@model"
LabelCol="new ColLayoutParam { Span = 8 }"
WrapperCol="new ColLayoutParam { Span = 16 }"
OnFinish="OnFinish"
OnFinishFailed="OnFinishFailed"
Size="@model.Size">
LabelCol="new ColLayoutParam { Span = 8 }"
WrapperCol="new ColLayoutParam { Span = 16 }"
OnFinish="OnFinish"
OnFinishFailed="OnFinishFailed"
Size="@model.Size">
<FormItem Label="Form Size">
<RadioGroup @bind-Value="@context.Size">
<Radio RadioButton Value="@AntSizeLDSType.Small">Small</Radio>
@ -26,6 +26,9 @@
<FormItem Label="DatePicker">
<DatePicker @bind-Value="@context.DatePicker" />
</FormItem>
<FormItem Label="RangePicker">
<RangePicker @bind-Value="@context.RangePicker" />
</FormItem>
<FormItem Label="InputNumber">
<AntDesign.InputNumber @bind-Value="@context.Number" />
</FormItem>
@ -44,21 +47,6 @@
<Button HtmlType="submit">
Submit
</Button>
<Button OnClick="@(e => {
model = new Model()
{
DatePicker = new DateTime(2000, 1, 1),
Cascader = "11",
Input = "new input value",
InputArea = "new textarea value",
Number = 1111,
Switch = false,
Radio = "Hangzhou",
Size = AntSizeLDSType.Large,
};
})">
New Model
</Button>
</FormItem>
</Form>
@ -71,6 +59,7 @@
public string InputArea { get; set; } = "inputArea";
public string Cascader { get; set; } = "11";
public DateTime? DatePicker { get; set; } = DateTime.Now;
public DateTime?[] RangePicker { get; set; } = new DateTime?[] { DateTime.Now, DateTime.Now.AddDays(10) };
public double Number { get; set; } = 1;
public bool Switch { get; set; } = true;
public string Radio { get; set; } = "Beijing";