内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

jquery ui的datepicker或者datetimepicker怎么设置某些日期/天不能被选择,变灰色

发布:2017-06-18 浏览: 评论(
datepicker怎么设置某些日期不能被选择?

 调用jQuery UI的datepicker控件的时候,有时需要设定控件中的某些天是不可选的。而datepicker中每次显示天之前都会调用beforeShowDay方法。所以可以再beforeShowDay方法中对选择的日期进行处理。

代码示例:
//1、第一种写法:

$("#datepicker" ).datepicker({
  dateFormat: "yy/mm/dd",
  beforeShowDay: disableSpecificDays()
});

var disabledDays = ....;//格式要与datepicker中的日期格式一致(yyyy/mm/dd)

function disableSpecificDays(date) {

    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    if (typeof(disabledDays) != "undefined") {

       for (var i = 0; i < disabledDays.length; i++) {

         if($.inArray(y + '/' + (m+1) + '/' +d ,disabledDays) != -1) {

         return [false];
     }
     }
    }
    return [true];
}

//2、另一种写法

//先拿到不能被点击的日期数组集合;
var disabledDays=["2017-06-18","2017-06-16","2017-05-20"];

$("#datepicker" ).datepicker({
  dateFormat: "yy/mm/dd",
  beforeShowDay: function(date){
          //date是插件返回的日期2017/6/18,匹配的时候要注意格式
      var dateText=(new Date(date.replace(/[-]/g,"/"))).Format ("yyyy-MM-dd");
          //为了大家方便,在下面附上Format()函数的定义,大家也可以像1上面那样去匹配;
     
      if($.inArray(dateText,disabledDays)!=-1){
         return [false];     
      }
      return [true];
      
  }
});



参数说明:

beforeShowDay : function(date),

在日期控件显示面板之前,每个面板上的日期绑定时都触发此事件,参数为触发事件的日期。
调用函数后,必须返回一个数组:
[0]此日期是否可选(true/false),
[1]此日期的CSS样式名称(""表示默认),
[2]当鼠标移至上面出现一段提示的内容。

初始:$('.selector').datepicker({ beforeShowDay: function(date) { ... } });


//貌似第二种写法个人认为更容易理解,这个也是小编在做项目时所用的方法,大家可按照自己喜好去用



//Format()日期格式化函数:

// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, 
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子: 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
调用: 

var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");  



前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2019 seozhijia.net 版权所有-粤ICP备13087626号-4