第二次不加载jquery中的DatePicker

时间:2015-12-07 05:08:55

标签: javascript jquery html datepicker

我的页面中有一个datepicker,我也有两个单选按钮,如下所示。

<input type="radio" name="radio1" value="radio1" checked> Radio 1 

<input type="radio" name="radio2" value="radio2" >Radio 2

我的datepicker html是:

<input 
       type="text" 
       id="mydatepicker" 
       aria-controls="sample_1" 
       class="form-control input-small input-inline" >

我的JS代码是:

$('#mydatepicker').datepicker({
        format: 'dd/mm/yyyy',
        beforeShowDay: EnableDisableDates
});

function EnableDisableDates(date) {
    var formattedDate = $.datepicker.formatDate('dd/mm/yy', date);
    if ($("#radio1").is(':checked') == false) {
        if (date < Date.parse('11/23/2015'))
            return {enabled: false};
    }
    else {
         return [true];
    }
}

我想显示选择广播1 的所有日期,我想在选择单选按钮2 (广播2)停用日期 2015年11月23日之前 ()

以上是我的情景。

我的问题是:

第一次加载时,它对 Radio 1 工作正常,即它启用 Radio 1 的所有日期。

在选择广播2 时,它没有在datepicker中调用 beforeShowDay 属性的EnableDisableDates方法。

我不知道为什么不调用这个方法。帮助我摆脱这个问题。

2 个答案:

答案 0 :(得分:1)

你可以使用minDate来禁用日期,而不是手动执行,这将花费成本:

试试这个:

<强> JS

$(function() {   
   $(".radio1").change(function () {    
    if($(".radio1:checked").val()=="radio2"){
      $('#mydatepicker').datepicker('destroy');
        $('#mydatepicker').datepicker({
          format: 'dd/mm/yyyy',        
          minDate: '11/23/2015'
        });
    }else{
      $('#mydatepicker').datepicker('destroy');
      $('#mydatepicker').datepicker({
          format: 'dd/mm/yyyy',                  
        });      
   }
  });
 $('#mydatepicker').datepicker({format: 'dd/mm/yyyy'}); 
  });

<强> HTML:

 <input type="radio" class="radio1" name="radio1" value="radio1" checked> Radio 1 
 <input type="radio" class="radio1" name="radio1" value="radio2" >Radio 2<input 
         type="text" 
         id="mydatepicker" 
         aria-controls="sample_1" 
         class="form-control input-small input-inline" >

Fiddle

更新

我们已经使用destroy来创建datepicker的新实例 jQuery DatePicker -- Changing minDate and maxDate on the fly看到这个

答案 1 :(得分:0)

我遇到了类似的问题。就我而言,这是一个下拉列表,根据该下拉列表,我禁用了日期选择器中的某些日期。它为我所做的更改而努力。但是对于第二次更改,它不起作用。

最后,我得到的解决方案是datepicker('remove')。

因此,这只需在change函数中添加一行代码即可。

$('#mydatepicker').datepicker('remove');

所以您的代码应该这样:

$(".radio1").change(function () {
$('#mydatepicker').datepicker('remove');
if($(".radio1:checked").val()=="radio2"){
  $('#mydatepicker').datepicker('destroy');
    $('#mydatepicker').datepicker({
      format: 'dd/mm/yyyy',        
      minDate: '11/23/2015'
    });
}else{
  $('#mydatepicker').datepicker('destroy');
  $('#mydatepicker').datepicker({
      format: 'dd/mm/yyyy',                  
    });      

} });