vue-date-calendar

vue-calendar

Case pictures

Requirements

• Vue.js 1.1.0 ~ 适用于vue1.0版本
• Vue.js 2.3.0 ~ 2.0vue版本需要大于2.3.0版本

*依赖插件为：zane-calendar ，不依赖任何第三方插件，包大小26K

Demo

http://www.seosiwei.com/zaneDate/index.html //参数一致

Instllation

$ npm install vue-date-calendar@1.2.0   vue1.0版本
$ npm install vue-date-calendar         vue2.0版本

Usage

<vue-date-calendar :option.sync="option"></vue-date-calendar>


import vueDateCalendar from 'vue-date-calendar'
export default {
    components: {
      vueDateCalendar
    },
    data(){
    return {
    	option{
    		elem:'#zane-calendar',   	控件的dom原生 注意：仅限制于id选择器     (必填,id前必须有#号)
                type:'day',   				可选类型 day year month time doubleday doubleyear doublemonth doubletime (必填)
                lang:'cn',   				可选择语言类型 cn , en  (可选)
                width:280,  				插件宽度配置   250 <= X <= 500 (可选)
                height:300, 				插件高度配置   250 <= X <= 350 (可选)
                behindTop:10,   			插件于输入框的高度  	(可选)
                format:'yyyy-MM-dd HH:mm:ss',  时间格式化 		(可选)
                value:'',  					插件初始默认值  		(参数名必须，双向绑定value值)
                min:'',  					  可选取时间最小范围 1900-10-01 (可选)
                max: '',  					可选取时间最大范围 	2099-12-31 (可选)
                zindex:100,   				z-index值 (可选)
                showtime:true,  			是否显示选择时间 (可选)
                showclean:true,  			是否显示清除按钮 (可选)
                shownow:true,  				是否显示当前按钮 (可选)
                showsubmit:true, 			是否显示提交按钮 (可选)
                haveBotBtns:true, 			是否有底部按钮列表 (可选)
                calendarName:'', 			此参数勿动 表示当前时间插件实例化对象 (可选)
                mounted:()=>{}, 			插件加载完成之后调用 (可选)
                change:()=>{}, 				时间变更之后调用 (可选)
                done:()=>{}, 				选择完成之后调用 (可选)
    	}
    }
    }    
}


//常用的option方式
option:{
    elem:"#demo1",
    type:'year',
    fromate:'yyyy-MM-dd'
}

option:{
    elem:"#demo2",
    type:'doubleday',
    fromate:'yyyy-MM-dd',
    showtime:true,
}

//参数配合会有很多的功能

License

The MIT License