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

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

    不难发现,每个点出度显然为1,要想整个图形成环,必然每个点的入度也为1: 所以,不难想到将每个点i拆成两个点i1,i2构成二分图, 连边s--->i1 流量为1,费用为0,i2--->t流 ...

  2. BZOJ_1009_[HNOI2008]_GT考试_(动态规划+kmp+矩阵乘法优化+快速幂)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1009 字符串全部由0~9组成,给出一个串s,求一个长度为n的串,不包含s的种类有多少. 分析 ...

  3. Linux内核与根文件系统的关系

    开篇题外话:对于Linux初学者来说,这是一个很纠结的问题,但这也是一个很关键的问题!         一语破天机: “尽管内核是 Linux 的核心,但文件却是用户与操作系统交互所采用的主要工具.这 ...

  4. 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

    data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...

  5. json包的loads dumps区分

    符合json格式的字符串    --(json.laods)-->     json(字典形式或是列表形式)    --(json.dumps)-->    符合json格式的字符串

  6. PLS-00306:错误解决思路 - OracleHelper 执行Oracle函数的坑

    如果你是像我一样初次使用Net+Oracle的结合,我想你会跟我一样,有很大的概率碰到这个问题 ==================================================== ...

  7. HTTP 304 Response

    当一个客户端(通常是浏览器)向web服务器发送一个请求,如果web服务器返回304响应,则表示此请求的本地缓存是最新的,可以直接使用.这种方法可以节省带宽,避免重复响应. 一般来说,可以将一个请求分为 ...

  8. 【原】SparkContex源码解读（二）

    版权声明:本文为原创文章,未经允许不得转载. 继续前一篇的内容.前一篇内容为: SparkContex源码解读(一)http://www.cnblogs.com/yourarebest/p/53266 ...

  9. 使用 Windows PowerShell 管理Windows Azure映像

    你可以使用 Azure PowerShell 模块中的 cmdlet 管理可供你的 Azure 订阅使用的映像.这包括 Azure 提供的映像以及你上载的映像.对于某些映像任务,你还可以使用 Azur ...

  10. extjs Cannot read property 'dom' of null

    如果你的EXTJS报错: Cannot read property 'dom' of null,那就有可能是因为你的HTML或者JSP文件中的BODY标签里面少了个东西比如代码是: <html& ...