v-calendar-creek

基于Vue2.0写的一套简易的日历

Usage no npm install needed!

<script type="module">
  import vCalendarCreek from 'https://cdn.skypack.dev/v-calendar-creek';
</script>

README

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

  • 如果有什么兼容问题或者报错问题,可以直接通过邮件方式联系我:asd503262217@sina.com

Update

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