jQuery Datepicker - 将范围限制为提前 7 个工作日(不包括周末)

Posted

技术标签:

【中文标题】jQuery Datepicker - 将范围限制为提前 7 个工作日(不包括周末)【英文标题】:jQuery Datepicker - Limit range to 7 WORKING days ahead (Excluding weekends) 【发布时间】:2016-03-12 00:46:45 【问题描述】:

正如标题所说,我试图让 jQuery Datepicker 允许用户从接下来的 7 个工作日中选择日期。我到处寻找解决方案,但我发现最接近的是可以选择的最早日期是从今天起 x 天。我需要限制可选范围。

例如,如果今天是 1 号星期一,那么我希望范围是 2 号到 10 号,因为我不想包括星期六或星期日。

所以 Datepicker 应该只允许 2nd(Tue)、3rd(Wed)、4th(Thu)、5th(Fri)、8th(Mon)、9th(Tue) 和 10th(Wed)。

显然这些只是示例日期,我希望它们适用于任何当前日期。

我的代码如下;

<script>
$(function () 
    
       var date = new Date();
       var currentMonth = date.getMonth();
       var currentDate = date.getDate();
       currentDate = currentDate;
       var currentYear = date.getFullYear();

       $('#datepicker2').datepicker(
       
        dateFormat: "yy-mm-dd",
        beforeShowDay: $.datepicker.noWeekends,
        minDate: new Date(currentYear, currentMonth, currentDate)
       ); 
  );
  </script>

任何帮助将不胜感激:-)

马特。

【问题讨论】:

***.com/questions/14685913/… 【参考方案1】:

这是一个有效的fiddle。

定义一个函数以仅将工作日添加到不包括周末的特定日期。

function addWeekdays(date, days) 
    date.setDate(date.getDate());
    var counter = 0;
        if(days > 0 )
            while (counter < days) 
                date.setDate(date.getDate() + 1 ); // Add a day to get the date tomorrow
                var check = date.getDay(); // turns the date into a number (0 to 6)
                    if (check == 0 || check == 6) 
                        // Do nothing it's the weekend (0=Sun & 6=Sat)
                    
                    else
                        counter++;  // It's a weekday so increase the counter
                    
            
        
    return date;

然后像下面这样初始化日期选择器:

$(function () 
       var date = new Date();
       var currentMonth = date.getMonth();
       var currentDate = date.getDate();
       currentDate = currentDate;
       var currentYear = date.getFullYear();
       var maxDate = addWeekdays(date, 7);

       $('#datepicker2').datepicker(
         dateFormat: "yy-mm-dd",
         beforeShowDay: $.datepicker.noWeekends,
         minDate: new Date(currentYear, currentMonth, currentDate),
         maxDate: maxDate
       ); 
  );

【讨论】:

也感谢您提供易于使用的解决方案 :-)【参考方案2】:

您可以使用 maxdate 并定义 +x 天,无需自定义 javascript。只需按编程方式使用功能

maxDate: '+9D'

供头脑使用-0

minDate: '+1D'

跳过周末

beforeShowDay: $.datepicker.noWeekends

从其他用户http://jsfiddle.net/wQe8c/914/更新小提琴

【讨论】:

这里不考虑排除周六周一的问题。 已更新,但用户已经拥有 , beforeShowDay: $.datepicker.noWeekends【参考方案3】:

在这种情况下,您想知道要添加到日期选择器的天数。我做了一个函数,根据星期几计算天数。

function getNext7WorkingDays()
    var d = new Date();
    var day = d.getDay();
    if(day>=0 && day<=3) return 9;
    else if(day!=6) return 10;
    else return 11;

它是如何工作的?如果今天是星期日 (0)、星期一 (1)、星期二 (2) 或星期三 (3),您想添加 9 天。如果是星期四(4)或星期五(5),则为 11。如果是星期六(6),则要添加 10 天。如果你愿意,你可以自己算算。

然后您只需将beforeShowDay: $.datepicker.noWeekends 参数添加到您的日期选择器对象。还要设置minDate: 1,,这样你就排除了“今天”。

完整代码:http://jsfiddle.net/oyy2reuf/

$(function() 

  function getNext7WorkingDays()
    var d = new Date();
    var day = d.getDay();
    if(day>=0 && day<=3) return 9;
    else if(day!=6) return 10;
    else return 11;
  
    $("#datepicker").datepicker(  
      minDate: 1,
      dateFormat: 'dd/mm/yy', 
      maxDate: '+'+getNext7WorkingDays()+'D',  
      beforeShowDay: $.datepicker.noWeekends
    );

);

【讨论】:

这是一个非常优雅的解决方案。感谢您的帮助!

以上是关于jQuery Datepicker - 将范围限制为提前 7 个工作日(不包括周末)的主要内容,如果未能解决你的问题,请参考以下文章

如何通过给出两个日期来限制 jquery datepicker 的日期范围?

My97DatePicker日期范围限制

.datepicker('setdate') 问题,在 jQuery 中

在AngularJS中为jQuery datepicker动态设置最大限制

如何限制 Bootstrap Datepicker 中的可选日期范围?

DatePicker [ eyecon ] 设置日期范围 jquery/javascript