Select date and time in the same picker.

Tips

DateTimePicker is derived from DatePicker and TimePicker. For Picker Options and other options, refer to DatePicker and TimePicker.

Date and Time Point

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

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

Date and Time Range

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <fx-date-picker
      v-model="value1"
      type="datetimerange"
      :default-time="['','20:59:59']"
      range-separator="to"
      start-placeholder="Start date"
      end-placeholder="End date">
    </fx-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With shortcuts</span>
    <fx-date-picker
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="to"
      start-placeholder="Start date"
      end-placeholder="End date"
      align="right">
    </fx-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts:(function(){
            let list=[{
            text: 'Last week',
            backfillShortcutActive:true,
            backfillShortcut:true,
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pickByShortcut', [start, end],this);
            }
          }, {
            text: 'Last month',
            backfillShortcut:true,
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pickByShortcut', [start, end],this);
            }
          }, {
            text: 'Last three months',
            backfillShortcut:true,
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pickByShortcut', [start, end],this);
            }
          }]
            for(let i=0;i<15;i++){
              list.push({
                text: 'Day '+(i+1),
                backfillShortcut:true,
                onClick(picker){
                  picker.$emit('pickByShortcut',[],this)
                }
              })
            }
            return list;
          })(),
          shortcuts1: [{
            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 three 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 Start and End Time

<template>
  <div class="block">
    <span class="demonstration">Start date time is 12:00:00</span>
    <fx-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="Start date"
      end-placeholder="End date"
      :default-time="['12:00:00']">
    </fx-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Start date time is 12:00:00, and end date time is 08:00:00</span>
    <fx-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']">
    </fx-date-picker>
  </div>
</template>

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

Attributes

Parameter	Description	Type	Optional Values	Default
value / v-model	Bound value	date(DateTimePicker) / array(DateTimeRangePicker)	-	-
readonly	Completely read-only	boolean	-	false
disabled	Disabled	boolean	-	false
editable	Text box is editable	boolean	-	true
clearable	Whether to show the clear button	boolean	-	true
size	Input size	string	large, small, mini	-
placeholder	Placeholder for non-range selection	string	-	-
start-placeholder	Start date placeholder for range selection	string	-	-
end-placeholder	End date placeholder for range selection	string	-	-
time-arrow-control	Whether to use arrows for time selection	boolean	-	false
type	Display type	string	year/month/date/week/ datetime/datetimerange/daterange	date
format	Format displayed in the input box	string	See DateFormat	yyyy-MM-dd HH:mm:ss
align	Alignment	string	left, center, right	left
popper-class	DateTimePicker Dropdown class name	string	-	-
picker-options	Options specific to the current date/time picker. See the table below	object	-	{}
range-separator	Separator when selecting a range	string	-	'-'
default-value	Optional. Default time displayed when the picker opens	Date	Parseable by new Date()	-
default-time	Default specific time after selecting a date	Non-range selection: string / range selection: string[]	Non-range selection: a string such as 12:00:00; range selection: an array of length 2 where each item is a string such as 12:00:00. The first item specifies the start date time, and the second specifies the end date time. If omitted, 00:00:00 is used	-
value-format	Optional. Format of the bound value. If omitted, the bound value is a Date object	string	See DateFormat	-
name	Native attribute	string	-	-
unlink-panels	Unlink the two date panels in range selection	boolean	-	false
prefix-icon	Class name of the custom prefix icon	string	-	el-icon-date
clear-icon	Class name of the custom clear icon	string	-	el-icon-circle-close

Picker Options

Parameter	Description	Type	Optional Values	Default
shortcuts	Sets shortcut options. Pass objects in the form { text, onClick }; see the demo or table below	Object[]	-	-
disabledDate	Sets the disabled state. The parameter is the current date and a Boolean must be returned	Function	-	-
firstDayOfWeek	First day of week	Number	1 to 7	7

Shortcuts

Parameter	Description	Type	Optional Values	Default
text	Title text	string	-	-
backfillShortcutActive	Sets whether the current shortcut is selected by default	boolean	-	-
backfillShortcut	Sets whether to backfill the current shortcut text value	boolean	-	-
onClick	Callback after selection. The parameter is vm, and you can trigger 'pick' event to set the picker value. For example, vm.$emit('pickByShortcut', new Date(),this),this in the parameter is the current shortcut object	function	-	-

Events

Event Name	Description	Parameters
change	Triggered when the user confirms the selected value	Component bound value. Its format is consistent with the bound value and can be controlled by value-format
blur	Triggered when the input loses focus	Component instance
focus	Triggered when the input gains focus	Component instance
setShortcutHighlight	Sets shortcut highlight	Text of the shortcut to highlight

Methods

Method	Description	Parameters
focus	Focuses the input	-

Slots

Name	Description
range-separator	Custom separator

Mobile TimePicker

Supports datetime year-month-day hour-minute format.

Usage Guide

Basic Usage

After the visible parameter uses the .sync syntax sugar, the component controls showing and hiding the popup by itself, without controlling it in the cancel and confirm events.

<template>
  <fx-date-picker
    :visible.sync="show"
    v-model="value"
  ></fx-date-picker>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: new Date(),
    }
  }
}
</script>

Custom Option Format

Similar to most date format functions, a regular expression captures the corresponding date placeholder and extracts the following string for display. This does not affect the value.

<template>
  <fx-date-picker
    :visible.sync="show"
    v-model="value"
    format="yyyy,MM,dd,hh hour,mm minute"
  ></fx-date-picker>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      value: new Date(),
    }
  }
}
</script>

One-Way Data Flow

Other pickers do not support one-way data flow. We recommend wrapping another layer yourself to implement it.

Set :value-binding="false" to cancel two-way binding of v-model (allowing v-model to be omitted), which supports scenarios that only listen to the confirm event.

API

option	description	type	acceptable values	default
visible	Controls show and hide	Boolean		false
v-model	Selected value	`Date	String`
min-date	Minimum selectable date	Date		January 1 ten years ago
max-date	Maximum selectable date	Date		December 31 ten years later
min-hour	Minimum selectable hour	Number		0
max-hour	Maximum selectable hour	Number		23
format	Display format, comma-separated	String		yyyy year,MM month,dd day,hh,mm
item-height	Option height, in px	Number		36
visible-item-count	Number of visible items at the same time	Number		7
value-binding	Whether to enable two-way binding of value. If false, one-way passing of v-model can be implemented	Boolean		true
cancel-btn-text	Cancel button text	String		Cancel
confirm-btn-text	Confirm button text	String		Confirm
class-name	Root node class of the popup layer	String		--

Events

event	description	params
cancel	Click Cancel	--
confirm	Click Confirm	value
update:visible	Triggered when the popup opens or closes	visible

API

In addition to the Datetime Picker API, the following are also included:

option	description	type	acceptable values	default
show-toolbar	Whether to show the header action bar	Boolean		true
prevent-click	Because the pageY selected when clicking an item is based on the picker fixed at the bottom, disable the click event if the picker is not at the bottom of the page	Boolean		false