jQuery中的DatePicker未第二次加载 [英] DatePicker in jquery is not loaded for the second time

问题描述

我的页面上有一个datepicker，而且还有两个单选按钮，如下所示.

I have a datepicker in my page and also I have two radio buttons as follows.

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

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

我的日期选择器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];
    }
}

我要在选择 Radio 1 时显示所有日期，并且要在选择单选按钮2 (Radio 2)时禁用日期. 2015年11月23日()之前 .

I want to show all the dates on selecting Radio 1 and I want to disable dates on selecting radio button 2 (Radio 2) before 23-Nov-2015().

以上是我的情况.

我的问题是:

第一次加载时，它对 Radio 1 来说工作正常，即，它启用了 Radio 1 的所有日期.

For first time it loads, it is working fine for the Radio 1 i.e. it enables all the dates for Radio 1.

在选择 Radio 2 时，它没有在日期选择器中调用 beforeShowDay 属性的EnableDisableDates方法.

On selecting the Radio 2, it is not calling the method EnableDisableDates method of beforeShowDay property in datepicker.

我不知道为什么它没有调用该方法.帮助我摆脱这个问题.

I don't know why it is not calling the method. Help me to get out of this problem.

推荐答案

您可以使用minDate禁用日期，而不是手动查看日期，这会导致性能下降:

you ca use minDate to disable dates instead of looing it manually which will cost perfomance:

尝试一下:

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" >

小提琴

更新:

我们使用了destroy方法来创建datepicker的新实例 jQuery DatePicker-即时更改minDate和maxDate 看到

we have used the destroy to create new instance of datepicker jQuery DatePicker -- Changing minDate and maxDate on the fly see this

这篇关于jQuery中的DatePicker未第二次加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！