FxDatePicker DateTime Picker

Different interaction patterns exist between mobile and PC versions. For mobile usage, please refer to the mobile section at the bottom.
Select both date and time in a single picker.

:::tip
DateTimePicker inherits from DatePicker and TimePicker. Picker Options and other configurations can reference DatePicker and TimePicker documentation.
:::

Date and Time Selection

Default

With shortcuts

Set default time

Set type to datetime to enable combined date and time selection. Shortcut options work the same way as in Date Picker.

<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>  

Expand Copy Copy

Date and Time Range

Default

With shortcuts

Set type to datetimerange for date-time range selection

<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 3 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 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>  

Expand Copy Copy

Default Start/End Time

Start time at 12:00:00

Start at 12:00:00, end at 08:00:00

When using datetimerange, the default time for selected dates is 00:00:00. Use default-time to control specific times. Accepts an array of strings like 12:00:00 where the first item sets start time and second sets end time.

<template>  
  <div class="block">  
    <span class="demonstration">Start time at 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 at 12:00:00, end at 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>  

Expand Copy Copy

Attributes

Parameter	Description	Type	Options	Default
value / v-model	binding value	date(DateTimePicker) / array(DateTimeRangePicker)	—	—
readonly	completely readonly	boolean	—	false
disabled	whether disabled	boolean	—	false
editable	whether textbox is editable	boolean	—	true
clearable	whether to show clear button	boolean	—	true
size	input size	string	large, small, mini	—
placeholder	placeholder in non-range mode	string	—	—
start-placeholder	placeholder for start date in range mode	string	—	—
end-placeholder	placeholder for end date in range mode	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 input	string	see date formats	yyyy-MM-dd HH:mm:ss
align	alignment	string	left, center, right	left
popper-class	custom class name for DateTimePicker dropdown	string	—	—
picker-options	additional options, see table below	object	—	{}
range-separator	range separator	string	-	'-'
default-value	default displayed date when picker opens	Date	parsable by new Date()	—
default-time	default time value after selecting date	non-range: string / range: string[]	non-range: string like 12:00:00; range: array of 2 strings like ['12:00:00', '08:00:00']	00:00:00
value-format	optional value format (returns string instead of Date)	string	see date formats	—
name	native attribute	string	—	—
unlink-panels	unlink 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

Parameter	Description	Type	Options	Default
shortcuts	shortcut options: { text, onClick }, see demo	Object[]	—	—
disabledDate	function that determines if a date is disabled	Function	—	—
firstDayOfWeek	first day of week	Number	1 to 7	7

Shortcuts

Parameter	Description	Type	Options	Default
text	display text	string	—	—
backfillShortcutActive	whether shortcut is active by default	boolean	—	—
backfillShortcut	whether to backfill shortcut text	boolean	—	—
onClick	callback when selected, emits 'pickByShortcut' event	function	—	—

Events

Event Name	Description	Parameters
change	triggers when user confirms value	component's bound value (format depends on value-format)
blur	triggers when input loses focus	component instance
focus	triggers when input gains focus	component instance
setShortcutHighlight	sets shortcut highlight	text of shortcut to highlight

Methods

Method	Description	Parameters
focus	focus the input	—

Slots

Name	Description
range-separator	custom separator

Mobile DateTime Picker

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

Basic Usage

Use .sync modifier on visible prop to let component handle popup state automatically.

<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 Format

Similar to date formatting functions, uses regex to capture placeholders.

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

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

Unidirectional Data Flow

Other pickers don't support this - consider wrapping the component if needed.

Set :value-binding="false" to disable v-model two-way binding (allows omitting v-model).

API

Option	Description	Type	Values	Default
visible	controls visibility	Boolean		false
v-model	selected value	Date|String		--
min-date	minimum selectable date	Date		Jan 1, 10 years ago
max-date	maximum selectable date	Date		Dec 31, 10 years later
min-hour	minimum hour	Number		0
max-hour	maximum hour	Number		23
format	display format (comma-separated)	String		yyyy,MM,dd,hh,mm
item-height	option height (px)	Number		36
visible-item-count	number of visible items	Number		7
value-binding	enables/disables two-way binding	Boolean		true
cancel-btn-text	cancel button text	String		Cancel
confirm-btn-text	confirm button text	String		Confirm
class-name	root popup class	String		--

Events

Event	Description	Params
cancel	when cancel clicked	--
confirm	when confirm clicked	value
update:visible	when popup visibility changes	visible

Additional API

Includes all Datetime Picker APIs plus:

Option	Description	Type	Values	Default
show-toolbar	whether to show toolbar	Boolean		true
prevent-click	disable click events if picker isn't at bottom	Boolean		false