我的页面中有一个datepicker
,还有两个单选按钮,如下所示。
<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];
}
}
我想在选择单选按钮 1 时显示所有日期,并且希望在选择单选按钮 2 (单选按钮 2) 时禁用日期 2015 年 11 月 23 日()之前。
以上是我的场景。
我的问题是:
首次加载时,Radio 1 工作正常,即它启用了 Radio 1 的所有日期。
选择Radio 2时,它不会调用日期选择器中beforeShowDay
属性的EnableDisableDates方法。
我不知道为什么它没有调用该方法。帮助我摆脱这个问题。
最佳答案
您可以使用 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" >
更新:
我们使用 destroy 来创建日期选择器的新实例 jQuery DatePicker -- Changing minDate and maxDate on the fly看到这个
关于javascript - jquery中DatePicker第二次未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34126840/