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

现在使用的比较多的日期插件比如：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. Which are in?

    Which are in? Given two arrays of strings a1 and a2 return a sorted array in lexicographical order a ...

  2. WCF - Architecture

    WCF - Architecture WCF has a layered architecture that offers ample support for developing various d ...

  3. hdu4655Cut Pieces

    http://acm.hdu.edu.cn/showproblem.php?pid=4655 先以最大的来算为 N*所有的排列数  再减掉重复的 重复的计算方法:取相邻的两个数的最小值再与它前面的组合 ...

  4. poj3254Corn Fields(状压）

    http://poj.org/problem?id=3254 第一个状压题 思路挺好想 用二进制表示每行的状态 然后递推 用左移 右移来判断是不是01间隔出现 c大神教的 我的代码WA在这个地方了.. ...

  5. JAVASCRIPT中RegExp.$1是什么意思

    RegExp 是javascript中的一个内置对象.为正则表达式. RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个 子匹配(以括号为标志)字符串,以此类推,RegExp. ...

  6. .net文件压缩和解压及中文文件夹名称乱码问题

    /**************************注释区域内为引用http://www.cnblogs.com/zhaozhan/archive/2012/05/28/2520701.html的博 ...

  7. [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 ...

  8. CORREL

    CORREL Show All Returns the correlation coefficient of the array1 and array2 cell ranges. Use the co ...

  9. [Irving] Android 点击两次返回退出系统

    Activity 中定义成员变量: private Long firstClickTime = 0l; //记录第一次点击时间 重载OnKeyDown方法 代码: @Override public b ...

  10. lua部分 tips

    lua文件刷新 function require_ex( _mname ) if _mname == "" then return end if package.loaded[_m ...