需求：在项目中需要一款这样的日期插件，可以选择年月日，时分秒，对法定节假日不能选择，因法定节假日进行的调休可以选择；

现在使用的比较多的日期插件比如：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日期时间插件-----限定节假日调休的可选择性的更多相关文章

  1. Mint-UI 的 DatetimePicker 日期时间插件的安装与使用

    简介:Mint-UI是饿了么出品的基于vue的移动端组件库(element-ui是桌面端) 官网:http://mint-ui.github.io/docs/#/zh-cn2 项目环境:vue-cli ...

  2. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  3. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  4. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

  5. jquery datetimepicker 日期时间控件的使用及参数说明

    首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注:该控件要依赖于jquery) <link ...

  6. jquery仿ios日期时间插件

    Demo下载: 手机时间控件.zip 使用之前,请在页面中加入以下js和css: jquery-1.9.1.js mobiscroll.core-2.5.2.js mobiscroll.core-2. ...

  7. DateTimePicker 日期时间选择器

    在同一个选择器里选择日期和时间 DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 T ...

  8. Ionic 日期时间插件

    1.插件安装 日期插件 时间插件 备注: 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker    https://github.c ...

  9. Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

随机推荐

  1. Android开发之bindService()侦听service内部状态

    在Android开发之bindService()通信的基础上,实现bindService()方法侦听service内部状态. 实现侦听service内部状态,使用的是回调机制 1.首先实现一个接口 p ...

  2. 如何配置Java环境

    下载JDK并安装 搜索JDK,官网立马就出来了,下载之后个人觉得毕竟开发,毕竟这东西不大,C盘稳一点,安装在C盘可以的 配置 右键打开计算机->属性->高级系统设置->高级-> ...

  3. phpMyAdmin 'import.php'跨站脚本漏洞

    漏洞版本: phpMyAdmin phpMyAdmin 3.4.9 phpMyAdmin phpMyAdmin 3.4.8 phpMyAdmin phpMyAdmin 3.4.6 phpMyAdmin ...

  4. 【CSS】Beginner4:Text

    1.alter the size and shape of the text 2.font-family:Arial, Verdana,"Times New Roman",helv ...

  5. xp系统下网络打印机怎么设置

    亲测,可行 打印机共享可以有效节约办公资源,提高办公效率.可是还有很多朋友不知道怎么设置,我们这里讲一下网络打印机的设置方法. 1.我们点开桌面左下角的开始菜单,选择“打印机和传真” 2.我们右击某个 ...

  6. BeanPostProcessor 的使用，实现在对象初始化之前或者之后对对象进行操作

    import java.lang.reflect.Field; import org.springframework.beans.BeansException; import org.springfr ...

  7. J2EE开发常用开源框架技术(转)

    主要就我所了解的J2EE开发的框架或开源项目做个介绍,可以根据需求选用适当的开源组件进行开发.主要还是以Spring为核心,也总结了一些以前web开发常用的开源工具和开源类库 1持久层:1)Hiber ...

  8. MySql中启用InnoDB数据引擎的方法

    1.存储引擎是什么? Mysql中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术, ...

  9. hdoj 1237 简单计算器

    简单计算器 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  10. C++：private继承与public继承

    1 private, public, protected 访问标号的访问范围 private:只能由1.该类中的函数.2.其友元函数访问. 不能被任何其他访问,该类的对象也不能访问. protecte ...