Add support for type="number" and type="date"

This commit is contained in:
Ryan Nowak 2019-07-19 12:32:55 -07:00 committed by Ryan Nowak
parent af7ac7ff29
commit d96f444a6b
3 changed files with 12 additions and 4 deletions

View File

@ -19,6 +19,8 @@ namespace Microsoft.AspNetCore.Components
[Microsoft.AspNetCore.Components.BindElementAttribute("select", null, "value", "onchange")]
[Microsoft.AspNetCore.Components.BindElementAttribute("textarea", null, "value", "onchange")]
[Microsoft.AspNetCore.Components.BindInputElementAttribute("checkbox", null, "checked", "onchange", false, null)]
[Microsoft.AspNetCore.Components.BindInputElementAttribute("date", null, "value", "onchange", true, "yyyy-MM-dd")]
[Microsoft.AspNetCore.Components.BindInputElementAttribute("number", null, "value", "onchange", true, null)]
[Microsoft.AspNetCore.Components.BindInputElementAttribute("text", null, "value", "onchange", false, null)]
[Microsoft.AspNetCore.Components.BindInputElementAttribute(null, "value", "value", "onchange", false, null)]
[Microsoft.AspNetCore.Components.BindInputElementAttribute(null, null, "value", "onchange", false, null)]

View File

@ -22,6 +22,12 @@ namespace Microsoft.AspNetCore.Components
[BindInputElement("checkbox", null, "checked", "onchange", isInvariantCulture: false, format: null)]
[BindInputElement("text", null, "value", "onchange", isInvariantCulture: false, format: null)]
// type="number" is invariant culture
[BindInputElement("number", null, "value", "onchange", isInvariantCulture: true, format: null)]
// type="date" is invariant culture with a specific format
[BindInputElement("date", null, "value", "onchange", isInvariantCulture: true, format: "yyyy-MM-dd")]
[BindElement("select", null, "value", "onchange")]
[BindElement("textarea", null, "value", "onchange")]
public static class BindAttributes

View File

@ -30,11 +30,11 @@
<div>
<p>Numbers using bind in number fields</p>
<div>
int: <input type="number" id="input_type_number_int" value="@inputTypeNumberInt.ToString(CultureInfo.InvariantCulture)" @onchange="@EventCallback.Factory.CreateBinder(this, (value) => inputTypeNumberInt = value, inputTypeNumberInt, CultureInfo.InvariantCulture)" />
int: <input type="number" id="input_type_number_int" @bind="inputTypeNumberInt" />
<span id="input_type_number_int_value">@inputTypeNumberInt</span>
</div>
<div>
decimal: <input type="number" id="input_type_number_decimal" value="@inputTypeNumberDecimal.ToString(CultureInfo.InvariantCulture)" @onchange="@EventCallback.Factory.CreateBinder(this, (value) => inputTypeNumberDecimal = value, inputTypeNumberDecimal, CultureInfo.InvariantCulture)"/>
decimal: <input type="number" id="input_type_number_decimal" @bind="inputTypeNumberDecimal" />
<span id="input_type_number_decimal_value">@inputTypeNumberDecimal</span>
</div>
</div>
@ -43,12 +43,12 @@
<p>Dates using bind in date fields</p>
<div>
DateTime: <input type="text" id="input_type_date_datetime_extrainput" @bind="inputTypeDateDateTime" />
<input type="date" id="input_type_date_datetime" value="@inputTypeDateDateTime.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture)" @onchange="@EventCallback.Factory.CreateBinder(this, (value) => inputTypeDateDateTime = value, inputTypeDateDateTime, "yyyy-MM-dd", CultureInfo.InvariantCulture)" />
<input type="date" id="input_type_date_datetime" @bind="inputTypeDateDateTime" />
<span id="input_type_date_datetime_value">@inputTypeDateDateTime</span>
</div>
<div>
DateTimeOffset: <input type="text" id="input_type_date_datetimeoffset_extrainput" @bind="inputTypeDateDateTimeOffset" />
<input type="date" id="input_type_date_datetimeoffset" value="@inputTypeDateDateTimeOffset.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture)" @onchange="@EventCallback.Factory.CreateBinder(this, (value) => inputTypeDateDateTimeOffset = value, inputTypeDateDateTimeOffset, "yyyy-MM-dd", CultureInfo.InvariantCulture)"/>
<input type="date" id="input_type_date_datetimeoffset" @bind="inputTypeDateDateTimeOffset" />
<span id="input_type_date_datetimeoffset_value">@inputTypeDateDateTimeOffset</span>
</div>
</div>