Date Input for dates
Use r-date-input with the default date type to select dates (without time).
Usage
import { RDateInput } from '@rebilly/revel';
<r-date-input/>
Examples
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | '' | Label for the date picker |
| id | string | () => nanoid() | Unique id of the date picker |
| caption | string | undefined | A text to describe the date picker |
| modelValue | union, Date, object, string, null | () => new Date() | Used to specify selected dates |
| disabled | boolean | false | Disable |
| validate | Nullable, ValidationState | null | Validation result sent by Vuelidate |
| showValidateMessages | boolean | false | Show validation messages |
| timezone | string | 'UTC' | Time zone |
| availableDates | object | undefined | Available dates |
| columns | number | 1 | Columns |
| timePicker | boolean | false | Time picker used by RDateRangeButtonGroup to include time in ranges |
| placeholder | string | '' | Time picker |
| minDate | union, Date, string, object | undefined | Min date |
| maxDate | union, Date, string, object | undefined | Max date |
| type | string | 'date' | Type |
| is24hr | boolean | false | Define if the time format is 24H |
| hideTimeHeader | boolean | false | Define if hide the time header |
| placement | string | 'bottom' | Placement |
| locale | string | undefined | v-calendar uses Internationalization API by default but we can explicitly specify a locale with this prop See https://vcalendar.io/i18n.html#string-locales |
| masks | object | () => ({}) | Masks are used to properly format and parse different sections of the calendar and date picker components. |
| allowEmpty | boolean | Whether the value can be null for single date inputs |
| Name | Description |
|---|---|
| update:modelValue | The model value updated |