基于复选框更改日期选择器

我有2个日期选择器，其中包含按钮窗格内的复选框。我想根据此框是否被选中来更改日期选择器。除了日期选择器的实际改变之外，一切似乎都在工作。我试图完成的是：如果复选框被选中，日期选择器将显示星期数和星期一的第一天。如果未选中该复选框，它不显示周数和周的第一天是星期天基于复选框更改日期选择器

脚本：

$(".datepicker").datepicker({ 
    showOn: 'button', 
    buttonText: 'Date', 
    showButtonPanel: true, 
    showWeek: false, 
    firstDay: 0, 
    beforeShow: function (input, inst) { 
    setTimeout(function() { 
     var buttonPane = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-buttonpane"); 
           var html = ""; 
     var html = '<div class="broadcastFilter"><input type="checkbox"><label> Use Broadcast calendar </label></div>'; 
     buttonPane.append(html); 
     test.DateSelectionDateEventBind(); 
     var optionChecked = $('.broadcastFilter input[type="checkbox"]').is(':checked'); 
     //works fine up until here. 
     buttonPane.click(function() { 
      if(optionChecked) 
      { 
       $(".datepicker").datepicker('option', 'showWeek', true); 
       $(".datepicker").datepicker('option', 'firstDay', 1); 
      } 
      else 
      { 
       $(".datepicker").datepicker('option', 'showWeek', false); 
       $(".datepicker").datepicker('option', 'firstDay', 0); 
      } 
     }); 
    }, 1); 
    }, 
    onChangeMonthYear: function (input) { 
    setTimeout(function() { 
     var buttonPane = $(input) 
      .datepicker("widget") 
      .find(".ui-datepicker-buttonpane"); 
     var html = '<div><input type="checkbox"><label> Use Broadcast calendar </label></div>'; 
     buttonPane.append(html); 
     test.DateSelectionDateEventBind(); 
    }, 1); 
    } 
});

http://jsfiddle.net/dan_vitch/zEper/8/

来源

2011-12-07 dan_vitch

一件事你总是为optionChecked这是被点击前面的复选框，不改变复选框的状态决定检查。另一方面，您正在聆听整个buttonPane的点击事件，而不是复选框的点击事件。第三个问题是在打开日期选择器时，您没有将复选框设置为之前的值。（虽然也许你的test对象会照顾到这一点，但我没有看到这部分代码，小提琴只是给出了一个错误）。

所以，初始化复选框处于正常状态：

buttonPane.append(html); 
buttonPane.find(':checkbox').prop('checked', $('.datepicker').datepicker('option', 'showWeek'));

听复选框，点击：

buttonPane.find(':checkbox').click(function() {

...并单击时，不检查旧optionChecked财产，但不会改变，但检查复选框是否被选中：

if($(this).is(':checked'))

Here's a fiddle that takes care of all of that，但现在它只要点击复选框就会关闭。然而，当代码恢复以前的状态时，一旦你再次点击它，它就会以你改变它的方式显示出来。

来源

2011-12-07 22:33:38

优秀的答案。非常感谢所有的帮助。 –

你的主要问题是在你的范围变量“optionChecked”。在绑定到click事件的匿名函数中，optionChecked不存在。

解决这个问题最简单的方法就是在你的点击函数中移动声明。

buttonPane.click(function() { 
    var optionChecked = $('.broadcastFilter input[type="checkbox"]').is(':checked'); 

    if(optionChecked) { 
     $(".datepicker").datepicker('option', 'showWeek', true);  
     $(".datepicker").datepicker('option', 'firstDay', 1); 
    }

我觉得这是一个很好的机会（我没有检查），你的日期选择器将不只是通过改变选项显示更改。之后你可能不得不调用datepicker的刷新方法。

$('.datepicker').datepicker("refresh")

来源

2011-12-07 22:24:07

基于复选框更改日期选择器

回答

相关问题