项目中引入了kendoUI，为了保持风格一致，项目中引入的组件，尽量优先使用kendoUI中已有的，避免引入更多的第三方库文件，不利于日后的管理和维护。
kendoUI2018最新版库文件中的日期插件，支持多选。
需要按着CTRL键，这样用户选时间的时候，可选多天（可连续也可不连续）。
- 更多详情可百度kendoUI官方文档，在这里，因项目使用的是老版本的kendo，为避免不必要的麻烦，暂时不更新，这里也就不过多详述。
暂已老版为例介绍，初次使用kendoDatePicker，还是记录一下，以备后用。
- 1.使用前，请先
引入必要的库文件。
我这里就不写了，注意修改路径。
-
- 在html文件中，放置容器，用于初始化日期插件，建议使用
input标签。
- 在html文件中，放置容器，用于初始化日期插件，建议使用
*
进场日期：
- 3.在相应的controller.js文件中初始化
// 最小日期 从填表开始，未超过12点，第二个工作日；否则第三个工作日
var currentDate = new Date();
var currentHour = currentDate.getHours();
var currentTimeStamp = currentDate.getTime();
if(currentHour >= 12){
currentTimeStamp+=86400000*2;//时间戳 往后推两天，毫秒
}else{
currentTimeStamp+=86400000;//时间戳 往后推一天，毫秒
}
var minDate = new Date(currentTimeStamp);
// change事件
function onChange(){
console.log("change-------->");
}
// 进场日期 起始日期、结束日期初始化 配置
$("#datepickerStar").kendoDatePicker({
// value: new Date(),//设置初始化默认选中的日期，
1. 若放个new Date()显示当前系统时间、
2. 若放个new Date("2018-02-20")，显示的是自定义的日期、
3. 放个空""或不设置value 显示为空，默认用placeholder来显示提示
// min: minDate,//设置可选的最小日期
// max: new Date(2018, 02, 28),//设置可选的最大日期
culture: "zh-CN" ,//中文显示，默认显示的是英文
disableDates: [ "sa","su"], // 设置周六、周日不可选
format: "yyyy-MM-dd",//设置回显日期的格式为年-月-日
//change: onChange,// 检测插件的变化函数
});
$("#datepickerEnd").kendoDatePicker({
// value: new Date(),//当前日期
//min: minDate,//最小日期
// max: new Date(2018, 2, 28),//最大日期
culture: "zh-CN" ,//中文显示
disableDates: ["sa","su"],
format: "yyyy-MM-dd",
//change: onChange,
});
- 4.获取起始日期和结束日期，偷懒就直接使用jquery的方法
默认kendoDatePicker插件，既可以点日历选日期，也可以手动输入日期。
- 校验用户手动输入的日期是否合法，使用正则表达式：
该正则表达式，不校验平闰年，不校验各月是否有29号、30号、31号。
仅校验格式为年份为四位数字，月份小于9前补0，日期范围[1,31]，年月日中间以-分隔。
var regDate = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
// 校验用户手动输入的日期格式是否合法
var regDate = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
// 校验进场日期
vm.ifEnterDateValid = function(){
$scope.moreDate = [];
var strDate = $("#datepickerStar").val();
var endDate = $("#datepickerEnd").val();
if(!strDate || !endDate){
toaster.error({title: "提示" , body: "起始日期或结束日期不得为空！"} );
vm.dateValid = false;
}else{
if(!regDate.test(strDate) || !regDate.test(endDate) ){
toaster.error({title: "提示" , body: "起始日期或结束日期格式非法，请修改为yyyy-MM-dd，例如：2018-03-16！"} );
vm.dateValid = false;
}else{
if(strDate+"" > endDate+""){
toaster.error({title: "提示" , body: "起始日期不能大于结束日期！"} );
vm.dateValid = false;
}else{
// 最小日期 从填表开始，未超过12点，第二个工作日；否则第三个工作日
var currentDate = new Date();
var currentHour = currentDate.getHours();
var currentTimeStamp = currentDate.getTime();
if(currentHour >= 12){
currentTimeStamp+=86400000*2;
}else{
currentTimeStamp+=86400000;
}
var minDate = new Date(currentTimeStamp);
var minMonth = minDate.getMonth()+1;
minMonth = minMonth>9?minMonth:'0'+minMonth;
var minYMD = minDate.getFullYear()+'-'+minMonth +'-'+minDate.getDate();
if(strDate+"" < minYMD+"" || endDate+"" < minYMD+""){
toaster.error({title: "提示" , body: "自系统提交时间起，若未超过当日12点，起始日期从第二个工作日开始选；若超过当日12点，起始日期从第三个工作日开始选！"} );
vm.dateValid = false;
}else{
// 范围不得超过31天
var startTimeStamp = new Date(strDate).getTime();
var endTimeStamp = new Date(endDate).getTime();
var range = (endTimeStamp - startTimeStamp)/(24*60*60*1000);
if(range > 31){
toaster.error({title: "提示" , body: "起始日期与结束日期不得超过31天！"} );
vm.dateValid = false;
}else{
var pushDate = strDate+'~'+endDate;
//var moreDateStr = $scope.moreDate.join(",");
//if(moreDateStr.indexOf(pushDate) != '-1'){
// toaster.error({title: "提示" , body: "该时间段已添加，请重新选择时间！"} );
//}else{
// $scope.moreDate.push(pushDate);
//}
//$("#datepickerStar").val("");
//$("#datepickerEnd").val("");
$scope.moreDate.push(pushDate);
}
}
}
}
}
}
- 5.然而貌似存在一个问题
虽然日期插件限制了不能点选周六周日，但是用户手动输入的日期可以为周六或周日。
显然除校验用户是否输入日期、日期格式是否合法、还要校验是否为周六、周日。
两种方法解决：
方法1：调用new Date()对象下的方法，获取周几属性值，若为0（周日）或6（周六），提示错误不得输入周六、周日的日期，同时时间清空，让用户重新输入。
方法2：直接取消用户手动输入，只能点日历选择日期即可。
- 6.怎么取消用户手动输入功能
注意： 请勿直接在html中的容器标签input上添加readonly或disabled属性，这回导致日期插件，既不能点选，也不能手动输入。
正确操作方式：
添加以下设置，即可禁用用户手动输入功能
var demoName = $("#demoID").kendoDatePicker(配置自己按实际需求设置).data("kendoDatePicker");
demoName .element[0].disabled=true;
举例示范：
// 进场日期 起始日期、结束日期初始化 配置
var starDP = $("#datepickerStar").kendoDatePicker({
// value: new Date(),//当前日期
// min: minDate,//最小日期
// max: new Date(2018, 2, 28),//最大日期
culture: "zh-CN" ,//中文显示
disableDates: [ "sa","su"],
format: "yyyy-MM-dd",
//change: onChange,
}).data("kendoDatePicker");
starDP.element[0].disabled=true;
var endDP = $("#datepickerEnd").kendoDatePicker({
// value: new Date(),//当前日期
//min: minDate,//最小日期
// max: new Date(2018, 2, 28),//最大日期
culture: "zh-CN" ,//中文显示
disableDates: ["sa","su"],
format: "yyyy-MM-dd",
//change: onChange,
}).data("kendoDatePicker");
endDP.element[0].disabled=true;
暂时就写到这里，以后有什么问题会继续更新，待续。。。