1.0.5 • Published 4 years ago
fk-date-picker v1.0.5
fk-date-picker
基于element-ui的el-data-picker组件,针对公司选择区间日期习惯,调整操作风格。默认选择日期需要点击确定按钮关闭。
Install
npm install fk-data-picker -S
yarn add fk-data-picker
Quick Start
import Vue from 'vue'
import FkDatePciker from 'fk-data-picker'
Vue.use(FkDatePciker)Description
原来element-ui表格属性都继承支持,合并表格用到的属性如下
| 参数 | 说明 | 类型 | 可选值 | 默认 | 
|---|---|---|---|---|
| auto-confirm | 选择日期后是否自动确认关闭 | boolean | false | |
| unlink-panels | 原有属性,在范围选择器里取消两个日期面板之间的联动 | boolean | 
Examples
普通分组
unlink-panels和auto-confirm 属性
 

    <fk-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      :unlink-panels="disabled"
      auto-confirm
      :picker-options="pickerOptions"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </fk-date-picker>
  <fk-date-picker
      v-model="value1"
      type="monthrange"
      range-separator="至"
      :unlinkPanels="disabled"
      :picker-options="pickerOptions"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </fk-date-picker>
  export default {
    data() {
      const that = this;
      return {
        value1: null,
        disabled: true,
        pickerOptions: {
          onPick({ maxDate, minDate }) {
            that.disabled = !(maxDate && minDate);
          }
        }
      };
    },
  }