当我尝试按照下拉菜单中选择的模式更改日期选择器的视图时,我遇到了引导日期选择器的问题。
以下是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/
答案 0 :(得分:2)
只需一种方法,为您的日期/时间戳创建原型
<div id="fake_from_container" style="display:none">
<input type="text" class="fake_text" />
</div>
<div id="from_container>
</div>
然后,无论何时想要初始化日期/时间戳,请尝试
$('#from_container').html($('#fake_from_container').html());
$('.fake_text', $('#from_container')).attr('id', 'from');
$("#from").datepicker().....
这个想法是:首先,fake_from_container只是存储输入的html代码, 每次你想重新初始化日期/时间选择器时,你将从头开始创建输入,将html代码从$('#fake_from_container')复制到$('#from_container'),之后,#from_container将是
<div id="from_container>
<input type="text" class="fake_text" />
</div>
然后,在#from_container
中设置输入项的id$('.fake_text', $('#from_container')).attr('id', 'from');
你将
<div id="from_container>
<input type="text" class="fake_text" id='from' />
</div>
然后,您可以使用任何新输入#from
的选项初始化日期/时间选择器答案 1 :(得分:2)
似乎需要.input-daterange
。
<br>Mode :
<select id="mode">
<option value="1">Day</option>
<option value="2">Month</option>
<option value="3">Year</option>
</select>
<br /><br />
<div id="datepicker-container"> </div>
现在动态加载.input-daterange
到#datepicker-container
(每次选择框都会更改):
<div class="input-daterange" id="datepicker">from:
<input type="text" name="start" />to:
<input type="text" name="end" />
</div>
然后,每次选择框(#mode
)发生变化时,都会根据selectbox(.input-daterange
)中的所选选项启动datepicker()
#mode
函数。
function initDatepicker(mode){
$('#datepicker-container').html(''+
'<div class="input-daterange" id="datepicker">from:'+
'<input type="text" name="start" />to:'+
'<input type="text" name="end" />'+
'</div>');
var $dtpicker=$('#datepicker-container > .input-daterange');
$dtpicker.find(':input').val('');
if (mode == 1) {//Day
$dtpicker.datepicker({
autoclose: true,
startDate: '+1d',
endDate: '+1y',
clearBtn: true,
todayHighlight: true,
});
} else if (mode == 2) {//Month
$dtpicker.datepicker({
autoclose: true,
startDate: '0m',
endDate: '+1y',
clearBtn: true,
startView: 1,
minViewMode: 1
});
} else if (mode == 3) {// Year
$dtpicker.datepicker({
autoclose: true,
startDate: "0y",
endDate: "+1y",
clearBtn: true,
startView: 2,
minViewMode: 2
});
}
}
$("#mode").change(function () {
$('#datepicker-container > .input-daterange').datepicker('remove');
initDatepicker($(this).val());
});
initDatepicker(1);// for first time initiate Day
答案 2 :(得分:1)
只需使用
$('#ID').datepicker('destroy');
在创建datepicker视图之前, 它会破坏前一个并根据需要应用新的datepicker ui