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

现在使用的比较多的日期插件比如：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. libvlc 双击,鼠标事件消息响应

    基于vlc 2.1 动态库实现接收双击消息的接收,使双击vlc播放画面可以全屏显示. 需要其他版本的vlc可以与我联系(有偿进行修改) 下载地址:http://download.csdn.net/de ...

  2. Visual Studio中的项目属性-->生成-->配置

    1.Debug配置 2.Release配置 2.Debug和Release的区别 (1)Debug有定义DEBUG常量,Release没有 (2)Debug没有优化代码,Release有 (3)生成路 ...

  3. Standard Attachments in Oracle Form 标准附件

    Standard Attachments in Oracle Form 默认情况下"附件"按钮是灰色的,本文将展示如何让某个Form的附件按钮变亮,并能上传附件. 以用户Form为 ...

  4. jQuery功能一览

    // Hello world!"); }); $("#btn5").click(function(){ $("#test5").val("D ...

  5. hadoop mapreduce核心功能描述

    核心功能描述 应用程序通常会通过提供map和reduce来实现 Mapper和Reducer接口,它们组成作业的核心. Mapper Mapper将输入键值对(key/value pair)映射到一组 ...

  6. LA_3026_Period_(kmp)

    描述 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  7. 年末促销 Windows Azure在线充值送微软商城硬件大礼包

    春节前充值,尽享云端体验, 缤纷好礼持续进行时.即日起至2015年2月13日, 充值1000元以上即享好礼.您可以查阅WindowsAzure 官网活动页面,即刻参与活动:http://www.win ...

  8. Ubuntu 安装Chrome步骤

    一.添加PPA 从Google Linux Repository(http://www.google.com/linuxrepositories/)下载安装Key,或把下面的代码复制进终端,回车,需要 ...

  9. 嵌入式linux中使用 DHCP功能描述

    嵌入式linux中使用 DHCP功能描述 busybox中udhcpc的默认script脚本地址为#define DEFAULT_SCRIPT   CONFIG_UDHCPC_DEFAULT_SCRI ...

  10. 【获取图像处理源码以及编译过程】在window下make。

    google 找算法 发现一片不错论文,google作者的主页 找到了相关代码: http://cs.nyu.edu/~ccouprie/code.html code部分--------------- ...