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

现在使用的比较多的日期插件比如：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. 【HDOJ】1018 Big Number

    数学题,还是使用log避免大数,但是不要忘记需要+1,因为0也是1位,log(100)= 2,但却是3位. #include <stdio.h> #include <math.h&g ...

  2. URAL1018. Binary Apple Tree

    链接 简单树形DP #include <iostream> #include<cstdio> #include<cstring> #include<algor ...

  3. EFI脚本

    https://software.intel.com/en-us/articles/efi-shells-and-scripting

  4. AFNetworking 2.0 获取json数据时,返回 NSLocalizedDescription=Request failed: unacceptable content-type: text/html, 解决方法.

    AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; manager.responseSe ...

  5. PHP位运算 详细说明

    在实际应用中可以做用户权限的应用我这里说到的权限管理办法是一个普遍采用的方法,主要是使用到”位运行符”操作,& 位与运算符.| 位或运行符.参与运算的如果是10进制数,则会被转换至2进制数参与 ...

  6. Orchard中的多语言功能

    在Orchard中支持了两种本地化的方法: 1.对Orchard应用程序和模块中的一些文本字符串进行本地化.这个就相当程序本身的多语言支持,大多数的CMS系统都支持这一功能,如:DotNetNuke. ...

  7. MVC3系列~Html.BeginForm与Ajax.BeginForm

    Html.BeginForm与Ajax.BeginForm都是MVC架构中的表单元素,它们从字面上可以看到区别,即Html.BeginForm是普通的表单提交,而Ajax.BeginForm是支持异步 ...

  8. HOOK windows消息 C# 代码

    Option Explicitprivate [DllImport("GAIS", SetLastError=true)] static extern long CallWindo ...

  9. VS2008压力测试时web测试记录器无显示

    系统:win7 浏览器:IE8 web测试记录器:Web Test Recorder   在运行vs2008Web压力测试时一直在浏览器左侧的web测试记录器无显示. 解决办法:     在IE工具栏 ...

  10. selenium 处理日期控件

    今天遇到日期控件无法处理的问题,在北京-air的帮助下,看了下这篇blog http://www.cnblogs.com/Fskjb/archive/2011/10/27/2227111.html 根 ...