V-calendar-creek

• 基于 Vue 2.0 开发的轻量级、多作用的日历组件
• 占用内存小，性能高，作用强，可扩展
• 全部由Vue实现，没有引入第三方库
• 不仅可以获取日期，还可以根据需求来获取时间
• 可以获取年 - 月 - 日 时 : 分 : 秒 ,可以单独获取其中几个，也可以获取全部，使用起来十分方便

Install

npm i v-calendar-creek --save
cnpm i v-calendar-creek --save  //国内镜像

效果展现

#Use

//vue文件中引入
import calendar from 'v-calendar-creek';

//全局引用
Vue.component("calendar",calendar)

//单页面引用

export default {
    data(){
        return {
            type:'second',
            getTime:'2018-10-26 00：00：00',
            onlyTime:'hour'
        }
    },
    components:{
        calendar
    },
    methods:{
        //如果在同个页面触发多个日历组件的话，可以传一个类名过去即可，如需要使用区间的话 开始==>".start" 结束==>'.end'
        getDate(val){
            this.$refs.start.show(val)
        },
        //子组件会把得到的时间返回过来
        getDateTime(val){
            console.log(val)
        }
    }
}

//组件引用
/**
 * type 是需要时分秒类型，分别：年-->year-->默认 月-->month 日-->day  时-->hour 分-->minute 秒-->second
 * getTime 是父组件传入的时间默认值 格式（2018-10-26 00：00：00 or 2018/10/26 00:00:00）
 * onlyTime 显示是否只显示时间 时-->hour 分-->minute 秒-->second 只需要时间 不需要日期的情况下使用
 * ref 添加ref值，会暴露出一个方法，show()
 * getDate 是子组件调用父组件的方法
 */
//eg.
<input type='text' @click='getDate()'>
<calendar :type="type" ref='time' :getTime="getTime" :onlyTime='onlyTime' @getDate="getDateTime"></calendar>

API

| 属性 | 说明 | 默认 | 是否必传 | | :------------- | :-------------------------------------------------------------------------------------------| :----------: | :------: | | type | 是需要时分秒类型，分别：年-->year-->默认 月-->month 日-->day 时-->hour 分-->minute 秒-->second | year | 否 | | getTime | 传入的时间默认值 格式（2018-10-26 00：00：00 or 2018/10/26 00:00:00） | 当前时间 | 否 | | onlyTime | 显示是否只显示时间 时-->hour 分-->minute 秒-->second 只需要时间 不需要日期的情况下使用 | 无 | 否 | | ref | 会暴露出一个方法，show() | 无 | 是 | | getDate | 是子组件调用父组件的方法 | 无 | 是 |

Other

• 如果有什么兼容问题或者报错问题，可以直接通过邮件方式联系我：[email protected]

Update

V 1.1.11 更新了代码，之前上传的代码有问题重新上传一次，并增加了选择日期完成之后如果小于10的值在前面加0，增家handleNum方法来进行处理