一款轻量级vue2.x日历组件

一款轻量级vue2.x日历组件

vue2-date-component 一款基于vue2.x日期时间选择组件
项目地址：https://github.com/lhd1324/vue2-date-component

该组件支持常用的日期时间格式配置，同时也包括日期标记。

1>支持的时间格式预览图：

格式1：yyyy/mm/dd hh:mm:ss

1.gif

格式2：yyyy-mm-dd hh:mm:ss

2.gif

格式3：yyyy-mm-dd

3.gif

格式4：hh:mm:ss

4.gif

格式5：yyyy-mm-dd hh

5.gif

格式6：yyyy-mm-dd hh:mm

6.gif

格式7：hh:mm

7.gif

2>查看原插件(how to start)

安装依赖

npm insatll

运行服务

npm run dev

查看项目文件中demo 引入时间组件的例子

//引入代码
<Datepicker ref="Datepicker" :options.asyn="options"></Datepicker>

import Datepicker from '../vueDatepicker/index';
export default {
    data() {
        options:{
                curtime:"2018/06/10 10:02:03",  //为空时，获取当前时间  （参数是必须项，但可以不赋值）
                format:"yyyy/mm/dd hh:mm:ss",   //时间格式   （必选项）
                isHideOtherday:false,           //是否禁止选择未标记的日期（true禁止)  （可选项）
                markList:[    //需要标记的日期和自定义的标记样式只能为某日标记，不能添加时分秒 （可选项）
                    {
                        date: '2018-06-02', //日期
                        className: "label1"  //自定义class选择器名称
                    }, {
                        date: '2018/4/2',
                        className: "label1"
                    }, {
                        date: '2018/06/13',
                        className: "label2"
                    }
                ]
            },
    },
    watch:{ //监听日期变化后执行的操作
        'options.curtime':function(){
            console.log(this.options.curtime)
        }
    }
}

3>npm包安装

安装插件包

npm install vue2-date-component

引入插件

import myDatepicker from 'vue2-date-component'

*注意这里引入的有两种插件接口类型（使用时选其一）

接口1

import Vue from 'vue'
Vue.use(myDatepicker.Datepicker) 

接口2

components: {
    Datepicker:myDatepicker.VueDatepicker
}

希望能对大家的项目有所帮助，欢迎吐槽！
项目地址：https://github.com/lhd1324/vue2-date-component 感谢大家star