FxDatePicker Date Picker

Different interaction patterns exist between mobile and PC, hence more parameter variations. For mobile usage, please refer directly to the mobile section at the bottom.

For selecting or inputting dates.

Date Selection

Basic date picker with "day" as the fundamental unit.

Default

With shortcuts

The basic unit is specified by the type attribute. Quick options require configuring shortcuts in the picker-options object. Disabled dates are set via disabledDate function.

<template>
    <div class="block">
      <span class="demonstration">Default</span>
      <fx-date-picker
        v-model="value1"
        type="date"
        :default-value="defaultValue"
        placeholder="Select date"
        @change="changeHandler">
      </fx-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">With shortcuts</span>
      <fx-date-picker
        v-model="value2"
        align="right"
        type="date"
        size="small"
        placeholder="Select date"
        :picker-options="pickerOptions">
      </fx-date-picker>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: 'Today',
            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);
            }
          }]
        },
        defaultValue:'2019/6/5',
        value1: '',
        value2: '',
      };
    },
    methods:{
      changeHandler(val){
        console.log('changeHandler: ',val,this.value1);
      },
    }
  };
</script>

Expand Copy Copy

Other Date Units

Extended date selection allows choosing weeks, months, years, or multiple dates.

Week

Month

Year

Multiple dates

  <div class="container">
    <div class="block">
      <span class="demonstration">Week</span>
      <fx-date-picker
        v-model="value1"
        type="week"
        format="yyyy [Week] WW"
        placeholder="Select week"
        @change="changeHandler">
      </fx-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">Month</span>
      <fx-date-picker
        v-model="value2"
        type="month"
        placeholder="Select month"
        @change="changeHandler">
      </fx-date-picker>
    </div>
  </div>
  <div class="container">
    <div class="block">
      <span class="demonstration">Year</span>
      <fx-date-picker
        v-model="value3"
        type="year"
        placeholder="Select year"
        @change="changeHandler">
      </fx-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">Multiple dates</span>
      <fx-date-picker
        type="dates"
        v-model="value4"
        placeholder="Select one or multiple dates"
        @change="changeHandler">
      </fx-date-picker>
    </div>
  </div>

<script>
  export default {
    data() {
      return {
        value1: '',
        value2: '',
        value3: '',
        value4: ''
      };
    },
    methods:{
      changeHandler(val){
        console.log('changeHandler: ',val,this.value1);
      },
    }
  };
</script>

Expand Copy Copy

Date Range Selection

Conveniently select a time range within one picker.

Default

With shortcuts

For date range selection, panels are linked by default. Use unlink-panels to disable synchronization between panels.

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <fx-date-picker
      v-model="value1"
      type="daterange"
      range-separator="to"
      start-placeholder="Start date"
      end-placeholder="End date"
        @change="changeHandler">
    </fx-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With shortcuts</span>
    <fx-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      size="mini"
      range-separator="to"
      start-placeholder="Start date"
      end-placeholder="End date"
      :picker-options="pickerOptions"
      ref="demo3_2_datepicker"
      @change="changeHandler">
    </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',
            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);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    },
    methods:{
      changeHandler(val){
        console.log('changeHandler2: ',val);
        // this.$refs.demo3_2_datepicker.setShortcutHighlight('Last three months');
      }
    }
  };
</script>

Expand Copy Copy

Month Range Selection

Conveniently select a month range within one picker.

Default

With shortcuts

For month range selection, panels are linked by default. Use unlink-panels to disable synchronization between panels.

<template>
  <div class="block">
    <span class="demonstration">Default</span>
    <fx-date-picker
      v-model="value1"
      type="monthrange"
      range-separator="to"
      start-placeholder="Start month"
      end-placeholder="End month"
      @change="changeHandler">
    </fx-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With shortcuts</span>
    <fx-date-picker
      v-model="value2"
      type="monthrange"
      align="right"
      unlink-panels
      size="small"
      range-separator="to"
      start-placeholder="Start month"
      end-placeholder="End month"
      :picker-options="pickerOptions">
    </fx-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: 'This month',
            backfillShortcut:true,
            onClick(picker) {
              picker.$emit('pickByShortcut', [new Date(), new Date()],this);
            }
          }, {
            text: 'Year to date',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pickByShortcut', [start, end],this);
            }
          }, {
            text: 'Last six months',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pickByShortcut', [start, end],this);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    },
    methods:{
      changeHandler(val){
        console.log('changeHandler: ',val,this.value1);
      }
    }
  };
</script>

Expand Copy Copy

Date Format

Use format to specify the display format in the input box; use value-format to specify the binding value format.

By default, the component accepts and returns Date objects. Below are available format strings (UTC example: January 2, 2017 03:04:05):

:::warning Note letter casing :::

Format	Meaning	Notes	Example
yyyy	Year		2017
M	Month	No padding	1
MM	Month		01
W	Week	Only for week picker format; no padding	1
WW	Week	Only for week picker format	01
d	Day	No padding	2
dd	Day		02
H	Hour	24-hour; no padding	3
HH	Hour	24-hour	03
h	Hour	12-hour, must use with A/a; no padding	3
hh	Hour	12-hour, must use with A/a	03
m	Minute	No padding	4
mm	Minute		04
s	Second	No padding	5
ss	Second		05
A	AM/PM	Only for format, uppercase	AM
a	am/pm	Only for format, lowercase	am
timestamp	JS timestamp	Only for value-format; bound value is number type	1483326245000

Default (Date object)

Value:

With value-format

Value:

Timestamp

Value:

<template>
  <div class="block">
    <span class="demonstration">Default (Date object)</span>
    <div class="demonstration">Value: {{value1 }}</div>
    <fx-date-picker
      v-model="value1"
      type="date"
      placeholder="Select date"
      format="yyyy/MM/dd">
    </fx-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">With value-format</span>
    <div class="demonstration">Value: {{ value2 }}</div>
    <fx-date-picker
      v-model="value2"
      type="date"
      placeholder="Select date"
      format="yyyy/MM/dd"
      value-format="yyyy-MM-dd">
    </fx-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">Timestamp</span>
    <div class="demonstration">Value: {{ value3 }}</div>
    <fx-date-picker
      v-model="value3"
      type="date"
      placeholder="Select date"
      format="yyyy/MM/dd"
      value-format="timestamp">
    </fx-date-picker>
  </div>
</template>

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

Expand Copy Copy

Default Display Date

Specify default time for start/end dates in range selection.

Component value:

For date ranges, start/end times default to 00:00:00. Use default-time array (e.g. ['00:00:00', '23:59:59']) to customize.

<template>
  <div class="block">
    <p>Component value: {{ value }}</p>
    <fx-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="Start date"
      end-placeholder="End date"
      :default-time="['00:00:00', '23:59:59']">
    </fx-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  };
</script>

Expand Copy Copy

Attributes

Parameter	Description	Type	Options	Default
value / v-model	Binding value	date(DatePicker) / array(DateRangePicker)	—	—
readonly	Read-only	boolean	—	false
disabled	Disabled	boolean	—	false
editable	Text input enabled	boolean	—	true
clearable	Show clear button	boolean	—	true
size	Input size	string	large, small, mini	—
placeholder	Placeholder for non-range	string	—	—
start-placeholder	Start date placeholder	string	—	—
end-placeholder	End date placeholder	string	—	—
type	Display type	string	year/month/date/dates/week/datetime/datetimerange/daterange/monthrange	date
format	Display format	string	See Date Format	yyyy-MM-dd
align	Alignment	string	left, center, right	left
popper-class	Dropdown class name	string	—	—
picker-options	Picker options (see below)	object	—	{}
range-separator	Range separator	string	—	'-'
default-value	Default display date	Date	Parsable by new Date()	—
default-time	Default time for ranges	string[]	Array of two time strings (e.g. ['00:00:00', '23:59:59'])	—
value-format	Binding value format	string	See Date Format	—
name	Native attribute	string	—	—
unlink-panels	Unlink range panels	boolean	—	false
prefix-icon	Custom prefix icon class	string	—	el-icon-date
clear-icon	Custom clear icon class	string	—	el-icon-circle-close
validate-event	Trigger validation	boolean	—	true

Picker Options

Parameter	Description	Type	Options	Default
shortcuts	Quick options ({ text, onClick } objects)	Object[]	—	—
disabledDate	Disable dates (returns Boolean)	Function	—	—
firstDayOfWeek	First day of week	Number	1-7	7
onPick	Callback after selection (daterange/datetimerange only)	Function({ maxDate, minDate })	—	—

Shortcuts

Parameter	Description	Type	Options	Default
text	Display text	string	—	—
backfillShortcutActive	Set as default active shortcut	boolean	—	—
backfillShortcut	Backfill shortcut text	boolean	—	—
onClick	Callback (emits 'pickByShortcut' event)	function	—	—

Events

Event	Description	Parameters
change	On confirmation	Component binding value
blur	On input blur	Component instance
focus	On input focus	Component instance

Methods

Method	Description	Parameters
focus	Focus input	—
setShortcutHighlight	Highlight shortcut	Shortcut text

Mobile Date Picker

Supports date (year-month-day) selection.

Usage Guide

Basic Usage

With .sync modifier on visible, the component manages popup visibility automatically.

<template>
  <fx-date-picker
    :visible.sync