DatePickerPanel ^(beta)
DatePickerPanel is the core component of DatePicker.
Enter Date
Basic date picker measured by 'day'.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
"use client";import { useEffect, useRef, useState, type ReactNode } from "react";import { ElCard } from "@/components/element-plus/card";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePickerPanel } from "@/components/element-plus/date-picker-panel";import { ElDivider } from "@/components/element-plus/divider";import { ElSelect } from "@/components/element-plus/select";import { ElSwitch } from "@/components/element-plus/switch";import type { DateModelValue, DatePickerType,} from "@/components/element-plus/date-picker-panel";const DATE_PICKER_TYPES: DatePickerType[] = [ "year", "years", "month", "months", "date", "dates", "week", "datetime", "datetimerange", "daterange", "monthrange", "quarterrange", "yearrange",];function DatePickerPanelBasicDemo() { const [value, setValue] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", justifyContent: "center" }}> <ElDatePickerPanel value={value} onChange={setValue} /> </div> );}function DatePickerPanelAllTypesDemo() { const [type, setType] = useState<DatePickerType>("date"); const [date, setDate] = useState<DateModelValue>(null); return ( <div> <div style={{ display: "flex", gap: "16px" }}> <div style={{ display: "flex", flexDirection: "column", flexBasis: 150, gap: 4, }} > <span>Type:</span> <ElSelect value={type} options={DATE_PICKER_TYPES.map((item) => ({ value: item, label: item, }))} onChange={(next) => { setType(next as DatePickerType); setDate(null); }} /> </div> </div> <ElDivider /> <div style={{ display: "flex", justifyContent: "center" }}> <ElDatePickerPanel value={date} onChange={setDate} type={type} /> </div> </div> );}function DatePickerPanelBorderDemo() { const [value, setValue] = useState<DateModelValue>(null); const [isNarrow, setIsNarrow] = useState(true); const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const container = containerRef.current; if (!container) return; const observer = new ResizeObserver(([entry]) => { setIsNarrow(entry.contentRect.width < 815); }); observer.observe(container); return () => observer.disconnect(); }, []); return ( <div ref={containerRef}> <div style={{ textAlign: "center" }}>No border:</div> <ElDivider /> <div style={{ display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "center", }} > <div style={{ padding: 20 }}> <ElDatePickerPanel value={value} onChange={setValue} border={false} /> </div> <ElDivider style={{ height: "auto" }} direction={isNarrow ? "horizontal" : "vertical"} /> <ElCard> <ElDatePickerPanel value={value} onChange={setValue} border={false} /> </ElCard> </div> </div> );}function DatePickerPanelDisabledDemo() { const [value, setValue] = useState<DateModelValue>(null); const [disabled, setDisabled] = useState(true); return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", }} > <ElSwitch checked={disabled} onCheckedChange={setDisabled} activeText="Disabled" inactiveText="Enabled" /> <ElDatePickerPanel value={value} onChange={setValue} disabled={disabled} /> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DatePickerPanelBasic = withEn(DatePickerPanelBasicDemo);export const DatePickerPanelAllTypes = withEn(DatePickerPanelAllTypesDemo);export const DatePickerPanelBorder = withEn(DatePickerPanelBorderDemo);export const DatePickerPanelDisabled = withEn(DatePickerPanelDisabledDemo);
Border
By default the date-picker-panel is bordered but in some case you don't want it.
For example DatePicker don't inherit border.
No border:
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
"use client";import { useEffect, useRef, useState, type ReactNode } from "react";import { ElCard } from "@/components/element-plus/card";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePickerPanel } from "@/components/element-plus/date-picker-panel";import { ElDivider } from "@/components/element-plus/divider";import { ElSelect } from "@/components/element-plus/select";import { ElSwitch } from "@/components/element-plus/switch";import type { DateModelValue, DatePickerType,} from "@/components/element-plus/date-picker-panel";const DATE_PICKER_TYPES: DatePickerType[] = [ "year", "years", "month", "months", "date", "dates", "week", "datetime", "datetimerange", "daterange", "monthrange", "quarterrange", "yearrange",];function DatePickerPanelBasicDemo() { const [value, setValue] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", justifyContent: "center" }}> <ElDatePickerPanel value={value} onChange={setValue} /> </div> );}function DatePickerPanelAllTypesDemo() { const [type, setType] = useState<DatePickerType>("date"); const [date, setDate] = useState<DateModelValue>(null); return ( <div> <div style={{ display: "flex", gap: "16px" }}> <div style={{ display: "flex", flexDirection: "column", flexBasis: 150, gap: 4, }} > <span>Type:</span> <ElSelect value={type} options={DATE_PICKER_TYPES.map((item) => ({ value: item, label: item, }))} onChange={(next) => { setType(next as DatePickerType); setDate(null); }} /> </div> </div> <ElDivider /> <div style={{ display: "flex", justifyContent: "center" }}> <ElDatePickerPanel value={date} onChange={setDate} type={type} /> </div> </div> );}function DatePickerPanelBorderDemo() { const [value, setValue] = useState<DateModelValue>(null); const [isNarrow, setIsNarrow] = useState(true); const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const container = containerRef.current; if (!container) return; const observer = new ResizeObserver(([entry]) => { setIsNarrow(entry.contentRect.width < 815); }); observer.observe(container); return () => observer.disconnect(); }, []); return ( <div ref={containerRef}> <div style={{ textAlign: "center" }}>No border:</div> <ElDivider /> <div style={{ display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "center", }} > <div style={{ padding: 20 }}> <ElDatePickerPanel value={value} onChange={setValue} border={false} /> </div> <ElDivider style={{ height: "auto" }} direction={isNarrow ? "horizontal" : "vertical"} /> <ElCard> <ElDatePickerPanel value={value} onChange={setValue} border={false} /> </ElCard> </div> </div> );}function DatePickerPanelDisabledDemo() { const [value, setValue] = useState<DateModelValue>(null); const [disabled, setDisabled] = useState(true); return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", }} > <ElSwitch checked={disabled} onCheckedChange={setDisabled} activeText="Disabled" inactiveText="Enabled" /> <ElDatePickerPanel value={value} onChange={setValue} disabled={disabled} /> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DatePickerPanelBasic = withEn(DatePickerPanelBasicDemo);export const DatePickerPanelAllTypes = withEn(DatePickerPanelAllTypesDemo);export const DatePickerPanelBorder = withEn(DatePickerPanelBorderDemo);export const DatePickerPanelDisabled = withEn(DatePickerPanelDisabledDemo);
Disabled
The disabled attribute determines if the date picker is fully disabled.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
"use client";import { useEffect, useRef, useState, type ReactNode } from "react";import { ElCard } from "@/components/element-plus/card";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePickerPanel } from "@/components/element-plus/date-picker-panel";import { ElDivider } from "@/components/element-plus/divider";import { ElSelect } from "@/components/element-plus/select";import { ElSwitch } from "@/components/element-plus/switch";import type { DateModelValue, DatePickerType,} from "@/components/element-plus/date-picker-panel";const DATE_PICKER_TYPES: DatePickerType[] = [ "year", "years", "month", "months", "date", "dates", "week", "datetime", "datetimerange", "daterange", "monthrange", "quarterrange", "yearrange",];function DatePickerPanelBasicDemo() { const [value, setValue] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", justifyContent: "center" }}> <ElDatePickerPanel value={value} onChange={setValue} /> </div> );}function DatePickerPanelAllTypesDemo() { const [type, setType] = useState<DatePickerType>("date"); const [date, setDate] = useState<DateModelValue>(null); return ( <div> <div style={{ display: "flex", gap: "16px" }}> <div style={{ display: "flex", flexDirection: "column", flexBasis: 150, gap: 4, }} > <span>Type:</span> <ElSelect value={type} options={DATE_PICKER_TYPES.map((item) => ({ value: item, label: item, }))} onChange={(next) => { setType(next as DatePickerType); setDate(null); }} /> </div> </div> <ElDivider /> <div style={{ display: "flex", justifyContent: "center" }}> <ElDatePickerPanel value={date} onChange={setDate} type={type} /> </div> </div> );}function DatePickerPanelBorderDemo() { const [value, setValue] = useState<DateModelValue>(null); const [isNarrow, setIsNarrow] = useState(true); const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const container = containerRef.current; if (!container) return; const observer = new ResizeObserver(([entry]) => { setIsNarrow(entry.contentRect.width < 815); }); observer.observe(container); return () => observer.disconnect(); }, []); return ( <div ref={containerRef}> <div style={{ textAlign: "center" }}>No border:</div> <ElDivider /> <div style={{ display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "center", }} > <div style={{ padding: 20 }}> <ElDatePickerPanel value={value} onChange={setValue} border={false} /> </div> <ElDivider style={{ height: "auto" }} direction={isNarrow ? "horizontal" : "vertical"} /> <ElCard> <ElDatePickerPanel value={value} onChange={setValue} border={false} /> </ElCard> </div> </div> );}function DatePickerPanelDisabledDemo() { const [value, setValue] = useState<DateModelValue>(null); const [disabled, setDisabled] = useState(true); return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", }} > <ElSwitch checked={disabled} onCheckedChange={setDisabled} activeText="Disabled" inactiveText="Enabled" /> <ElDatePickerPanel value={value} onChange={setValue} disabled={disabled} /> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DatePickerPanelBasic = withEn(DatePickerPanelBasicDemo);export const DatePickerPanelAllTypes = withEn(DatePickerPanelAllTypesDemo);export const DatePickerPanelBorder = withEn(DatePickerPanelBorderDemo);export const DatePickerPanelDisabled = withEn(DatePickerPanelDisabledDemo);
Types
The measurement is determined by the type attribute.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
"use client";import { useEffect, useRef, useState, type ReactNode } from "react";import { ElCard } from "@/components/element-plus/card";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePickerPanel } from "@/components/element-plus/date-picker-panel";import { ElDivider } from "@/components/element-plus/divider";import { ElSelect } from "@/components/element-plus/select";import { ElSwitch } from "@/components/element-plus/switch";import type { DateModelValue, DatePickerType,} from "@/components/element-plus/date-picker-panel";const DATE_PICKER_TYPES: DatePickerType[] = [ "year", "years", "month", "months", "date", "dates", "week", "datetime", "datetimerange", "daterange", "monthrange", "quarterrange", "yearrange",];function DatePickerPanelBasicDemo() { const [value, setValue] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", justifyContent: "center" }}> <ElDatePickerPanel value={value} onChange={setValue} /> </div> );}function DatePickerPanelAllTypesDemo() { const [type, setType] = useState<DatePickerType>("date"); const [date, setDate] = useState<DateModelValue>(null); return ( <div> <div style={{ display: "flex", gap: "16px" }}> <div style={{ display: "flex", flexDirection: "column", flexBasis: 150, gap: 4, }} > <span>Type:</span> <ElSelect value={type} options={DATE_PICKER_TYPES.map((item) => ({ value: item, label: item, }))} onChange={(next) => { setType(next as DatePickerType); setDate(null); }} /> </div> </div> <ElDivider /> <div style={{ display: "flex", justifyContent: "center" }}> <ElDatePickerPanel value={date} onChange={setDate} type={type} /> </div> </div> );}function DatePickerPanelBorderDemo() { const [value, setValue] = useState<DateModelValue>(null); const [isNarrow, setIsNarrow] = useState(true); const containerRef = useRef<HTMLDivElement>(null); useEffect(() => { const container = containerRef.current; if (!container) return; const observer = new ResizeObserver(([entry]) => { setIsNarrow(entry.contentRect.width < 815); }); observer.observe(container); return () => observer.disconnect(); }, []); return ( <div ref={containerRef}> <div style={{ textAlign: "center" }}>No border:</div> <ElDivider /> <div style={{ display: "flex", flexWrap: "wrap", gap: 16, justifyContent: "center", }} > <div style={{ padding: 20 }}> <ElDatePickerPanel value={value} onChange={setValue} border={false} /> </div> <ElDivider style={{ height: "auto" }} direction={isNarrow ? "horizontal" : "vertical"} /> <ElCard> <ElDatePickerPanel value={value} onChange={setValue} border={false} /> </ElCard> </div> </div> );}function DatePickerPanelDisabledDemo() { const [value, setValue] = useState<DateModelValue>(null); const [disabled, setDisabled] = useState(true); return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", }} > <ElSwitch checked={disabled} onCheckedChange={setDisabled} activeText="Disabled" inactiveText="Enabled" /> <ElDatePickerPanel value={value} onChange={setValue} disabled={disabled} /> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DatePickerPanelBasic = withEn(DatePickerPanelBasicDemo);export const DatePickerPanelAllTypes = withEn(DatePickerPanelAllTypesDemo);export const DatePickerPanelBorder = withEn(DatePickerPanelBorderDemo);export const DatePickerPanelDisabled = withEn(DatePickerPanelDisabledDemo);
Localization
The default locale of is English, if you need to use other languages, please check Internationalization
Note, date time locale (month name, first day of the week ...) are also configured in localization.
API
Attributes
| Name | Description | Type | Default |
|---|
| model-value / v-model | binding value, if it is an range picker, the length of the array should be 2 | number / string / Date / array | '' |
| border | whether the date picker is bordered | boolean | true |
| disabled | whether DatePicker is disabled | boolean | false |
| clearable | whether to show clear button | boolean | true |
| editable 2.13.0 | whether the input is editable | boolean | true |
| type | type of the picker | enum | date |
| default-value | optional, default date of the calendar | object | — |
| default-time | optional, the time value to use when selecting date range | object | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | — |
| date-format | optional, format of the date displayed in input's inner panel | string see date formats | YYYY-MM-DD |
| time-format | optional, format of the time displayed in input's inner panel | string see date formats | HH:mm:ss |
| unlink-panels | unlink two date-panels in range-picker | boolean | false |
| single-panel 2.14.0 | show only one panel in range-picker | boolean | false |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | Function | — |
| shortcuts | an object array to set shortcut options | array | [] |
| cell-class-name | set custom className | Function | — |
| show-footer | whether to show footer where the date picker is one enum | boolean | false |
| show-confirm | whether to show the confirm button | boolean | false |
| show-week-number | show the week number besides the week | boolean | false |
Events
| Name | Description | Type |
|---|
| calendar-change | triggers when the calendar selected date is changed. Only for range | Function |
| panel-change | triggers when the navigation button click. | Function |
| clear 2.13.1 | triggers when a clear button is clicked | Function |
Slots
| Name | Description |
|---|
| default | custom cell content |
| prev-month | prev month icon |
| next-month | next month icon |
| prev-year | prev year icon |
| next-year | next year icon |
