DatePicker

By clicking the input box, you can select a date from a popup calendar.

Basic

The basic usage of DatePicker.

YearPicker

The basic usage of the YearPicker.

MonthPicker

The basic usage of the MonthPicker.

QuarterPicker

The basic usage of QuarterPicker.

WeekPicker

The basic usage of WeekPicker.

RangePicker

The basic usage of RangePicker.

Date range

Week range

Month range

Quarter range

Year range

DateTime range

<template>
  <p>Date range</p>
  <tu-range-picker allowClear @change="onChange" @select="onSelect" />

  <p>Week range</p>
  <tu-range-picker
    allowClear
    mode="week"
    @change="onChange"
    @select="onSelect"
  />

  <p>Month range</p>
  <tu-range-picker
    allowClear
    mode="month"
    @change="onChange"
    @select="onSelect"
  />

  <p>Quarter range</p>
  <tu-range-picker
    allowClear
    mode="quarter"
    @change="onChange"
    @select="onSelect"
  />

  <p>Year range</p>
  <tu-range-picker
    allowClear
    mode="year"
    @change="onChange"
    @select="onSelect"
  />

  <p>DateTime range</p>
  <tu-range-picker
    allowClear
    showTime
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
</template>

<script lang="ts" setup>
const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

<template>
  <p>Date range</p>
  <tu-range-picker allowClear @change="onChange" @select="onSelect" />

  <p>Week range</p>
  <tu-range-picker
    allowClear
    mode="week"
    @change="onChange"
    @select="onSelect"
  />

  <p>Month range</p>
  <tu-range-picker
    allowClear
    mode="month"
    @change="onChange"
    @select="onSelect"
  />

  <p>Quarter range</p>
  <tu-range-picker
    allowClear
    mode="quarter"
    @change="onChange"
    @select="onSelect"
  />

  <p>Year range</p>
  <tu-range-picker
    allowClear
    mode="year"
    @change="onChange"
    @select="onSelect"
  />

  <p>DateTime range</p>
  <tu-range-picker
    allowClear
    showTime
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
</template>

<script lang="ts" setup>
const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

DatePicker showTime

Use showTime to select a date with time.

Show hours & minutes

Show hours & minutes & seconds

Time range

<template>
  <p>Show hours & minutes</p>
  <tu-date-picker
    allowClear
    show-time
    format="YYYY-MM-DD HH:mm"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />

  <p>Show hours & minutes & seconds</p>
  <tu-date-picker
    allowClear
    show-time
    format="YYYY-MM-DD HH:mm:ss"
    :time-picker-props="{ defaultValue: '09:09:06' }"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />

  <p>Time range</p>
  <tu-range-picker
    allowClear
    show-time
    format="YYYY-MM-DD HH:mm"
    :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
</template>

<script lang="ts" setup>
const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

<template>
  <p>Show hours & minutes</p>
  <tu-date-picker
    allowClear
    show-time
    format="YYYY-MM-DD HH:mm"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />

  <p>Show hours & minutes & seconds</p>
  <tu-date-picker
    allowClear
    show-time
    format="YYYY-MM-DD HH:mm:ss"
    :time-picker-props="{ defaultValue: '09:09:06' }"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />

  <p>Time range</p>
  <tu-range-picker
    allowClear
    show-time
    format="YYYY-MM-DD HH:mm"
    :time-picker-props="{ defaultValue: ['00:00:00', '09:09:06'] }"
    @change="onChange"
    @select="onSelect"
    @ok="onOk"
  />
</template>

<script lang="ts" setup>
const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

DefaultValue

DatePicker has a default value.

Date

Format date

DateTime

Week

Month

Year

DateRange

MonthRange

<template>
  <p>Date</p>
  <tu-date-picker
    allowClear
    defaultValue="2024-01-01"
    @select="onSelect"
    @change="onChange"
  />

  <p>Format date</p>
  <tu-date-picker
    allowClear
    defaultValue="2024-01-01"
    :format="(value: Date) => `Format date： ${dayjs(value).format('YYYY-MM-DD')}`"
    @select="onSelect"
    @change="onChange"
  />

  <p>DateTime</p>
  <tu-date-picker
    allowClear
    showTime
    defaultValue="2024-01-01 10:01:01"
    @select="onSelect"
    @change="onChange"
  />

  <p>Week</p>
  <tu-week-picker
    allowClear
    :defaultValue="dayjs('2024-01-01')"
    @select="onSelect"
    @change="onChange"
  />

  <p>Month</p>
  <tu-month-picker
    allowClear
    defaultValue="2024-01"
    @select="onSelect"
    @change="onChange"
  />

  <p>Year</p>
  <tu-year-picker
    allowClear
    defaultValue="2024"
    @select="onSelect"
    @change="onChange"
  />

  <p>DateRange</p>
  <tu-range-picker
    allowClear
    showTime
    :defaultValue="['2024-01-01 01:01:01', '2024-02-14 02:02:02']"
    @select="onSelect"
    @change="onChange"
  />

  <p>MonthRange</p>
  <tu-range-picker
    allowClear
    mode="month"
    :defaultValue="['2024-01', '2025-01']"
    @select="onSelect"
    @change="onChange"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

<template>
  <p>Date</p>
  <tu-date-picker
    allowClear
    defaultValue="2024-01-01"
    @select="onSelect"
    @change="onChange"
  />

  <p>Format date</p>
  <tu-date-picker
    allowClear
    defaultValue="2024-01-01"
    :format="(value: Date) => `Format date： ${dayjs(value).format('YYYY-MM-DD')}`"
    @select="onSelect"
    @change="onChange"
  />

  <p>DateTime</p>
  <tu-date-picker
    allowClear
    showTime
    defaultValue="2024-01-01 10:01:01"
    @select="onSelect"
    @change="onChange"
  />

  <p>Week</p>
  <tu-week-picker
    allowClear
    :defaultValue="dayjs('2024-01-01')"
    @select="onSelect"
    @change="onChange"
  />

  <p>Month</p>
  <tu-month-picker
    allowClear
    defaultValue="2024-01"
    @select="onSelect"
    @change="onChange"
  />

  <p>Year</p>
  <tu-year-picker
    allowClear
    defaultValue="2024"
    @select="onSelect"
    @change="onChange"
  />

  <p>DateRange</p>
  <tu-range-picker
    allowClear
    showTime
    :defaultValue="['2024-01-01 01:01:01', '2024-02-14 02:02:02']"
    @select="onSelect"
    @change="onChange"
  />

  <p>MonthRange</p>
  <tu-range-picker
    allowClear
    mode="month"
    :defaultValue="['2024-01', '2025-01']"
    @select="onSelect"
    @change="onChange"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const onChange = (dateString: string, date: Date) => {
  console.log('onChange', dateString, date);
};

const onSelect = (dateString: string, date: Date) => {
  console.log('onSelect', dateString, date);
};

const onOk = (dateString: string, date: Date) => {
  console.log('onOk', dateString, date);
};
</script>

Disabled date

Use disabledDate to disable specified dates. And use disabledTime to disable time, which needs to be used with showTime.

Disabled date

Disabled dateRange

Disabled dateTime

Disabled dateTime range

<template>
  <p>Disabled date</p>
  <tu-date-picker
    allowClear
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
  />

  <p>Disabled dateRange</p>
  <tu-range-picker
    allowClear
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
  />

  <p>Disabled dateTime</p>
  <tu-date-picker
    allowClear
    show-time
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
    :disabledTime="
      () => {
        return {
          disabledHours: () => range(6, 24),
          disabledMinutes: () => range(30, 60),
          disabledSeconds: () => range(30, 60)
        };
      }
    "
  />

  <p>Disabled dateTime range</p>
  <tu-range-picker
    allowClear
    show-time
    :timePickerProps="{ hideDisabledOptions: true }"
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
    :disabledTime="
      (date: Date, type: String) => {
        return {
          disabledHours: () => (type === 'start' ? range(0, 6) : range(6, 24)),
          disabledMinutes: () => (type === 'end' ? range(0, 30) : [31, 60]),
          disabledSeconds: () => range(30, 60)
        };
      }
    "
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const range = (start: number, end: number) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};
</script>

<template>
  <p>Disabled date</p>
  <tu-date-picker
    allowClear
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
  />

  <p>Disabled dateRange</p>
  <tu-range-picker
    allowClear
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
  />

  <p>Disabled dateTime</p>
  <tu-date-picker
    allowClear
    show-time
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
    :disabledTime="
      () => {
        return {
          disabledHours: () => range(6, 24),
          disabledMinutes: () => range(30, 60),
          disabledSeconds: () => range(30, 60)
        };
      }
    "
  />

  <p>Disabled dateTime range</p>
  <tu-range-picker
    allowClear
    show-time
    :timePickerProps="{ hideDisabledOptions: true }"
    :disabledDate="(current: Date) => dayjs(current).isBefore(dayjs())"
    :disabledTime="
      (date: Date, type: String) => {
        return {
          disabledHours: () => (type === 'start' ? range(0, 6) : range(6, 24)),
          disabledMinutes: () => (type === 'end' ? range(0, 30) : [31, 60]),
          disabledSeconds: () => range(30, 60)
        };
      }
    "
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const range = (start: number, end: number) => {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
};
</script>

Shortcuts

Use shortcuts to preset time for quick selection.

Date time

Month

Date time range

Month range

<template>
  <p>Date time</p>
  <tu-date-picker
    allowClear
    show-time
    :shortcuts="[
      {
        label: '2 hours later',
        value: () => dayjs().add(2, 'hour')
      },
      {
        label: 'a week later',
        value: () => dayjs().add(1, 'week')
      },
      {
        label: 'a month later',
        value: () => dayjs().add(1, 'month')
      }
    ]"
  />

  <p>Month</p>
  <tu-month-picker
    allowClear
    :shortcuts="[
      {
        label: 'last month',
        value: () => dayjs().subtract(1, 'month')
      },
      {
        label: 'six months later',
        value: () => dayjs().add(6, 'month')
      },
      {
        label: 'two years later',
        value: () => dayjs().add(2, 'year')
      }
    ]"
  />

  <p>Date time range</p>
  <tu-range-picker
    allowClear
    :shortcuts="[
      {
        label: 'next 7 days',
        value: () => [dayjs(), dayjs().add(1, 'week')]
      },
      {
        label: 'next 30 days',
        value: () => [dayjs(), dayjs().add(1, 'month')]
      },
      {
        label: 'next 365 days',
        value: () => [dayjs(), dayjs().add(1, 'year')]
      }
    ]"
  />

  <p>Month range</p>
  <tu-range-picker
    allowClear
    mode="month"
    :shortcuts="[
      {
        label: 'next 6 months',
        value: () => [dayjs(), dayjs().add(6, 'month')]
      },
      {
        label: 'next 12 months',
        value: () => [dayjs(), dayjs().add(1, 'year')]
      },
      {
        label: 'next 10 years',
        value: () => [dayjs(), dayjs().add(10, 'year')]
      }
    ]"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
</script>

<template>
  <p>Date time</p>
  <tu-date-picker
    allowClear
    show-time
    :shortcuts="[
      {
        label: '2 hours later',
        value: () => dayjs().add(2, 'hour')
      },
      {
        label: 'a week later',
        value: () => dayjs().add(1, 'week')
      },
      {
        label: 'a month later',
        value: () => dayjs().add(1, 'month')
      }
    ]"
  />

  <p>Month</p>
  <tu-month-picker
    allowClear
    :shortcuts="[
      {
        label: 'last month',
        value: () => dayjs().subtract(1, 'month')
      },
      {
        label: 'six months later',
        value: () => dayjs().add(6, 'month')
      },
      {
        label: 'two years later',
        value: () => dayjs().add(2, 'year')
      }
    ]"
  />

  <p>Date time range</p>
  <tu-range-picker
    allowClear
    :shortcuts="[
      {
        label: 'next 7 days',
        value: () => [dayjs(), dayjs().add(1, 'week')]
      },
      {
        label: 'next 30 days',
        value: () => [dayjs(), dayjs().add(1, 'month')]
      },
      {
        label: 'next 365 days',
        value: () => [dayjs(), dayjs().add(1, 'year')]
      }
    ]"
  />

  <p>Month range</p>
  <tu-range-picker
    allowClear
    mode="month"
    :shortcuts="[
      {
        label: 'next 6 months',
        value: () => [dayjs(), dayjs().add(6, 'month')]
      },
      {
        label: 'next 12 months',
        value: () => [dayjs(), dayjs().add(1, 'year')]
      },
      {
        label: 'next 10 years',
        value: () => [dayjs(), dayjs().add(10, 'year')]
      }
    ]"
  />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
</script>

Custom shortcuts position

Use shortcutsPosition to place the shortcuts to the left, right or bottom.

Left

Right

<template>
  <p>Left</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-date-picker
        allowClear
        shortcuts-position="left"
        :shortcuts="shortcuts"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-range-picker
        allowClear
        shortcuts-position="left"
        :shortcuts="rangeShortcuts"
      />
    </tu-col>
  </tu-row>

  <p>Right</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-date-picker
        allowClear
        shortcuts-position="right"
        :shortcuts="shortcuts"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-range-picker
        allowClear
        shortcuts-position="right"
        :shortcuts="rangeShortcuts"
      />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const shortcuts = [
  {
    label: 'yesterday',
    value: () => dayjs().subtract(1, 'day')
  },
  {
    label: 'today',
    value: () => dayjs()
  },
  {
    label: 'a week later',
    value: () => dayjs().add(1, 'week')
  },
  {
    label: 'a month later',
    value: () => dayjs().add(1, 'month')
  },
  {
    label: '2 months later',
    value: () => dayjs().add(2, 'month')
  }
];

const rangeShortcuts = [
  {
    label: 'next 2 days',
    value: () => [dayjs(), dayjs().add(2, 'day')]
  },
  {
    label: 'next 7 days',
    value: () => [dayjs(), dayjs().add(1, 'month')]
  },
  {
    label: 'next 30 days',
    value: () => [dayjs(), dayjs().add(1, 'month')]
  },
  {
    label: 'next 6 months',
    value: () => [dayjs(), dayjs().add(6, 'month')]
  },
  {
    label: 'next 12 months',
    value: () => [dayjs(), dayjs().add(1, 'year')]
  },
  {
    label: 'next 10 years',
    value: () => [dayjs(), dayjs().add(10, 'year')]
  }
];
</script>

<template>
  <p>Left</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-date-picker
        allowClear
        shortcuts-position="left"
        :shortcuts="shortcuts"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-range-picker
        allowClear
        shortcuts-position="left"
        :shortcuts="rangeShortcuts"
      />
    </tu-col>
  </tu-row>

  <p>Right</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-date-picker
        allowClear
        shortcuts-position="right"
        :shortcuts="shortcuts"
      />
    </tu-col>
    <tu-col :span="12">
      <tu-range-picker
        allowClear
        shortcuts-position="right"
        :shortcuts="rangeShortcuts"
      />
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';

const shortcuts = [
  {
    label: 'yesterday',
    value: () => dayjs().subtract(1, 'day')
  },
  {
    label: 'today',
    value: () => dayjs()
  },
  {
    label: 'a week later',
    value: () => dayjs().add(1, 'week')
  },
  {
    label: 'a month later',
    value: () => dayjs().add(1, 'month')
  },
  {
    label: '2 months later',
    value: () => dayjs().add(2, 'month')
  }
];

const rangeShortcuts = [
  {
    label: 'next 2 days',
    value: () => [dayjs(), dayjs().add(2, 'day')]
  },
  {
    label: 'next 7 days',
    value: () => [dayjs(), dayjs().add(1, 'month')]
  },
  {
    label: 'next 30 days',
    value: () => [dayjs(), dayjs().add(1, 'month')]
  },
  {
    label: 'next 6 months',
    value: () => [dayjs(), dayjs().add(6, 'month')]
  },
  {
    label: 'next 12 months',
    value: () => [dayjs(), dayjs().add(1, 'year')]
  },
  {
    label: 'next 10 years',
    value: () => [dayjs(), dayjs().add(10, 'year')]
  }
];
</script>

Dynamic control range

According to the selected value to control the selected range, use onSelect and disabledDate.

Select the range of 7 days

Add an extra footer to meet the needs of some customized information.

Disabled

Disabled.

Customize cell

Use the named slot cell to customize the date cell.

V-model

Support two-way binding through v-model

Date value

DateRange value

Customize trigger element

Customize trigger element.

Panel Only

Only use panel, hide input selection.

Sizes

Besides default size, tu-input component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

MiniSmallMediumLarge

Date

DateTime

DateRange

Common API

Common Attributes

Name	Description	Type	Default
locale	Internationalization configuration, used to cover the locale file in the datePicker field	`Record`	-
hide-trigger	There is no trigger element, only the selection panel is displayed	`Boolean`	false
allow-clear	Whether to allow clear	`Boolean`	true
readonly	Whether it is read-only	`Boolean`	false
size	The size of the date picker	`String`	medium
shortcuts	Quick selection of preset time range	`Array`	[]
shortcuts-position	The position of the preset range on the panel, which is placed at the bottom by default, and the side is generally used for scenes with a large number of preset times	`String`	bottom
position	The position of the pop-up box	`String`	bl
popup-visible	Control the open or closed state of the pop-up box	`Boolean`	-
default-popup-visible	The default pop-up box is open or closed	`Boolean`	false
trigger-props	You can pass in the parameters of the Trigger component	`TriggerProps`	-
unmount-on-close	Whether to destroy the DOM structure when hiding	`Boolean`	false
placeholder	Prompt	`String`	-
disabled	Whether to disable	`Boolean`	false
disabled-date	Unselectable date	`Function`	-
disabled-time	Unselectable time	`Function`	-
picker-value(v-model)	Date displayed on the panel	`DateStringNumber`	-
default-picker-value	The date displayed on the panel by default	`DateStringNumber`	-
popup-container	Mount container for pop-up box	`StringHTMLElementNullUndefined`	-
value-format	The format of the value, valid for value / defaultValue / pickerValue / defaultPickerValue and the return value in the event, supports setting as timestamp, Date and string (refer to String parsing format ). If not specified, it will be formatted as a string, in the same format as format.	`TimestampDateString`	-
preview-shortcut	Whether to preview the result of the shortcut	`Boolean`	true
show-confirm-btn	Whether to show the confirm button, always show when showTime is true.	`Boolean`	false
disabled-input	Whether input is disabled with the keyboard.	`Boolean`	false
abbreviation	Whether to enable abbreviation	`Boolean`	true

Common Events

Name	Description	Type
change	The component value changes	`Function`
select	The selected date has changed but the component value has not changed	`Function`
popup-visible-change	Open or close the pop-up box	`Function`
ok	Click the confirm button	`Function`
clear	Click the clear button	`Function`
select-shortcut	Click on the shortcut option	`Function`
picker-value-change	Panel date change	`Function`

Date-Picker Attributes

Name	Description
prefix	Input box prefix
suffix-icon	Input box suffix icon
icon-next-double	Double arrow page backward icon
icon-prev-double	Double arrow page forward icon
icon-next	Single arrow page backward icon
icon-prev	Single arrow page forward icon
cell	Customize the contents of the date cell
extra	Extra footer

Week-Picker Attributes

Name	Description	Type	Default
v-model	Value	`DateStringNumber`	-
default-value	Default value	`DateStringNumber`	-
format	Display the format of the date, refer to String Parsing Format	`String`	gggg-wo
value-format	The format of the value, valid for value / defaultValue / pickerValue / defaultPickerValue and the return value in the event, supports setting as timestamp, Date and string(refer toString parsing format).	`String`	YYYY-MM-DD
day-start-of-week	The first day of the week starts on the day of the week, 0-Sunday, 1-Monday, and so on.	`Number`	0

Quarter-Picker Attributes

Name	Description	Type	Default
v-model	Value	`DateStringNumber`	-
default-value	Default value	`DateStringNumber`	-
format	Display the format of the date, refer to String parsing format	`String`	YYYY-MM
value-format	The format of the value, valid for value / defaultValue / pickerValue / defaultPickerValue and the return value in the event, supports setting as timestamp, Date and string (refer to String parsing format).	`String`	YYYY-MM

Month-Picker Attributes

Name	Description	Type	Default
model-value / v-model	Value	`DateStringNumber`	-
default-value	Default value	`DateStringNumber`	-
format	Display the format of the date, refer to String parsing format	`String`	YYYY-MM

Year-Picker Attributes

Name	Description	Type	Default
model-value / v-model	Value	`DateStringNumber`	-
default-value	Default value	`DateStringNumber`	-
format	Display the format of the date, refer to String parsing format	`String`	YYYY

Range-Picker Attributes

Name	Description	Type	Default
mode	Type of range selector	`String`	date
v-model	Value	`Array`	-
default-value	Default value	`Array`	-
picker-value	The date displayed in the default panel	`Array`	-
default-picker-value	Date displayed on the panel	`Array`	-
disabled	Whether to disable	`BooleanArray`	false
day-start-of-week	The first day of the week starts on the day of the week, 0-Sunday, 1-Monday, and so on.	`Number`	0
format	Display the format of the date, refer to String parsing format	`String`	-
value-format	The format of the value, valid for `value` `defaultValue` `pickerValue` `defaultPickerValue` and the return value in the event, supports setting as timestamp, Date and string (refer to String parsing format). if not specified, it will be formatted as a string, in the same format as `format`.	`TimestampDateString`	-
show-time	Whether to increase time selection	`Boolean`	false
time-picker-props	Time display parameters	`Object`	-
placeholder	Prompt	`Array`	-
disabled-date	Unselectable date	`Function`	-
disabled-time	Unselectable time	`Function`	-
separator	The segmentation symbol in the input box of the range selector	`String`	-
exchange-time	Whether the time will be exchanged, by default time will affect and participate in the ordering of start and end values, if you want to fix the time order, you can turn it off.	`String`	true
disabled-input	Whether input is disabled with the keyboard.	`Boolean`	false
abbreviation	Whether to enable abbreviation	`Boolean`	true

Range-Picker Events

Name	Description	Type
change	The component value changes.	`Function`
select	The selected date has changed but the component value has not changed.	`Function`
popup-visible-change	Open or close the pop-up box	`Function`
ok	Click the confirm button	`Function`
clear	Click the clear button	`Function`
select-shortcut	Click on the shortcut option	`Function`
picker-value-change	Panel date change	`Function`

ShortcutType

Name	Description	Type	Default
label	The content of shortcut	`StringNumberFunction`	-
value	The value of shortcut	`DateStringNumberArrayFunction`	-
format	The format use to parse value, refer to String parsing format	`String`	-

String parsing format

Format	Output	Description
YY	21	Two-digit year
YYYY	2021	Four-digit year
M	1-12	Month, starting from 1
MM	01-12	Month, two digits
MMM	Jan-Dec	Abbreviated month name
MMMM	January-December	Full month name
D	1-31	Day of the month
DD	01-31	Day of the month, two digits
d	0-6	Day of the week, Sunday is 0
dd	Su-Sa	The shortest name of the day of the week
ddd	Sun-Sat	Abbreviated name of the day of the week
dddd	Sunday-Saturday	The name of the day of the week
H	0-23	Hour
HH	00-23	Hour, two digits
h	1-12	Hour, 12-hour clock
hh	01-12	Hour, 12-hour clock, two digits
m	0-59	Minute
mm	00-59	Minute, two digits
s	0-59	Second
ss	00-59	Second, two digits
S	0-9	Hundreds of milliseconds, one digits
SS	00-99	Tens of milliseconds, two digits
SSS	000-999	Millisecond, three digits
Z	-5:00	UTC offset
ZZ	-0500	UTC offset, add 0 in front of the number
A	AM PM	-
a	am pm	-
Do	1st... 3st	Day of month with serial number
X	1410715640.579	Unix timestamp
x	1410715640579	Unix millisecond timestamp

DatePicker ​

Basic ​

YearPicker ​

MonthPicker ​

QuarterPicker ​

WeekPicker ​

RangePicker ​

DatePicker showTime ​

DefaultValue ​

Disabled date ​

Shortcuts ​

Custom shortcuts position ​

Dynamic control range ​

Extra footer ​

Disabled ​

Customize cell ​

V-model ​

Customize trigger element ​

Panel Only ​

Sizes ​

Common API ​

Common Attributes ​

Common Events ​

Date-Picker Attributes ​

Week-Picker Attributes ​

Quarter-Picker Attributes ​

Month-Picker Attributes ​

Year-Picker Attributes ​

Range-Picker Attributes ​

Range-Picker Events ​

ShortcutType ​

String parsing format ​

DatePicker

Basic

YearPicker

MonthPicker

QuarterPicker

WeekPicker

RangePicker

DatePicker showTime

DefaultValue

Disabled date

Shortcuts

Custom shortcuts position

Dynamic control range

Extra footer

Disabled

Customize cell

V-model

Customize trigger element

Panel Only

Sizes

Common API

Common Attributes

Common Events

Date-Picker Attributes

Week-Picker Attributes

Quarter-Picker Attributes

Month-Picker Attributes

Year-Picker Attributes

Range-Picker Attributes

Range-Picker Events

ShortcutType

String parsing format