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
}

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	-