DatePicker Date picker
Examples
Single date
By default, clicking on a date in the drop-down layer can select a date. You can configure the clearable prop to allow clearing the selected value and use the placeholder prop to configure the placeholder text when nothing is selected.
Clearable
Customizable placeholder
Supports v-model with value type being the native Date.
<template>
<article>
<section>
<h4>Clearable</h4>
<veui-date-picker
v-model="date"
clearable
/>
</section>
<section>
<h4>Customizable placeholder</h4>
<veui-date-picker
v-model="date2"
placeholder="Pick a day"
/>
</section>
</article>
</template>
<script>
import { DatePicker } from 'veui'
export default {
components: {
'veui-date-picker': DatePicker
},
data () {
return {
date: new Date(),
date2: null
}
}
}
</script>
<style lang="less" scoped>
section:not(:last-child) {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>
Date ranges
When configuring the range prop, you can select a date range in the drop-down layer.
Clearable
Customizable placeholder
Supports v-model, with value type being [Date, Date] when selecting a date range.
<template>
<article>
<section>
<h4>Clearable</h4>
<veui-date-picker
v-model="range"
range
clearable
/>
</section>
<section>
<h4>Customizable placeholder</h4>
<veui-date-picker
v-model="range"
class="custom"
range
placeholder="Pick a date range..."
/>
</section>
</article>
</template>
<script>
import { DatePicker } from 'veui'
export default {
components: {
'veui-date-picker': DatePicker
},
data () {
return {
range: null
}
}
}
</script>
<style lang="less" scoped>
section:not(:last-child) {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>
Shortcut options
When selecting a date range, you can provide shortcut options by configuring the shortcuts prop.
<template>
<article>
<veui-date-picker
v-model="range"
:shortcuts="shortcuts"
range
clearable
/>
</article>
</template>
<script>
import { DatePicker } from 'veui'
export default {
components: {
'veui-date-picker': DatePicker
},
data () {
return {
range: null,
shortcuts: [
{
label: '上个月',
from: {
startOf: 'month',
month: -1
},
to: {
startOf: 'month',
days: -1
}
},
{
label: '本月',
from: {
startOf: 'month'
},
to: 0
},
{
label: '本周',
from: {
startOf: 'week',
days: 0
},
to: 0
},
{
label: '最近7天',
from: -6,
to: 0
},
{
label: '今天',
to: 0
}
]
}
}
}
</script>
Disabled and read-only
Setting the disabled prop makes the component disabled.
Setting the readonly prop makes the component read-only.
Disabled
Readonly
<template>
<article>
<section>
<h4>Disabled</h4>
<veui-date-picker
v-model="date"
disabled
placeholder="disabled"
/>
</section>
<section>
<h4>Readonly</h4>
<veui-date-picker
v-model="date"
readonly
placeholder="readonly"
/>
</section>
</article>
</template>
<script>
import { DatePicker } from 'veui'
export default {
components: {
'veui-date-picker': DatePicker
},
data () {
return {
date: new Date()
}
}
}
</script>
<style lang="less" scoped>
section:not(:last-child) {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>
API
Props
| Name | Type | Default | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | string | 'date' | The type of the calendar, with available values of 'date' / 'month' / 'year', corresponding to the date / month / year view. | ||||||||||||
range | boolean | false | Whether to select a date range. | ||||||||||||
selected | Date | Array | - |
The value(s) of the selected date range, depending on the value of the
| ||||||||||||
today | Date | new Date() | The date for "today". | ||||||||||||
week-start | number | calendar.weekStart | The start of the week. Can be configured globally. | ||||||||||||
fill-month | boolean | true | When there is only one panel, whether to display non-current month dates in the current month panel. | ||||||||||||
date-class | string | Array | Object | function | {} | Custom HTML class for specific dates. When passed a non-function, the data format is all Vue-supported class expressions; when passed a function, the signature is function(Date): string | Array<string>|Object<string, boolean>, and the return value format is also all Vue-supported class expressions. | ||||||||||||
disabled-date | function(Date, Date=): boolean | () => false | Used to customize whether a specified date is disabled. The first parameter is the date to be tested for disableness. When in the process of selecting a range and a date has already been selected, it will be passed as the second parameter. | ||||||||||||
clearable | boolean | false | Whether the selected value can be cleared. | ||||||||||||
placeholder | string | range ? datepicker.rangePlaceholder : datepicker.placeholder | The placeholder text when nothing is selected. Can be configured globally for date ranges and single dates. | ||||||||||||
format | string | function(Date): string | 'yyyy-MM-dd' / 'yyyy-MM' / 'yyyy' | When passed a string, it represents the string expression used for formatting/parsing, with specific formats available in the date-fns documentation. When passed a function, custom formatting logic can be defined. | ||||||||||||
parse | function(string): Date | - | A function that customizes the parsing of input strings into Date objects. | ||||||||||||
shortcuts | Array<Object> | datepicker.shortcuts | A list of shortcut selection items in the customizable overlay when selecting a range, in the format
| ||||||||||||
expanded | boolean | false | .sync Whether the dropdown overlay is expanded. | ||||||||||||
disabled | boolean | false | Whether the component is disabled. | ||||||||||||
readonly | boolean | false | Whether the component is readonly. | ||||||||||||
Shortcut options
The from and to properties in the shortcuts list items have the same format, each used to set the calculation method for the start and end dates, respectively. The format is number | Object with a default value of 0.
When the type is
number, it represents the number of days offset from "today". For example,-1is equivalent to{ startOf: 'day', days: -1 }, which means "yesterday".When the type is
Object, the supported formats are:{startOf: string=, days: number=, weeks: number=, months: number=, }.Name Type Default Description startOfstring'day'The base date for the start. Supported values are 'day','week','month','quarter','year'.daynumber- The number of days offset. weeknumber- The number of weeks offset. monthnumber- The number of months offset. quarternumber- The number of quarters offset. yearnumber- The number of years offset.
The calculation method sets the base date according to startOf, and then adds the offset based on the other properties.
You can quickly set shortcut options by combining the following example with label.
[
{
label: 'Last month',
// The first day of this month is one month ago, i.e. the first day of last month
from: {
startOf: 'month',
month: -1
},
// One day before the first day of this month, i.e. the last day of last month
to: {
startOf: 'month',
days: -1
}
},
{
label: 'This month',
// The first day of this month
from: {
startOf: 'month'
},
// Today
to: 0
},
{
label: 'This week',
// The first day of this week, days can be omitted when it is 0
from: {
startOf: 'week',
days: 0
},
// Today
to: 0
},
{
label: 'Last 7 days',
// Six days ago
from: -6,
// Until today
to: 0
},
{
label: 'Today',
to: 0
}
]
Slots
| Name | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
date | The area inside the single day unit cell of the calendar in the overlay, which can be used to customize the content of the corresponding area for each day. Default content: The
|
Events
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
select | Triggered after selection is modified, callback parameter is | ||||||
selectstart | Triggered when the starting date is selected when selecting a date range, callback parameter (picking: Date), representing the selected starting date. | ||||||
selectprogress | Triggered when the end date marked by mouse or keyboard interaction is changed after the start date has been selected when selecting a date range. The callback parameter is
| ||||||
toggle | Triggered when the dropdown overlay expansion state is toggled, callback parameter is (expanded: boolean). expanded indicates whether the operation will trigger the dropdown overlay expansion or collapse. |
Configs
| Key | Type | Default | Description |
|---|---|---|---|
datepicker.shortcuts | Array | [] | Shortcut options configuration. |
datepicker.placeholder | string | @@datepicker.selectDate | Placeholder text when a single date has not been selected. |
datepicker.monthPlaceholder | string | @@datepicker.selectMonth | Placeholder text when a month has not been selected. |
datepicker.yearPlaceholder | string | @@datepicker.selectYear | Placeholder text when a year has not been selected. |
datepicker.rangePlaceholder | string | @@datepicker.selectRange | Placeholder text when a date range has not been selected. |
datepicker.monthRangePlaceholder | string | @@datepicker.selectMonthRange | Placeholder text when a month range has not been selected. |
datepicker.yearRangePlaceholder | string | @@datepicker.selectYearRange | Placeholder text when a year range has not been selected. |
Values starting with @@ refer to the corresponding field in the multi-language configuration.
Icons
| Name | Description |
|---|---|
calendar | The calendar icon. |
clear | The clear content icon. |