The date input component is used to allow users to select a date from the native browser datepicker input type.
Example
Enables date selection through a calendar input.
code
<script type="module">
import '@blueprintui/components/include/date.js';
</script>
<bp-field>
<label>date</label>
<bp-date value="2018-07-22"></bp-date>
<bp-field-message>message text</bp-field-message>
</bp-field>Vertical
Demonstrates the date picker in vertical form layout.
code
<bp-form-group layout="vertical">
<bp-field>
<label>label</label>
<bp-date></bp-date>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field>
<label>disabled</label>
<bp-date disabled></bp-date>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field status="error">
<label>error status</label>
<bp-date></bp-date>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field status="success">
<label>success status</label>
<bp-date></bp-date>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Horizontal
Demonstrates the date picker in horizontal form layout.
code
<bp-form-group layout="horizontal">
<bp-field layout="horizontal">
<label>label</label>
<bp-date></bp-date>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="horizontal">
<label>disabled</label>
<bp-date disabled></bp-date>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="error">
<label>error status</label>
<bp-date></bp-date>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="success">
<label>success status</label>
<bp-date></bp-date>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Compact
Demonstrates the date picker in compact form layout.
code
<bp-form-group layout="compact">
<bp-field layout="compact">
<label>label</label>
<bp-date></bp-date>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="compact">
<label>disabled</label>
<bp-date disabled></bp-date>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="error">
<label>error status</label>
<bp-date></bp-date>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="success">
<label>success status</label>
<bp-date></bp-date>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>Install
NPM
// npm package
import '@blueprintui/components/include/date.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/date.js/+esm';
</script>Accessibility
- Use appropriate
labeloraria-labelandaria-describedbyto provide an accessible name and description for the input.
bp-date
Events
| Name | Types | Description |
|---|---|---|
input | InputEvent | occurs when the value changes |
change | InputEvent | occurs when the value changes |
Properties
| Name | Types | Description |
|---|---|---|
type | string | Defines the input type as date, enabling native browser date picker functionality |
valueAsDate |
Attributes
| Name | Types | Description |
|---|---|---|
type | string | Defines the input type as date, enabling native browser date picker functionality |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background-size | ||
--color | ||
--background | ||
--border | ||
--border-radius | ||
--outline | ||
--outline-offset | ||
--padding | ||
--font-size | ||
--line-height | ||
--height | ||
--min-width | ||
--width | ||
--transition | ||
--text-align | ||
--cursor |
Slots
| Name | Types | Description |
|---|---|---|
prefix | slot for prefix text or icons | |
suffix | slot for suffic text or icons |