Я сталкиваюсь с проблемой с bootstrap datepicker, когда я пытаюсь изменить представление datepicker в соответствии с режимом, выбранным в раскрывающемся списке.
Ниже приведен код HTML:
Mode : <select id="mode">
<option value="1">Day</option>
<option value="2">Month</option>
<option value="3">Year</option>
</select>
<br><br>
From : <input type="text" id="from" />
To : <input type="text" id="to" />
Код jQuery:
$("#from").datepicker({
autoclose: true,
startDate: '+1d',
endDate: '+1y',
clearBtn: true,
todayHighlight: true,
});
$("#to").datepicker({
autoclose: true,
startDate: '+1d',
endDate: '+1y',
clearBtn: true,
todayHighlight: true,
orientation: "top right"
});
$("#mode").change(function(){
jQuery("#to").removeAttr('disabled');
$("#from").val('');
$("#to").val('');
$("#from").datepicker('update');
$("#to").datepicker('update');
$("#from").datepicker("remove");
$("#to").datepicker("remove");
if ($(this).val() == 2){
$("#from").datepicker({
autoclose: true,
startDate: '0',
endDate:'+1y',
startView: 1,
minViewMode: 1,
clearBtn: true,
});
$("#to").datepicker({
autoclose: true,
startDate: '0',
startView: 1,
endDate:'+1y',
minViewMode: 1,
clearBtn: true,
orientation: "top right"
});
$("#from").datepicker().on("clearDate", function(){
$("#to").val('');
$("#to").datepicker('update');
});
$("#to").datepicker().on("clearDate", function(){
$("#from").val('');
$("#from").datepicker('update');
});
$("#from").datepicker().on("changeDate", function(){
var fromDate = $("#from").datepicker("getDate");
if (fromDate != "Invalid Date" && fromDate != '' ) {
fromDate.setMonth(fromDate.getMonth() + 1, 1);
$("#to").datepicker("setDate", fromDate);
$("#to").datepicker("setStartDate", fromDate);
$("#to").datepicker("update");
}
});
$("#to").datepicker().on("changeDate", function(){
var toDate = $("#to").datepicker("getDate");
if (toDate != "Invalid Date") {
$("#from").datepicker("setEndDate", toDate);
$("#from").datepicker("update");
}
});
}else if($(this).val() == 3){
jQuery("#to").attr('disabled', 'disabled');
$("#from").datepicker({
autoclose: true,
startDate: '0',
endDate:'+1y',
startView: 0,
minViewMode: 0,
clearBtn: true,
});
//clear event for the datepicker
$("#from").datepicker().on("clearDate", function(){
$("#to").val('');
$("#to").datepicker('update');
});
$("#to").datepicker().on("clearDate", function(){
$("#from").val('');
$("#from").datepicker('update');
});
//set startdate event for the datepicker
$("#from").datepicker().on("changeDate", function(){
var fromDate = $("#from").datepicker("getDate");
if (fromDate != "Invalid Date") {
fromDate.setDate(fromDate.getDate() + 365);
$("#to").datepicker("setDate", fromDate);
$("#to").datepicker("setStartDate", fromDate);
}
});
$("#to").datepicker().on("changeDate", function(){
var toDate = $("#to").datepicker("getDate");
if (toDate != "Invalid Date") {
$("#from").datepicker("setEndDate", toDate);
}
});
}else{
$("#from").datepicker({
autoclose: true,
startDate: '+1d',
endDate: '+1y',
clearBtn: true,
todayHighlight: true,
});
$("#to").datepicker({
autoclose: true,
startDate: '+1d',
endDate: '+1y',
clearBtn: true,
todayHighlight: true,
orientation: "top right"
});
}
});
То, что я пытаюсь сделать, у меня есть три типа режимов: День, Месяц и Год. Когда я выбираю месяц в раскрывающемся списке, в его событии изменения мне нужно удалить все предыдущие события, связанные с datepicker, и связать новые события с datepickers.
Но, после изменения режима несколько раз события больше не привязаны, и он прекращает установку значения в полях ввода.
Я не уверен, что это правильный способ сделать это. Если есть другой способ сделать это, это будет очень полезно.
Любая помощь будет назначена. Спасибо заранее.
Это ссылка jsfiddle для кода: http://jsfiddle.net/tejashsoni111/aL9vB/2/
Это ссылка на документацию: http://bootstrap-datepicker.readthedocs.org/en/release/