DatePicker

Basic Usage

iDatePicker displays the current week number on the left side.

The default date format is YYYY-MM-DD. The date format can be specified using the format attribute, and the date value can be bound using the v-model attribute.

Date Range Picker

Set the type to daterange to select a date range. In this use case, you can quickly select a date range for a week by clicking the specific week number on the left.

API

Attributes

Name	is Required	Description	Type	Default Value
modelValue	是	bind date	string	-
type	否	type of picker	enum	'date'

Events

Name	Description	Parameters
panelChange	triggers when the navigation button click.	date: Date | [Date, Date]
change	triggers when user confirms the value or click outside	val: typeof v-model
blur	triggers when Input blurs	void
focus	triggers when Input focuses	void
calendarChange	triggers when the calendar selected date is changed. Only for range	val: [Date, null | Date]
visibleChange	triggers when the DatePicker's dropdown appears/disappears	visibility: boolean
kwClick	triggers when click week number	{selectYear: String, selectMonth: String, kw: String }