Datepicker
Examples
Basic Usage
js
<Mdx-datepicker label="Datepicker" />Min and Max Dates
To customize the minimum and maximum datepicker values, the minDate and maxDate component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format, each component can restrict which dates can be selected by the user.
The following example restricts date selection to March 2022 through May 2022 only.
js
<Mdx-datepicker minDate="2022-03-01T00:00:00" maxDate="2022-05-31T23:59:59" label="Custom Min and Max Dates" />Custom Locale
For instances where you need a specific locale, you can use the locale property to set it. The locale controls both the language and the date and time formats that are displayed.
The following example shows how to set the locale to Spanish (Spain).
js
<Mdx-datepicker locale="es-ES" label="Custom locale" />Validations
You can add validations by using Vuelidate value for v-model. Validations will be automatically parsed from v$
js
<Mdx-datepicker v-model="v$.variable" label="Datepicker" />Properties
v-model
| Description | You can pass simple variable to v-model as well as Vueliade v$.variable to enabling validations |
|---|---|
| Type | "Object" | "Boolean" | "null" |
| Required | true |
label
| Description | The visible label associated with the datepicker. |
|---|---|
| Type | String |
| Required | true |
disabled
| Description | If true, the user cannot interact with the datepicker. |
|---|---|
| Type | Boolean |
| Default | false |
size
| Description | Size of the datepicker |
|---|---|
| Type | "small" | "default" |
| Default | default |
type
| Description | Type of the datepicker |
|---|---|
| Type | "single" | "range" |
| Default | single |