DatePicker date selection
introduce
Date picker, used to select year, month, day, usually used in conjunction with the popup layer (/popup) component.
Code Demo
Basic usage
Bind the currently selected date through v-model
, and set the optional time range through min-date
and max-date
attributes.
<z-date-picker
v-model="currentDate"
title="Select date"
:min-date="minDate"
:max-date="maxDate"
/>
const currentDate = ref(['2021', '01', '01'])
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 5, 1)
Option type
The type of options can be controlled through the columns-type
attribute, which supports permutations and combinations of year
, month
and day
in any order.
for example:
- Pass
['year']
to select the year individually. - Pass
['month']
to select months individually. - Pass in
['year', 'month']
to select year and month. - Pass in
['month', 'day']
to select month and day.
<z-date-picker
v-model="currentDate"
title="Select year and month"
:min-date="minDate"
:max-date="maxDate"
:columns-type="columnsType"
/>
import { ref } from 'vue';
const currentDate = ref(['2021', '01']);
const columnsType = ['year', 'month'];
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 5, 1)
Format options
By passing in the formatter
function, the option text can be formatted.
<z-date-picker
v-model="currentDateFormatter"
title="Select year and month"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
:columns-type="columnsType"
/>
import { ref } from 'vue';
const currentDateFormatter = ref(['2021', '01'])
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 5, 1)
const columnsType = ['year', 'month']
const formatter = (type: any, option: any) => {
if (type === 'year') {
option.text += 'year'
}
if (type === 'month') {
option.text += 'month'
}
return option
}
Filter options
By passing in the filter
function, the option array can be filtered to implement custom option intervals.
<z-date-picker
v-model="currentDateFilter"
title="Select year and month"
:filter="filter"
:min-date="minDate"
:max-date="maxDate"
:columns-type="columnsType"
/>
import { ref } from 'vue';
const filter = (type: string, options: any) => {
if (type === 'month') {
return options.filter((option: any) => Number(option.value) % 6 === 0)
}
return options
}
API
Props
Parameters | Description | Type | Default value |
---|---|---|---|
v-model | Currently selected date | string | [] |
columns-type | Option type, array of year , month and day | string | ['year', 'month', 'day'] |
min-date | Optional minimum time, accurate to day | Date | - |
max-date | Optional maximum time, accurate to day | Date | - |
title | Top column title | string | '' |
confirm-button-text | Confirm button text | string | Confirm |
cancel-button-text | Cancel button text | string | Cancel |
show-toolbar | Whether to display the top bar | boolean | true |
loading | whether to display loading status | boolean | false |
readonly | Whether it is in read-only state. Options cannot be switched in read-only state | boolean | false |
filter | option filter function | (type: string, options: PickerOption) => PickerOption | - |
formatter | option formatting function | (type: string, option: PickerOption) => PickerOption | - |
option-height | Option height, supports rpx unit, default px | number | string | 44 |
visible-option-num | Number of visible options | number | string | 6 |
swipe-duration | The duration of inertial scrolling during fast swiping, unit ms | number | string | 1000 |
Events
Event name | Description | Callback parameters |
---|---|---|
confirm | Triggered when the completion button is clicked | { selectedValues, selectedOptions, selectedIndexes } |
cancel | Triggered when the cancel button is clicked | { selectedValues, selectedOptions, selectedIndexes } |
change | Triggered when options change | { selectedValues, selectedOptions, selectedIndexes, columnIndex } |
Slots
Name | Description | Parameters |
---|---|---|
toolbar | Customize the entire top bar content | - |
title | Custom title content | - |
confirm | Customize the confirmation button content | - |
cancel | Customize cancel button content | - |
option | Custom option content | option: PickerOption, index: number |
columns-top | Customize the content above the options | - |
columns-bottom | Customize the content below the options | - |