vue-calendar-switch
移动端区间日期选择器
背景
市面上的日期选择插件很多，但是按照区间选择的特别少，基本上全是PC端的，移动端的很少，能满足我们公司个性化需求的就更少了，反正我是没有找到，再加上我们公司业务的个性化，索性开发并开源了这一款简洁的日期区间选择组件。
https://github.com/duanxb/vue-calendar-switch （欢迎start）
功能描述
此组件可以选择起始日期，第一次点击为开始时间，第二次点击为结束时间。可以跨月份选择，跨年分选择。
支持个性化配置如：
最大选择区间、
是否开启动画效果、
限制区间选择范围天数、
是否开启周六日禁止点击、
配置禁用的日期禁止点击
演示
image.png
下载
npm install vue-calendar-switch --save
引用
//main.js
import calendarSwitch from 'vue-calendar-switch'
Vue.prototype.$calendarSwitch = calendarSwitch;
使用
// 给元素绑定ref
<input type="text" placeholder="请选择日期区间" ref="calendar" unselectable="on" onfocus="this.blur()" readonly="readonly" class="inputstyle" v-model="appoint_datetime">
//methods中初始化一下
initCalendar() {
this.$calendarSwitch({
element: this.$refs.calendarTigger,
monthSize: 2,
minDate: '2019-12-01',
maxDate: '2020-05-03',
onSuccess: (data) => {
this.dateSpace = data.start_date +'~'+ data.end_date;
console.log(this.dateSpace);
},
onError: function(msg) {
console.log(msg)
}
});
}
参数
| 参数 | 说明 |
|---|---|
| element | [Object], 文本框对象 |
| monthSize | [Number]，展示的月份个数，默认4个 |
| showEffect | [String]：开启动画效果，默认'slideInBottom' |
| limitSection | [Number] 限制区间选择范围天数 0：不限制，大于0是限制多少天 |
| weekDisabled | [Boolean] 是否开启周六日禁止点击, 默认false 关闭 |
| startDate | [String] 开始时间 |
| endDate | [String] 结束时间 |
| minDate | [String] 选择范围：最小时间 |
| maxDate | [String] 选择范围：最大时间（最大范围时间要出现在monthSize月份之中） |
| disabledDate | [Array] 手动设置禁用的日期 |
回调
| 参数 | 说明 |
|---|---|
| onSuccess | [Function] 成功回调 |
| onError | [Function] 错误回调 |
