【问题标题】:jQuery datepicker exclude datesjQuery datepicker 排除日期
【发布时间】:2012-03-10 14:06:27
【问题描述】:

我想从jQuery datepicker ui 做不同类型的排除日期。这些在下面。

  • 单一日期:一个或多个特定日期。
  • 循环日:应始终禁用日历中的日期,例如;星期日。
  • 循环日期:应始终禁用特定日期。
  • 期间:禁用两个日期范围之间的日期。
  • 循环周期:循环禁用两个日期范围之间的日期。

我的 JSON 数据

{ “单身的”: [ “2012 年 2 月 4 日”, “2012 年 3 月 2 日” ], “recurrent_day”:[ 0 ], “recurrent_date”:[ 28 ], “时期”: [ { “来自”:“2012 年 2 月 21 日”, “至”:“2012 年 2 月 22 日” } ], “recurrent_period”:[ { “来自”:“2012 年 2 月 28 日”, “至”:“2012 年 2 月 29 日”, “期间”:“每月” } ] }

我该怎么做,有人帮帮我。

谢谢。

【问题讨论】:

  • 如果 jquery 提供了一种干净的方式来做到这一点,那么没关系,否则我会推荐任何其他日期选择器,甚至是定制的。
  • 什么是潜在的“时期”?您使用了“每月”,但这实际上只是一个严重的日期,应该给“recurrent_date”。你要年年吗?还有其他理由有“每月”吗?
  • @Sinetheta:是的,你是对的。每年还有另一个选择。
  • 我添加了一个“年度”案例来证明这一点。让我知道它是如何工作的;)
  • @Sinetheta:你已经把我逗乐了,你能澄清我的评论吗

标签: jquery jquery-ui jquery-ui-datepicker


【解决方案1】:

偷偷使用beforeShowDay 回调。抱歉耽搁了,我在recurrent_period 中有一个错误,我花了一段时间才发现。我在测试套件中添加了一个“年度”案例。让我知道我是否在这里忽略了什么。有趣的问题! jsFiddle

var invalid = { "single": [ "2/4/2012", "3/2/2012" ], "recurrent_day": [ 0 ], "recurrent_date": [ 28 ], "period": [ { "from": "2/21/2012", "to": "2/22/2012" } ], "recurrent_period": [ { "from": "2/28/2012", "to": "2/29/2012", "period": "monthly" },{ "from": "2/7/2012", "to": "2/9/2012", "period": "yearly" } ] };
function single(date){
    var USdate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
    return ($.inArray(USdate,invalid.single) > -1);
}
function recurrent_day(date){
    return ($.inArray(date.getDay(),invalid.recurrent_day) > -1);
}
function recurrent_date(date){
    return ($.inArray(date.getDate(),invalid.recurrent_date) > -1);
}
function period(date){
    var i, num, period, start, startArray, end, endArray;
    num = invalid.period.length;
    for(i=0;i<num;i++){
        period = invalid.period[i];
        startArray = period.from.split('/');
        start = new Date(startArray[2], (startArray[0] - 1), startArray[1]);
        endArray = period.to.split('/');
        end = new Date(endArray[2], (endArray[0] - 1), endArray[1]);        
        if(date>=start && date<=end){
            return true;
        }
    }
    return false;
}
function recurrent_period(date){
    var i, num, period, recurrence, startArray, endArray, startDay, endDay, start, end;
    num = invalid.recurrent_period.length;
    for(i=0;i<num;i++){
        period = invalid.recurrent_period[i];
        recurrence = period.period;
        startArray = period.from.split('/');
        endArray = period.to.split('/');

        if( recurrence === 'monthly' ){  
            startDay = parseInt( startArray[1], 10);
            endDay = parseInt( endArray[1], 10);
            if( date.getDate() >= startDay && date.getDate() <= endDay ){
                return true;             
            }               
        }else if( recurrence === 'yearly' ){
            start = new Date(date.getFullYear(), (startArray[0] - 1), startArray[1]);
            end = new Date(date.getFullYear(), (endArray[0] - 1), endArray[1]);  
            console.log({start:start.toDateString() ,end:end.toDateString(),day:date.toDateString()})   
            if(date>=start && date<=end){
                return true;
            }  
        }
    }
    return false;
}

$('input').datepicker({
    beforeShowDay: function(date){
        if(single(date)){
            return [false];
        }else if(recurrent_day(date)){
            return [false];
        }else if(recurrent_date(date)){
            return [false];
        }else if(period(date)){
            return [false];
        }else if(recurrent_period(date)){
            return [false];
        }
        return [true];
    }
});

【讨论】:

  • 看起来你解决了我的问题,你能澄清一下如何即时执行此操作吗?我的意思是当我从选择框中选择选项时,ajax 调用将返回 json。我需要重新配置日历.
  • ajax 什么时候发生?如果您使用 ajax 来更新像 invalid 这样的全局变量,那么您可以随时更新它。上面的代码将在每次出现日期选择器时运行,因此使用beforeShowDay。每次他们尝试选择一个日期时,它都会检查invalid 数组的当前状态。请记住,这不是非常防御性编码,我需要知道数据来自哪里,以及可能/可能不存在什么(例如:所有范围总是存在,只是有时是空的?)。
  • 是的,我明白,单函数和其他函数将如何获取无效变量的值。它存储在ajax成功。或者我可以在成功函数中使用函数。是的,有时范围会或全部为空。感谢您继续提供帮助。
  • 抱歉,我不确定我是否理解 ajax 何时发生。如果“可用性”信息在页面生命周期内没有改变,那么我会提前加载它,并且在输入字段可用之前不绘制输入字段(即:隐藏文档准备好的输入字段,然后再次显示它在您的 ajax 的成功处理程序中)。你能描述一下你的页面的生命周期吗? “可用性”信息是什么时候来的,从哪里来的,是什么改变了它?
猜你喜欢
  • 1970-01-01
  • 2020-12-20
  • 2013-02-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-02-15
  • 2020-03-26
  • 1970-01-01
相关资源
最近更新 更多