定制化日期选择组件,不建议个人下载使用

使用方式

执行npm i zixun_date

在你的vue项目中

import Vue from 'vue'
import zixunDate from 'zixun_date'
Vue.use(zixunDate)

即可。

模式一（年月日的选择）

this.$zixunDate.show({
    type: "", //默认 datePicker
    date: "", //初始化时间  //默认初始化今天
    endTime:'',  //截至时间 //默认 1950-01-01
    startTime:'',  //开始时间 //默认 2050-01-01
    onOk: date => {  //点击确定回调
        this.date = date;
        console.log(date);
    },
    onCancel:()=>{ //点击取消回调
        console.log('点击了取消')
    }
});

模式二（指定列表模式的选择）

...
data(){
    return {
        dataList = ['2018-11-03','2018-11-12','2018-11-13','2018-11-14','2018-11-15','2018-11-16','2018-11-17','2018-11-18']
    }
}
//vue API
...

this.$zixunDate.show({
    type: "select",
    customList: this.dataList,//自定义时间列表  默认[] type Array
    index:4,    //默认选中数组中的第几个 默认 0 type Number
    //date: "", //当前模式下 该API不起作用
    // endTime:'2050-9-8',  //当前模式下 该API不起作用
    // startTime:'1970-06-19', //当前模式下 该API不起作用
    onOk: e => { //点击确定回调
        this.date2 = e;
    },
    onCancel: () => { //点击取消回调
    },
    //滚动到底部回调
    scrollBtm:()=>{ //方便滚动到底部之后加载更多的列
        //此处直接使用 this.dataList = '新的数组'即可驱动数据模型更改视图渲染
    },
    //滚动到顶部回调
    scrollTop:()=>{

    },
       
});