Used to select or enter dates.

Select Date

A basic date picker whose base unit is day.

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

Other Date Units

By extending basic date selection, you can select weeks, months, years, or multiple dates.

  <div class="container">
    <div class="block">
      <span class="demonstration">Week</span>
      <fx-date-picker
        v-model="value1"
        type="week"
        format="Week WW, yyyy"
        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 more 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>

Select Date Range

Conveniently select a time range in one picker.

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

Select Month Range

Conveniently select a month range in one picker.

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

Date Formats

Use format to specify the input display format, and value-format to specify the bound value format.

By default, the component accepts and returns Date objects. The following format strings are available, using UTC 2017-01-02 03:04:05 as an example:

Warning

Case-sensitive.

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

<template>
  <div class="block">
    <span class="demonstration">Defaults to 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">Use 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>

Default Display Date

Specify the default time for the start and end dates when selecting a date range.

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

Attributes

Parameter	Description	Type	Optional Values	Default
value / v-model	Bound value	date(DatePicker) / array(DateRangePicker)	-	-
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	-	-
type	Display type	string	year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange	date
format	Format displayed in the input box	string	See DateFormat	yyyy-MM-dd
align	Alignment	string	left, center, right	left
popper-class	DatePicker 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	Specific time of day used for selected dates in range selection	string[]	Array of length 2. 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
validate-event	Whether to trigger form validation on input	boolean	-	true

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
onPick	Callback executed after a date is selected. Only applies to daterange or datetimerange	Function({ maxDate, minDate })	-	-

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

Methods

Method	Description	Parameters
focus	Focuses the input	-
setShortcutHighlight	Sets shortcut highlight	Text of the shortcut to highlight