calendar
```html
<div class="box flex relative demoCalendar">
<div class="form_title flex0">时间</div>
<div class="form_select flex1"><span></span><input type="text" data-name="时间" data-required="0"></div>
<div class="form_right flex0">请选择<i class="phoenix_icon phoenix_icon_right"></i></div>
</div>
```
实例1(选单天,最简化)
---
```javascript
new phoenix.calendar({
ele: page.querySelector('.demoCalendar'),
complete: function(selectDate) {
console.log('你选了:'+ selectDate);
}
});
```
实例2(多天,最简化)
---
```javascript
new phoenix.calendar({
ele: page.querySelector('.demoCalendar'),
type: 'multiple',
complete: function(selectDate) {
console.log('你选了:'+ selectDate);
}
});
```
实例3(时间段,最简化)
---
```javascript
new phoenix.calendar({
ele: page.querySelector('.demoCalendar'),
type: 'range',
complete: function(selectDate) {
console.log('你选了:'+ selectDate);
}
});
```
实例4(时间段,全部配置项)
---
```javascript
new phoenix.calendar({
ele: page.querySelector('.demoCalendar'),
title: '请选择日期',
type: 'range',
defaultDate: ['2020/7/11', '2020/7/12'],
defaultShow: '2020/7/1',
minDate: '2020/6/3',
maxDate: '2020/7/20',
filterDate: function(d) {
if(d.getDay() === 0 || d.getDay() === 6) {
return false;
};
return true;
},
already: function(defaultDate) {
console.log(defaultDate)
},
confirm: function(selectDate){
if(selectDate.length >5) {
return '最多只能选5天!';
} else {
return 'ok';
};
},
complete: function(selectDate) {
console.log('你选了:'+ selectDate);
}
});
```
配置项
---
|属性|类型|默认值|说明|
|-|-|-|-|
|ele|DOM|-|必需,触发DOM元素|
|title|string|日期选择| 可选,标题名字|
|type|string|single|可选,选择类型,single表示选择单个日期,multiple表示选择多个日期,range表示选择日期区间|
|defaultDate|array|-| 可选,默认选中的日期<span style="color:red">注意:日期格式为 2020/7/20,用斜线隔开,不可用-</span>|
|defaultShow|string|当前月份| 可选,初次打开的月份<span style="color:red">注意:日期格式为 2020/7/20,用斜线隔开,不可用-</span>|
|minDate|string|不限| 可选,最小可选的日期 <span style="color:red">注意:日期格式为 2020/7/20,用斜线隔开,不可用-</span>|
|maxDate|string|不限| 可选,最大可选的日期<span style="color:red">注意:日期格式为 2020/7/20,用斜线隔开,不可用-</span>|
|filterDate|function|-|可选,设置不可选的日期过滤,每次月历生成所有日期均会调用此过滤,返回false表示该天不可选|
|already|function|-| 可选,初始化成功回调,defaultDate为默认日期|
|confirm|function|-| 可选,选择后点击确定的回调,仅在返回ok时选择成功,关闭插件。<br>返回其他将以错误提示形式显示,,selectDate为选择的日期数组|
|complete|function|-| 可选,完成选择的回调,selectDate为选择的日期数组|