vue-awesome-calendar
v0.0.5
Published
一个基于vue2.x的日历组件
Downloads
7
Readme
vue-awesome-calendar
一个基于Vue2.x的日历组件
Github
安装
# install dependencies
npm install vue-awesome-calendar --save-dev
使用
import Calendar from 'vue-awesome-calendar'
Vue.use(Calendar)
// or
Vue.component('Calendar', Calendar)
<Calendar type="range" :show="show1" :dateRange="dataRange" placeholder="选择日期" :leftNav="true" @select="select1"></calendar>
查看效果
git clone https://github.com/ChenJiaH/vue-awesome-calendar.git
npm install
npm run dev
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---- | :---- | :---- | :---- | :---- | | show | 可选,是否默认显示 | Boolean | true/false | false | | leftNav | 可选,是否需要左侧快捷导航 | Boolean | true/false | false | | type | 可选,日期范围还是日期 | String | range/default | default | | date | 可选,设置默认选中的日期,传入Date可识别格式即可 | String/Number | 'yyyy/MM/dd'/1502899200000 | 无 | | dateRange | 可选,设置默认选中的日期范围,同上,传入Date可识别格式即可 | Array | ['yyyy/MM/dd','yyyy/MM/dd'] | 无 | | disabledDate | 可选,设置哪些日期禁止选择,入参为day,返回true/false | Function | | 无 |
Events
select
如果是选择日期范围,只有在选择正确的日期范围才触发,返回日期范围数组; 如果是选择日期,返回日期对象;
Slots
贡献
- McChen
- [孙超]
更新说明
v0.0.4 && v0.0.5
- calendar组件UI优化
v0.0.3
- tabs组件样式调整,激活项下方不在有边框
- calendar组件增加 自定义 禁止选中日期的功能,参数为disabeldDate
协议
MIT