dateTimePicker日期时间插件-----限定节假日调休的可选择性
需求:在项目中需要一款这样的日期插件,可以选择年月日,时分秒,对法定节假日不能选择,因法定节假日进行的调休可以选择;
现在使用的比较多的日期插件比如:Wdatepicker,jqueryUI的datepicker,都有周六天的限制选择,但是不能满足上述需求,所以在这里对jqUI的datepicker进行扩增,实现上述功能,并对IE8进行兼容处理,如图所示:
代码连接:https://github.com/ilikecandice/dateTimePicker/tree/master
html部分:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>日期时间选择器:datetimepicker</title>
<meta name="keywords" content="datetimepicker, jquery" />
<meta name="description" content="datetimepicker" /> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/main.css"> <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-slide.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript"> $(document).ready(function (){
$(function(){
$("input[node-type='datepicker']").datetimepicker({
dateFormat: "yy-mm-dd",
timeFormat: 'hh:mm:ss',
showSecond:true,
firstDay:0,
beforeShowDay: noWeekendsOrHolidays
}); });
});
</script>
</head> <body>
<div id="header">
<div id="logo"><h1><a href="javascript:void;" >dateTimepicker</a></h1></div>
</div>
<div id="main">
<div class="demo">
<p><input type="text" id="example_1" node-type='datepicker'/></p>
</div>
</div> </body>
</html>
main.js部分
var natDays = ["2015-01-02","2016-10-07","2016-10-03","2016-10-06"];//节假日
var restDayss = ["2016-10-09","2016-10-12"];//调休日期 /*
IE8下new Date();的兼容性
*/
function parseISO8601(dateStringInRange) {
var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
date = new Date(NaN), month,
parts = isoExp.exec(dateStringInRange); if (parts) {
month = +parts[2];
date.setFullYear(parts[1], month - 1, parts[3]);
if (month != date.getMonth() + 1) {
date.setTime(NaN);
}
}
return date;
}
function nationalDays(date) { var holiDays = (function () {
var val = null;
// $.ajax({
// 'async': false,
// 'global': false,
// 'url': 'getdate.json',
// 'success': function (data) {
// val = data;
// }
// });
return val;
})(); var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear(); for (var i = 0; i < natDays.length; i++) {
//var myDate = new Date(natDays[i]);
var myDate = parseISO8601(natDays[i]);
if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
{ return [false,""];
}
}
return [true,""];
} function restDays(date){
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for(var i = 0;i<restDayss.length;i++){ var date1 = parseISO8601(restDayss[i]); if ((m == (date1.getMonth())) && (d == (date1.getDate())) && (y == (date1.getFullYear())))
{ return [true];
}
}
return [false];
} function noWeekendsOrHolidays(date) { var noWeekend = $.datepicker.noWeekends(date); if (noWeekend[0]) { return nationalDays(date);
} else{ return noWeekend && restDays(date); }
}
dateTimePicker日期时间插件-----限定节假日调休的可选择性的更多相关文章
- Mint-UI 的 DatetimePicker 日期时间插件的安装与使用
简介:Mint-UI是饿了么出品的基于vue的移动端组件库(element-ui是桌面端) 官网:http://mint-ui.github.io/docs/#/zh-cn2 项目环境:vue-cli ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- vue使用日期时间插件layDate
项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...
- jquery datetimepicker 日期时间控件的使用及参数说明
首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注:该控件要依赖于jquery) <link ...
- jquery仿ios日期时间插件
Demo下载: 手机时间控件.zip 使用之前,请在页面中加入以下js和css: jquery-1.9.1.js mobiscroll.core-2.5.2.js mobiscroll.core-2. ...
- DateTimePicker 日期时间选择器
在同一个选择器里选择日期和时间 DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 T ...
- Ionic 日期时间插件
1.插件安装 日期插件 时间插件 备注: 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker https://github.c ...
- Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定
一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...
随机推荐
- Which are in?
Which are in? Given two arrays of strings a1 and a2 return a sorted array in lexicographical order a ...
- WCF - Architecture
WCF - Architecture WCF has a layered architecture that offers ample support for developing various d ...
- hdu4655Cut Pieces
http://acm.hdu.edu.cn/showproblem.php?pid=4655 先以最大的来算为 N*所有的排列数 再减掉重复的 重复的计算方法:取相邻的两个数的最小值再与它前面的组合 ...
- poj3254Corn Fields(状压)
http://poj.org/problem?id=3254 第一个状压题 思路挺好想 用二进制表示每行的状态 然后递推 用左移 右移来判断是不是01间隔出现 c大神教的 我的代码WA在这个地方了.. ...
- JAVASCRIPT中RegExp.$1是什么意思
RegExp 是javascript中的一个内置对象.为正则表达式. RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串,以此类推,RegExp. ...
- .net文件压缩和解压及中文文件夹名称乱码问题
/**************************注释区域内为引用http://www.cnblogs.com/zhaozhan/archive/2012/05/28/2520701.html的博 ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]Contents
I find it may cost me so much time in doing such solutions to exercises and problems....I am sorry t ...
- CORREL
CORREL Show All Returns the correlation coefficient of the array1 and array2 cell ranges. Use the co ...
- [Irving] Android 点击两次返回退出系统
Activity 中定义成员变量: private Long firstClickTime = 0l; //记录第一次点击时间 重载OnKeyDown方法 代码: @Override public b ...
- lua部分 tips
lua文件刷新 function require_ex( _mname ) if _mname == "" then return end if package.loaded[_m ...