:::demo The measurement is determined by the `type` attribute. You can enable quick options via `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.
date-picker/enter-date
:::
## Other measurements
You can choose week, month, year or multiple dates by extending the standard date picker component.
:::demo
date-picker/other-measurements
:::
## Date Range
Picking a date range is supported.
:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute.
date-picker/date-range
:::
## Month Range
Picking a month range is supported.
:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute.
date-picker/month-range
:::
## Default Value
If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
If type is `daterange`, `default-value` sets the left side calendar.
:::demo
date-picker/default-value
:::
## Date Formats
Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
By default, the component accepts and emits a `Date` object.
Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-available-formats) of all available formats of Day.js.
:::warning
Pay attention to capitalization
:::
:::demo
date-picker/date-formats
:::
## Default time for start date and end date
When picking a date range, you can assign the time part for start date and end date.
:::demo By default, the time part of start date and end date are both `00:00:00`. Setting `default-time` can change their time respectively. It accepts an array of up to two Date objects. The first string sets the time for the start date, and the second for the end date.
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| default-time | optional, the time value to use when selecting date range | Date[] | Array with length 2, each item is a Date. The first item for the start date and then second item for the end date | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](/en-US/component/date-picker#date-formats) | — |
| id | same as `id` in native input | string / array(string) | String `id="my-date"` or array `:id="['my-range-start', 'my-range-end']"` for date range | - |
