element/examples/docs/en-US/datetime-picker.md

DateTimePicker

Select date and time in one picker.

:::tip DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on pickerOptions and other attributes, you can refer to DatePicker and TimePicker. :::

Date and time

:::demo 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.

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="Select date and time">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With shortcuts</span>
    <el-date-picker
      v-model="value2"
      type="datetime"
      placeholder="Select date and time"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With default time</span>
    <el-date-picker
      v-model="value3"
      type="datetime"
      placeholder="Select date and time"
      default-time="12:00:00">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: 'Today',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: 'Yesterday',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: 'A week ago',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        value3: ''
      };
    }
  };
</script>

:::

Date and time range

:::demo You can select date and time range by setting type to datetimerange.

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With shortcuts</span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
      align="right">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: 'Last week',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: 'Last month',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: 'Last 3 months',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        value2: ''
      };
    }
  };
</script>

:::

Default time value for start date and end date

:::demo 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 strings. The first item controls time value of the start date and the second item controls time value of the end date.

<template>
  <div class="block">
    <span class="demonstration">Start date time 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="['12:00:00']">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      align="right"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="['12:00:00', '08:00:00']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: ''
      };
    }
  };
</script>

:::

Attributes

Attribute	Description	Type	Accepted Values	Default
value / v-model	binding value	date(DateTimePicker) / array(DateTimeRangePicker)	—	—
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	string	large/small/mini	—
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	—	—
time-arrow-control	whether to pick time using arrow buttons	boolean	—	false
type	type of the picker	string	year/month/date/datetime/ week/datetimerange/daterange	date
format	format of the displayed value in the input box	string	see date formats	yyyy-MM-dd HH:mm:ss
align	alignment	left/center/right	left
popper-class	custom class name for DateTimePicker's dropdown	string	—	—
picker-options	additional options, check the table below	object	—	{}
range-separator	range separator	string	-	'-'
default-value	optional, default date of the calendar	Date	anything accepted by new Date()	—
default-time	the default time value after picking a date	non-range: string / range: string[]	non-range: a string like 12:00:00, range: array of two strings, and the first item is for the start date and second for the end date. 00:00:00 will be used if not specified	—
value-format	optional, format of binding value. If not specified, the binding value will be a Date object	string	see date formats	—
name	same as name in native input	string	—	—
unlink-panels	unllink two date-panels in range-picker	boolean	—	false
prefix-icon	Custom prefix icon class	string	—	el-icon-date
clear-icon	Custom clear icon class	string	—	el-icon-circle-close

Picker Options

Attribute	Description	Type	Accepted Values	Default
shortcuts	a { text, onClick } object array to set shortcut options, check the table below	object[]	—	—
disabledDate	a function determining if a date is disabled with that date as its parameter. Should return a Boolean	function	—	—
firstDayOfWeek	first day of week	Number	1 to 7	7

shortcuts

Attribute	Description	Type	Accepted Values	Default
text	title of the shortcut	string	—	—
onClick	callback function, triggers when the shortcut is clicked, with the vm as its parameter. You can change the picker value by emitting the pick event. Example: vm.$emit('pick', new Date())	function	—	—

Events

Event Name	Description	Parameters
change	triggers when user confirms the value	component's binding value
blur	triggers when Input blurs	component instance
focus	triggers when Input focuses	component instance

Methods

Method	Description	Parameters
focus	focus the Input component	—