DateTimePicker
Select date and time in one picker.
TIP
DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on attributes, you can refer to DatePicker and TimePicker.
Date and time
You can select date and time in one picker at the same time by setting type to datetime. The way to use shortcuts is the same as Date Picker.
Default
With shortcuts
With default time
"use client";import { useState, type CSSProperties, type ReactNode } from "react";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePicker } from "@/components/element-plus/date-picker";import { ElIcon } from "@/components/element-plus/icon/ElIcon";import { CaretLeft, CaretRight } from "@/components/element-plus/generated/icons";import type { DateModelValue, DateShortcut,} from "@/components/element-plus/date-picker";const containerStyle: CSSProperties = { display: "flex", width: "100%", padding: 0, flexWrap: "wrap",};const blockStyle: CSSProperties = { padding: "30px 0", textAlign: "center", borderRight: "solid 1px var(--el-border-color)", flex: 1, minWidth: 300,};const lastBlockStyle: CSSProperties = { ...blockStyle, borderRight: "none",};const demonstrationStyle: CSSProperties = { display: "block", color: "var(--el-text-color-secondary)", fontSize: 14, marginBottom: 20,};function DateTimePickerBasicDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); const defaultTime = new Date(2000, 1, 1, 12, 0, 0); const shortcuts: DateShortcut[] = [ { text: "Today", value: new Date() }, { text: "Yesterday", value: () => { const date = new Date(); date.setDate(date.getDate() - 1); return date; }, }, { text: "A week ago", value: () => { const date = new Date(); date.setDate(date.getDate() - 7); return date; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Select date and time" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Select date and time" shortcuts={shortcuts} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With default time</span> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Select date and time" defaultTime={defaultTime} /> </div> </div> );}function DateTimePickerRangeDemo() { const [value1, setValue1] = useState<DateModelValue>([ new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10), ]); const [value2, setValue2] = useState<DateModelValue>(null); const shortcuts: DateShortcut[] = [ { text: "Last week", value: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); return [start, end]; }, }, { text: "Last month", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 1); return [start, end]; }, }, { text: "Last 3 months", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 3); return [start, end]; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" shortcuts={shortcuts} rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> </div> );}function DateTimePickerDefaultTimeDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); const defaultTime2: [Date, Date] = [ new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0), ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Start and end date time 12:00:00</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime1} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}> Start date time 12:00:00, end date time 08:00:00 </span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime2} /> </div> </div> );}function DateTimePickerFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Emits Date object</span> <div style={demonstrationStyle}>Value: {String(value1 ?? "")}</div> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD HH:mm:ss" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>Use value-format</span> <div style={demonstrationStyle}>Value：{String(value2 ?? "")}</div> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="YYYY-MM-DD h:m:s a" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>Timestamp</span> <div style={demonstrationStyle}>Value：{String(value3 ?? "")}</div> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="x" /> </div> </div> );}function DateTimePickerPanelFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ ...containerStyle, justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" /> </div> </div> );}function DateTimePickerSinglePanelDemo() { const [value1, setValue1] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={{ ...blockStyle, borderRight: "none" }}> <span style={demonstrationStyle}>single-panel</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" singlePanel /> </div> </div> );}function PrevYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" /> </g> </g> </svg> );}function NextYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" /> </g> </g> </svg> );}const customIcons = { prevMonthIcon: ( <ElIcon> <CaretLeft /> </ElIcon> ), nextMonthIcon: ( <ElIcon> <CaretRight /> </ElIcon> ), prevYearIcon: ( <ElIcon> <PrevYearSvg /> </ElIcon> ), nextYearIcon: ( <ElIcon> <NextYearSvg /> </ElIcon> ),};function DateTimePickerCustomIconDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", width: "100%", padding: 0, flexWrap: "wrap", justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" {...customIcons} /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" unlinkPanels {...customIcons} /> </div> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DateTimePickerBasic = withEn(DateTimePickerBasicDemo);export const DateTimePickerRange = withEn(DateTimePickerRangeDemo);export const DateTimePickerDefaultTime = withEn(DateTimePickerDefaultTimeDemo);export const DateTimePickerFormats = withEn(DateTimePickerFormatsDemo);export const DateTimePickerPanelFormats = withEn(DateTimePickerPanelFormatsDemo);export const DateTimePickerSinglePanel = withEn(DateTimePickerSinglePanelDemo);export const DateTimePickerCustomIcon = withEn(DateTimePickerCustomIconDemo);DateTime Formats
Use format to control displayed text's format in the input box. Use value-format to control binding value's format.
By default, the component accepts and emits a Date object.
Check the list here of all available formats of Day.js.
WARNING
Pay attention to capitalization
Emits Date object
Value:
Use value-format
Value：
Timestamp
Value：
"use client";import { useState, type CSSProperties, type ReactNode } from "react";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePicker } from "@/components/element-plus/date-picker";import { ElIcon } from "@/components/element-plus/icon/ElIcon";import { CaretLeft, CaretRight } from "@/components/element-plus/generated/icons";import type { DateModelValue, DateShortcut,} from "@/components/element-plus/date-picker";const containerStyle: CSSProperties = { display: "flex", width: "100%", padding: 0, flexWrap: "wrap",};const blockStyle: CSSProperties = { padding: "30px 0", textAlign: "center", borderRight: "solid 1px var(--el-border-color)", flex: 1, minWidth: 300,};const lastBlockStyle: CSSProperties = { ...blockStyle, borderRight: "none",};const demonstrationStyle: CSSProperties = { display: "block", color: "var(--el-text-color-secondary)", fontSize: 14, marginBottom: 20,};function DateTimePickerBasicDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); const defaultTime = new Date(2000, 1, 1, 12, 0, 0); const shortcuts: DateShortcut[] = [ { text: "Today", value: new Date() }, { text: "Yesterday", value: () => { const date = new Date(); date.setDate(date.getDate() - 1); return date; }, }, { text: "A week ago", value: () => { const date = new Date(); date.setDate(date.getDate() - 7); return date; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Select date and time" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Select date and time" shortcuts={shortcuts} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With default time</span> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Select date and time" defaultTime={defaultTime} /> </div> </div> );}function DateTimePickerRangeDemo() { const [value1, setValue1] = useState<DateModelValue>([ new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10), ]); const [value2, setValue2] = useState<DateModelValue>(null); const shortcuts: DateShortcut[] = [ { text: "Last week", value: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); return [start, end]; }, }, { text: "Last month", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 1); return [start, end]; }, }, { text: "Last 3 months", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 3); return [start, end]; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" shortcuts={shortcuts} rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> </div> );}function DateTimePickerDefaultTimeDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); const defaultTime2: [Date, Date] = [ new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0), ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Start and end date time 12:00:00</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime1} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}> Start date time 12:00:00, end date time 08:00:00 </span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime2} /> </div> </div> );}function DateTimePickerFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Emits Date object</span> <div style={demonstrationStyle}>Value: {String(value1 ?? "")}</div> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD HH:mm:ss" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>Use value-format</span> <div style={demonstrationStyle}>Value：{String(value2 ?? "")}</div> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="YYYY-MM-DD h:m:s a" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>Timestamp</span> <div style={demonstrationStyle}>Value：{String(value3 ?? "")}</div> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="x" /> </div> </div> );}function DateTimePickerPanelFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ ...containerStyle, justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" /> </div> </div> );}function DateTimePickerSinglePanelDemo() { const [value1, setValue1] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={{ ...blockStyle, borderRight: "none" }}> <span style={demonstrationStyle}>single-panel</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" singlePanel /> </div> </div> );}function PrevYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" /> </g> </g> </svg> );}function NextYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" /> </g> </g> </svg> );}const customIcons = { prevMonthIcon: ( <ElIcon> <CaretLeft /> </ElIcon> ), nextMonthIcon: ( <ElIcon> <CaretRight /> </ElIcon> ), prevYearIcon: ( <ElIcon> <PrevYearSvg /> </ElIcon> ), nextYearIcon: ( <ElIcon> <NextYearSvg /> </ElIcon> ),};function DateTimePickerCustomIconDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", width: "100%", padding: 0, flexWrap: "wrap", justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" {...customIcons} /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" unlinkPanels {...customIcons} /> </div> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DateTimePickerBasic = withEn(DateTimePickerBasicDemo);export const DateTimePickerRange = withEn(DateTimePickerRangeDemo);export const DateTimePickerDefaultTime = withEn(DateTimePickerDefaultTimeDemo);export const DateTimePickerFormats = withEn(DateTimePickerFormatsDemo);export const DateTimePickerPanelFormats = withEn(DateTimePickerPanelFormatsDemo);export const DateTimePickerSinglePanel = withEn(DateTimePickerSinglePanelDemo);export const DateTimePickerCustomIcon = withEn(DateTimePickerCustomIconDemo);Date and time formats in dropdown panel
Use date-format and time-format to control displayed text's format in the dropdown panel's input box.
-
"use client";import { useState, type CSSProperties, type ReactNode } from "react";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePicker } from "@/components/element-plus/date-picker";import { ElIcon } from "@/components/element-plus/icon/ElIcon";import { CaretLeft, CaretRight } from "@/components/element-plus/generated/icons";import type { DateModelValue, DateShortcut,} from "@/components/element-plus/date-picker";const containerStyle: CSSProperties = { display: "flex", width: "100%", padding: 0, flexWrap: "wrap",};const blockStyle: CSSProperties = { padding: "30px 0", textAlign: "center", borderRight: "solid 1px var(--el-border-color)", flex: 1, minWidth: 300,};const lastBlockStyle: CSSProperties = { ...blockStyle, borderRight: "none",};const demonstrationStyle: CSSProperties = { display: "block", color: "var(--el-text-color-secondary)", fontSize: 14, marginBottom: 20,};function DateTimePickerBasicDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); const defaultTime = new Date(2000, 1, 1, 12, 0, 0); const shortcuts: DateShortcut[] = [ { text: "Today", value: new Date() }, { text: "Yesterday", value: () => { const date = new Date(); date.setDate(date.getDate() - 1); return date; }, }, { text: "A week ago", value: () => { const date = new Date(); date.setDate(date.getDate() - 7); return date; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Select date and time" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Select date and time" shortcuts={shortcuts} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With default time</span> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Select date and time" defaultTime={defaultTime} /> </div> </div> );}function DateTimePickerRangeDemo() { const [value1, setValue1] = useState<DateModelValue>([ new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10), ]); const [value2, setValue2] = useState<DateModelValue>(null); const shortcuts: DateShortcut[] = [ { text: "Last week", value: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); return [start, end]; }, }, { text: "Last month", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 1); return [start, end]; }, }, { text: "Last 3 months", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 3); return [start, end]; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" shortcuts={shortcuts} rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> </div> );}function DateTimePickerDefaultTimeDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); const defaultTime2: [Date, Date] = [ new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0), ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Start and end date time 12:00:00</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime1} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}> Start date time 12:00:00, end date time 08:00:00 </span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime2} /> </div> </div> );}function DateTimePickerFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Emits Date object</span> <div style={demonstrationStyle}>Value: {String(value1 ?? "")}</div> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD HH:mm:ss" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>Use value-format</span> <div style={demonstrationStyle}>Value：{String(value2 ?? "")}</div> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="YYYY-MM-DD h:m:s a" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>Timestamp</span> <div style={demonstrationStyle}>Value：{String(value3 ?? "")}</div> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="x" /> </div> </div> );}function DateTimePickerPanelFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ ...containerStyle, justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" /> </div> </div> );}function DateTimePickerSinglePanelDemo() { const [value1, setValue1] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={{ ...blockStyle, borderRight: "none" }}> <span style={demonstrationStyle}>single-panel</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" singlePanel /> </div> </div> );}function PrevYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" /> </g> </g> </svg> );}function NextYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" /> </g> </g> </svg> );}const customIcons = { prevMonthIcon: ( <ElIcon> <CaretLeft /> </ElIcon> ), nextMonthIcon: ( <ElIcon> <CaretRight /> </ElIcon> ), prevYearIcon: ( <ElIcon> <PrevYearSvg /> </ElIcon> ), nextYearIcon: ( <ElIcon> <NextYearSvg /> </ElIcon> ),};function DateTimePickerCustomIconDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", width: "100%", padding: 0, flexWrap: "wrap", justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" {...customIcons} /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" unlinkPanels {...customIcons} /> </div> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DateTimePickerBasic = withEn(DateTimePickerBasicDemo);export const DateTimePickerRange = withEn(DateTimePickerRangeDemo);export const DateTimePickerDefaultTime = withEn(DateTimePickerDefaultTimeDemo);export const DateTimePickerFormats = withEn(DateTimePickerFormatsDemo);export const DateTimePickerPanelFormats = withEn(DateTimePickerPanelFormatsDemo);export const DateTimePickerSinglePanel = withEn(DateTimePickerSinglePanelDemo);export const DateTimePickerCustomIcon = withEn(DateTimePickerCustomIconDemo);Date and time range
You can select date and time range by setting type to datetimerange.
Default
To
With shortcuts
To
"use client";import { useState, type CSSProperties, type ReactNode } from "react";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePicker } from "@/components/element-plus/date-picker";import { ElIcon } from "@/components/element-plus/icon/ElIcon";import { CaretLeft, CaretRight } from "@/components/element-plus/generated/icons";import type { DateModelValue, DateShortcut,} from "@/components/element-plus/date-picker";const containerStyle: CSSProperties = { display: "flex", width: "100%", padding: 0, flexWrap: "wrap",};const blockStyle: CSSProperties = { padding: "30px 0", textAlign: "center", borderRight: "solid 1px var(--el-border-color)", flex: 1, minWidth: 300,};const lastBlockStyle: CSSProperties = { ...blockStyle, borderRight: "none",};const demonstrationStyle: CSSProperties = { display: "block", color: "var(--el-text-color-secondary)", fontSize: 14, marginBottom: 20,};function DateTimePickerBasicDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); const defaultTime = new Date(2000, 1, 1, 12, 0, 0); const shortcuts: DateShortcut[] = [ { text: "Today", value: new Date() }, { text: "Yesterday", value: () => { const date = new Date(); date.setDate(date.getDate() - 1); return date; }, }, { text: "A week ago", value: () => { const date = new Date(); date.setDate(date.getDate() - 7); return date; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Select date and time" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Select date and time" shortcuts={shortcuts} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With default time</span> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Select date and time" defaultTime={defaultTime} /> </div> </div> );}function DateTimePickerRangeDemo() { const [value1, setValue1] = useState<DateModelValue>([ new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10), ]); const [value2, setValue2] = useState<DateModelValue>(null); const shortcuts: DateShortcut[] = [ { text: "Last week", value: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); return [start, end]; }, }, { text: "Last month", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 1); return [start, end]; }, }, { text: "Last 3 months", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 3); return [start, end]; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" shortcuts={shortcuts} rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> </div> );}function DateTimePickerDefaultTimeDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); const defaultTime2: [Date, Date] = [ new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0), ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Start and end date time 12:00:00</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime1} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}> Start date time 12:00:00, end date time 08:00:00 </span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime2} /> </div> </div> );}function DateTimePickerFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Emits Date object</span> <div style={demonstrationStyle}>Value: {String(value1 ?? "")}</div> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD HH:mm:ss" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>Use value-format</span> <div style={demonstrationStyle}>Value：{String(value2 ?? "")}</div> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="YYYY-MM-DD h:m:s a" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>Timestamp</span> <div style={demonstrationStyle}>Value：{String(value3 ?? "")}</div> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="x" /> </div> </div> );}function DateTimePickerPanelFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ ...containerStyle, justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" /> </div> </div> );}function DateTimePickerSinglePanelDemo() { const [value1, setValue1] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={{ ...blockStyle, borderRight: "none" }}> <span style={demonstrationStyle}>single-panel</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" singlePanel /> </div> </div> );}function PrevYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" /> </g> </g> </svg> );}function NextYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" /> </g> </g> </svg> );}const customIcons = { prevMonthIcon: ( <ElIcon> <CaretLeft /> </ElIcon> ), nextMonthIcon: ( <ElIcon> <CaretRight /> </ElIcon> ), prevYearIcon: ( <ElIcon> <PrevYearSvg /> </ElIcon> ), nextYearIcon: ( <ElIcon> <NextYearSvg /> </ElIcon> ),};function DateTimePickerCustomIconDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", width: "100%", padding: 0, flexWrap: "wrap", justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" {...customIcons} /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" unlinkPanels {...customIcons} /> </div> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DateTimePickerBasic = withEn(DateTimePickerBasicDemo);export const DateTimePickerRange = withEn(DateTimePickerRangeDemo);export const DateTimePickerDefaultTime = withEn(DateTimePickerDefaultTimeDemo);export const DateTimePickerFormats = withEn(DateTimePickerFormatsDemo);export const DateTimePickerPanelFormats = withEn(DateTimePickerPanelFormatsDemo);export const DateTimePickerSinglePanel = withEn(DateTimePickerSinglePanelDemo);export const DateTimePickerCustomIcon = withEn(DateTimePickerCustomIconDemo);Single Panel 2.14.0
By default date picker ranges have two panels. If you want one panel set the single-panel attribute.
single-panel
-
"use client";import { useState, type CSSProperties, type ReactNode } from "react";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePicker } from "@/components/element-plus/date-picker";import { ElIcon } from "@/components/element-plus/icon/ElIcon";import { CaretLeft, CaretRight } from "@/components/element-plus/generated/icons";import type { DateModelValue, DateShortcut,} from "@/components/element-plus/date-picker";const containerStyle: CSSProperties = { display: "flex", width: "100%", padding: 0, flexWrap: "wrap",};const blockStyle: CSSProperties = { padding: "30px 0", textAlign: "center", borderRight: "solid 1px var(--el-border-color)", flex: 1, minWidth: 300,};const lastBlockStyle: CSSProperties = { ...blockStyle, borderRight: "none",};const demonstrationStyle: CSSProperties = { display: "block", color: "var(--el-text-color-secondary)", fontSize: 14, marginBottom: 20,};function DateTimePickerBasicDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); const defaultTime = new Date(2000, 1, 1, 12, 0, 0); const shortcuts: DateShortcut[] = [ { text: "Today", value: new Date() }, { text: "Yesterday", value: () => { const date = new Date(); date.setDate(date.getDate() - 1); return date; }, }, { text: "A week ago", value: () => { const date = new Date(); date.setDate(date.getDate() - 7); return date; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Select date and time" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Select date and time" shortcuts={shortcuts} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With default time</span> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Select date and time" defaultTime={defaultTime} /> </div> </div> );}function DateTimePickerRangeDemo() { const [value1, setValue1] = useState<DateModelValue>([ new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10), ]); const [value2, setValue2] = useState<DateModelValue>(null); const shortcuts: DateShortcut[] = [ { text: "Last week", value: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); return [start, end]; }, }, { text: "Last month", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 1); return [start, end]; }, }, { text: "Last 3 months", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 3); return [start, end]; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" shortcuts={shortcuts} rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> </div> );}function DateTimePickerDefaultTimeDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); const defaultTime2: [Date, Date] = [ new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0), ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Start and end date time 12:00:00</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime1} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}> Start date time 12:00:00, end date time 08:00:00 </span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime2} /> </div> </div> );}function DateTimePickerFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Emits Date object</span> <div style={demonstrationStyle}>Value: {String(value1 ?? "")}</div> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD HH:mm:ss" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>Use value-format</span> <div style={demonstrationStyle}>Value：{String(value2 ?? "")}</div> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="YYYY-MM-DD h:m:s a" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>Timestamp</span> <div style={demonstrationStyle}>Value：{String(value3 ?? "")}</div> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="x" /> </div> </div> );}function DateTimePickerPanelFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ ...containerStyle, justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" /> </div> </div> );}function DateTimePickerSinglePanelDemo() { const [value1, setValue1] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={{ ...blockStyle, borderRight: "none" }}> <span style={demonstrationStyle}>single-panel</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" singlePanel /> </div> </div> );}function PrevYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" /> </g> </g> </svg> );}function NextYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" /> </g> </g> </svg> );}const customIcons = { prevMonthIcon: ( <ElIcon> <CaretLeft /> </ElIcon> ), nextMonthIcon: ( <ElIcon> <CaretRight /> </ElIcon> ), prevYearIcon: ( <ElIcon> <PrevYearSvg /> </ElIcon> ), nextYearIcon: ( <ElIcon> <NextYearSvg /> </ElIcon> ),};function DateTimePickerCustomIconDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", width: "100%", padding: 0, flexWrap: "wrap", justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" {...customIcons} /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" unlinkPanels {...customIcons} /> </div> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DateTimePickerBasic = withEn(DateTimePickerBasicDemo);export const DateTimePickerRange = withEn(DateTimePickerRangeDemo);export const DateTimePickerDefaultTime = withEn(DateTimePickerDefaultTimeDemo);export const DateTimePickerFormats = withEn(DateTimePickerFormatsDemo);export const DateTimePickerPanelFormats = withEn(DateTimePickerPanelFormatsDemo);export const DateTimePickerSinglePanel = withEn(DateTimePickerSinglePanelDemo);export const DateTimePickerCustomIcon = withEn(DateTimePickerCustomIconDemo);Default time value for start date and end date
When picking date range on the date panel with type datetimerange, 00:00:00 will be used as the default time value for start and end date. We can control it with the default-time attribute. default-time accepts an array of up to two Date objects. The first item controls time value of the start date and the second item controls time value of the end date.
Start and end date time 12:00:00
-
Start date time 12:00:00, end date time 08:00:00
-
"use client";import { useState, type CSSProperties, type ReactNode } from "react";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePicker } from "@/components/element-plus/date-picker";import { ElIcon } from "@/components/element-plus/icon/ElIcon";import { CaretLeft, CaretRight } from "@/components/element-plus/generated/icons";import type { DateModelValue, DateShortcut,} from "@/components/element-plus/date-picker";const containerStyle: CSSProperties = { display: "flex", width: "100%", padding: 0, flexWrap: "wrap",};const blockStyle: CSSProperties = { padding: "30px 0", textAlign: "center", borderRight: "solid 1px var(--el-border-color)", flex: 1, minWidth: 300,};const lastBlockStyle: CSSProperties = { ...blockStyle, borderRight: "none",};const demonstrationStyle: CSSProperties = { display: "block", color: "var(--el-text-color-secondary)", fontSize: 14, marginBottom: 20,};function DateTimePickerBasicDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); const defaultTime = new Date(2000, 1, 1, 12, 0, 0); const shortcuts: DateShortcut[] = [ { text: "Today", value: new Date() }, { text: "Yesterday", value: () => { const date = new Date(); date.setDate(date.getDate() - 1); return date; }, }, { text: "A week ago", value: () => { const date = new Date(); date.setDate(date.getDate() - 7); return date; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Select date and time" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Select date and time" shortcuts={shortcuts} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With default time</span> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Select date and time" defaultTime={defaultTime} /> </div> </div> );}function DateTimePickerRangeDemo() { const [value1, setValue1] = useState<DateModelValue>([ new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10), ]); const [value2, setValue2] = useState<DateModelValue>(null); const shortcuts: DateShortcut[] = [ { text: "Last week", value: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); return [start, end]; }, }, { text: "Last month", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 1); return [start, end]; }, }, { text: "Last 3 months", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 3); return [start, end]; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" shortcuts={shortcuts} rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> </div> );}function DateTimePickerDefaultTimeDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); const defaultTime2: [Date, Date] = [ new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0), ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Start and end date time 12:00:00</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime1} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}> Start date time 12:00:00, end date time 08:00:00 </span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime2} /> </div> </div> );}function DateTimePickerFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Emits Date object</span> <div style={demonstrationStyle}>Value: {String(value1 ?? "")}</div> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD HH:mm:ss" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>Use value-format</span> <div style={demonstrationStyle}>Value：{String(value2 ?? "")}</div> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="YYYY-MM-DD h:m:s a" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>Timestamp</span> <div style={demonstrationStyle}>Value：{String(value3 ?? "")}</div> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="x" /> </div> </div> );}function DateTimePickerPanelFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ ...containerStyle, justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" /> </div> </div> );}function DateTimePickerSinglePanelDemo() { const [value1, setValue1] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={{ ...blockStyle, borderRight: "none" }}> <span style={demonstrationStyle}>single-panel</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" singlePanel /> </div> </div> );}function PrevYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" /> </g> </g> </svg> );}function NextYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" /> </g> </g> </svg> );}const customIcons = { prevMonthIcon: ( <ElIcon> <CaretLeft /> </ElIcon> ), nextMonthIcon: ( <ElIcon> <CaretRight /> </ElIcon> ), prevYearIcon: ( <ElIcon> <PrevYearSvg /> </ElIcon> ), nextYearIcon: ( <ElIcon> <NextYearSvg /> </ElIcon> ),};function DateTimePickerCustomIconDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", width: "100%", padding: 0, flexWrap: "wrap", justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" {...customIcons} /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" unlinkPanels {...customIcons} /> </div> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DateTimePickerBasic = withEn(DateTimePickerBasicDemo);export const DateTimePickerRange = withEn(DateTimePickerRangeDemo);export const DateTimePickerDefaultTime = withEn(DateTimePickerDefaultTimeDemo);export const DateTimePickerFormats = withEn(DateTimePickerFormatsDemo);export const DateTimePickerPanelFormats = withEn(DateTimePickerPanelFormatsDemo);export const DateTimePickerSinglePanel = withEn(DateTimePickerSinglePanelDemo);export const DateTimePickerCustomIcon = withEn(DateTimePickerCustomIconDemo);Custom icon 2.8.0
Custom icons available with slots.
-
"use client";import { useState, type CSSProperties, type ReactNode } from "react";import { ElConfigProvider, en } from "@/components/element-plus/config-provider";import { ElDatePicker } from "@/components/element-plus/date-picker";import { ElIcon } from "@/components/element-plus/icon/ElIcon";import { CaretLeft, CaretRight } from "@/components/element-plus/generated/icons";import type { DateModelValue, DateShortcut,} from "@/components/element-plus/date-picker";const containerStyle: CSSProperties = { display: "flex", width: "100%", padding: 0, flexWrap: "wrap",};const blockStyle: CSSProperties = { padding: "30px 0", textAlign: "center", borderRight: "solid 1px var(--el-border-color)", flex: 1, minWidth: 300,};const lastBlockStyle: CSSProperties = { ...blockStyle, borderRight: "none",};const demonstrationStyle: CSSProperties = { display: "block", color: "var(--el-text-color-secondary)", fontSize: 14, marginBottom: 20,};function DateTimePickerBasicDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); const defaultTime = new Date(2000, 1, 1, 12, 0, 0); const shortcuts: DateShortcut[] = [ { text: "Today", value: new Date() }, { text: "Yesterday", value: () => { const date = new Date(); date.setDate(date.getDate() - 1); return date; }, }, { text: "A week ago", value: () => { const date = new Date(); date.setDate(date.getDate() - 7); return date; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Select date and time" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Select date and time" shortcuts={shortcuts} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With default time</span> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Select date and time" defaultTime={defaultTime} /> </div> </div> );}function DateTimePickerRangeDemo() { const [value1, setValue1] = useState<DateModelValue>([ new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10), ]); const [value2, setValue2] = useState<DateModelValue>(null); const shortcuts: DateShortcut[] = [ { text: "Last week", value: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); return [start, end]; }, }, { text: "Last month", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 1); return [start, end]; }, }, { text: "Last 3 months", value: () => { const end = new Date(); const start = new Date(); start.setMonth(start.getMonth() - 3); return [start, end]; }, }, ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Default</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>With shortcuts</span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" shortcuts={shortcuts} rangeSeparator="To" startPlaceholder="Start date" endPlaceholder="End date" /> </div> </div> );}function DateTimePickerDefaultTimeDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); const defaultTime2: [Date, Date] = [ new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0), ]; return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Start and end date time 12:00:00</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime1} /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}> Start date time 12:00:00, end date time 08:00:00 </span> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start Date" endPlaceholder="End Date" defaultTime={defaultTime2} /> </div> </div> );}function DateTimePickerFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); const [value3, setValue3] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={blockStyle}> <span style={demonstrationStyle}>Emits Date object</span> <div style={demonstrationStyle}>Value: {String(value1 ?? "")}</div> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD HH:mm:ss" /> </div> <div style={blockStyle}> <span style={demonstrationStyle}>Use value-format</span> <div style={demonstrationStyle}>Value：{String(value2 ?? "")}</div> <ElDatePicker value={value2} onChange={setValue2} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="YYYY-MM-DD h:m:s a" /> </div> <div style={lastBlockStyle}> <span style={demonstrationStyle}>Timestamp</span> <div style={demonstrationStyle}>Value：{String(value3 ?? "")}</div> <ElDatePicker value={value3} onChange={setValue3} type="datetime" placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss" valueFormat="x" /> </div> </div> );}function DateTimePickerPanelFormatsDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ ...containerStyle, justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" /> </div> </div> );}function DateTimePickerSinglePanelDemo() { const [value1, setValue1] = useState<DateModelValue>(null); return ( <div style={containerStyle}> <div style={{ ...blockStyle, borderRight: "none" }}> <span style={demonstrationStyle}>single-panel</span> <ElDatePicker value={value1} onChange={setValue1} type="datetimerange" singlePanel /> </div> </div> );}function PrevYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" /> </g> </g> </svg> );}function NextYearSvg() { return ( <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g strokeWidth="1" fillRule="evenodd"> <g fill="currentColor"> <path d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" /> </g> </g> </svg> );}const customIcons = { prevMonthIcon: ( <ElIcon> <CaretLeft /> </ElIcon> ), nextMonthIcon: ( <ElIcon> <CaretRight /> </ElIcon> ), prevYearIcon: ( <ElIcon> <PrevYearSvg /> </ElIcon> ), nextYearIcon: ( <ElIcon> <NextYearSvg /> </ElIcon> ),};function DateTimePickerCustomIconDemo() { const [value1, setValue1] = useState<DateModelValue>(null); const [value2, setValue2] = useState<DateModelValue>(null); return ( <div style={{ display: "flex", width: "100%", padding: 0, flexWrap: "wrap", justifyContent: "space-around", alignItems: "stretch", }} > <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value1} onChange={setValue1} type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss" dateFormat="MMM DD, YYYY" timeFormat="HH:mm" {...customIcons} /> </div> <div style={{ width: 1, backgroundColor: "var(--el-border-color)" }} /> <div style={{ ...blockStyle, borderRight: "none" }}> <ElDatePicker value={value2} onChange={setValue2} type="datetimerange" startPlaceholder="Start date" endPlaceholder="End date" format="YYYY-MM-DD HH:mm:ss" dateFormat="YYYY/MM/DD ddd" timeFormat="A hh:mm:ss" unlinkPanels {...customIcons} /> </div> </div> );}function withEn(Component: () => ReactNode) { return function Demo() { return ( <ElConfigProvider locale={en}> <Component /> </ElConfigProvider> ); };}export const DateTimePickerBasic = withEn(DateTimePickerBasicDemo);export const DateTimePickerRange = withEn(DateTimePickerRangeDemo);export const DateTimePickerDefaultTime = withEn(DateTimePickerDefaultTimeDemo);export const DateTimePickerFormats = withEn(DateTimePickerFormatsDemo);export const DateTimePickerPanelFormats = withEn(DateTimePickerPanelFormatsDemo);export const DateTimePickerSinglePanel = withEn(DateTimePickerSinglePanelDemo);export const DateTimePickerCustomIcon = withEn(DateTimePickerCustomIconDemo);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 | '' |
| readonly | whether DatePicker is read only | boolean | false |
| disabled | whether DatePicker is disabled | boolean | false |
| editable | whether the input is editable | boolean | true |
| clearable | whether to show clear button | boolean | true |
| size | size of Input | enum | default |
| placeholder | placeholder in non-range mode | string | — |
| start-placeholder | placeholder for the start date in range mode | string | — |
| end-placeholder | placeholder for the end date in range mode | string | — |
| arrow-control | whether to pick time using arrow buttons | boolean | false |
| type | type of the picker | enum | date |
| format | format of the displayed value in the input box | string see date formats | YYYY-MM-DD HH:mm:ss |
| popper-class | custom class name for DateTimePicker's dropdown | string | — |
| popper-style | custom style for DateTimePicker's dropdown | string / object | — |
| popper-options | Customized popper option see more at popper.js | object | {} |
| fallback-placements 2.8.4 | list of possible positions for Tooltip popper.js | array | ['bottom', 'top', 'right', 'left'] |
| placement 2.8.4 | position of dropdown | Placement | bottom |
| range-separator | range separator | string | '-' |
| default-value | optional, default date of the calendar | object | — |
| default-time | the default time value after picking a date. Time 00:00:00 will be used if not specified | object | — |
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string see date formats | — |
| date-format 2.4.0 | optional, format of the date displayed in input's inner panel | string see date formats | YYYY-MM-DD |
| time-format 2.4.0 | optional, format of the time displayed in input's inner panel | string see date formats | HH:mm:ss |
| id | same as id in native input | string / array | — |
| name | same as name in native input | string | — |
| 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 |
| prefix-icon | Custom prefix icon component | string / Component | Date |
| clear-icon | Custom clear icon component | string / Component | CircleClose |
| shortcuts | an object array to set shortcut options | array | — |
| disabled-date | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | Function | — |
| disabled-hours | To specify the array of hours that cannot be selected | Function | — |
| disabled-minutes | To specify the array of minutes that cannot be selected | Function | — |
| disabled-seconds | To specify the array of seconds that cannot be selected | Function | — |
| cell-class-name | set custom className | Function | — |
| teleported | whether datetime-picker dropdown is teleported to the body | boolean | true |
| empty-values 2.7.0 | empty values of component, see config-provider | array | — |
| value-on-clear 2.7.0 | clear return value, see config-provider | string / number / boolean / Function | — |
| show-now 2.8.7 | whether to show the now button | boolean | true |
| show-footer 2.10.5 | whether to show footer where the date picker is one enum | boolean | true |
| show-confirm 2.11.0 | whether to show the confirm button | boolean | true |
| show-week-number 2.10.3 | show the week number besides the week | boolean | false |
Events
| Name | Description | Parameters |
|---|---|---|
| change | triggers when user confirms the value or click outside | Function |
| blur | triggers when Input blurs | Function |
| focus | triggers when Input focuses | Function |
| clear 2.7.7 | triggers when a clear button is clicked | Function |
| calendar-change | triggers when the calendar selected date is changed. Only for range | Function |
| panel-change | triggers when the navigation button click. | Function |
| visible-change | triggers when the DateTimePicker's dropdown appears/disappears | Function |
Slots
| Name | Description |
|---|---|
| default | custom cell content |
| range-separator | custom range separator content |
| prev-month 2.8.0 | prev month icon |
| next-month 2.8.0 | next month icon |
| prev-year 2.8.0 | prev year icon |
| next-year 2.8.0 | next year icon |
Exposes
| Method | Description | Type |
|---|---|---|
| focus | focus the DatePicker component | Function |
| blur 2.8.7 | blur the DatePicker component | Function |
Type Declarations
Show declarations
type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
| 'right'
| 'right-start'
| 'right-end'