在jquery ui date-picker中如何允许选择特定的工作日并禁用其他工作日

问题描述 投票:4回答:2

我需要将jquery ui日期选择器限制为仅将未来的星期二和星期四作为可选日期。

我怎么能做到这一点?

javascript jquery jquery-ui datepicker jquery-ui-datepicker
2个回答
2
投票

为datepicker提供onSelect处理程序,让处理程序验证日期是否符合您定义的条件。我不确定onSelect会在哪里触发,因此如果您无法停止事件并提醒用户,您可以“撤消”选择。

这样做的一种方法是开发一个自定义日期验证器类,它接受参数,然后从onSelect函数调用该日期验证器。 onSelect函数可以处理与datepicker本身的交互,以保持设计清洁。

来自http://docs.jquery.com/UI/Datepicker/datepicker#options

$("div.selector").datepicker({ 
  onSelect: function(dateText) { 
    alert(dateText);
  } 
})

要更改特定日期或天数的显示和可选择性,请使用beforeShowDay处理程序并让它更改相关日期的可选性和CSS。

$(".selector").datepicker({ beforeShowDay: nationalDays})   

natDays = [
  [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
  [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
  [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
  [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1
          && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}

3
投票

一切都在文档中。 beforeShowDay之前的功能会做你想要的。

http://api.jqueryui.com/datepicker/#option-beforeShowDay

我的使用是不同的日子,但我最终在beforeShowDay调用我的limitdays函数

function limitDays(date){

var day = date.getDay();

  // Only make Mon, Tues, and Thurs selectable
  if(day == 1 || day == 2 || day == 4){
    return [true, ''];
  }else{
    return [false, ''];
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.