With the [type] attribute set to "date"<uwc-input>
will render a date input.
Plain date input
Example
Specify a locale
Similar to <uwc-input type="number"> this will format its value according to the closest [lang] attribute.
Example
Custom formats
You can also configure a custom format pattern by specifying a valid format string
for the [pattern] attribute.
Example
Custom placeholders
It is possible to customize the placeholder as long as the "separators" (the bits that don't represent a value part)
match the current [pattern].
Example
Default placeholders
Because it is rather tedious to specify a placeholder everywhere just because your app
requires a different placeholder than the standard you can also override the default placeholder.
Just keep in mind that this is not reactive, so you should do this once for your whole app.
Example
// specified per locale UwcInputElement.config.date.defaults["en-US"] = { pattern:"yyyy/MM/dd", // a sensible default placeholder:"YYYY/MM/DD", }
Time components
--- TO BE DONE ---
Because the format string can also include time components it is possible to use this type for date and time inputs.
Example
Customize datepicker
Since this type simply utilizes a popup which you can provide before initialization
it is possible to provide your own datepicker for example.
With the
[type]attribute set to"date"<uwc-input>will render a date input.Plain date input
Example
Specify a locale
Similar to
<uwc-input type="number">this will format its value according to the closest[lang]attribute.Example
Custom formats
You can also configure a custom format pattern by specifying a valid format string for the
[pattern]attribute.Example
Custom placeholders
It is possible to customize the placeholder as long as the "separators" (the bits that don't represent a value part) match the current
[pattern].Example
Default placeholders
Because it is rather tedious to specify a placeholder everywhere just because your app requires a different placeholder than the standard you can also override the default placeholder.
Just keep in mind that this is not reactive, so you should do this once for your whole app.
Example
Time components
--- TO BE DONE ---
Because the format string can also include time components it is possible to use this type for date and time inputs.
Example
Customize datepicker
Since this type simply utilizes a popup which you can provide before initialization it is possible to provide your own datepicker for example.
Example