[英]Trigger another datetimepicker using jquery
我想在另一個選擇器中選擇日期后打開datepicker
選擇器。 為此,我們可以在datepicker
看到如此多的建議和答案,但我找不到datetimepicker
解決方案。 我在項目中使用的默認datetimepicker
是這樣的
$('.datepicker').datetimepicker({
format: 'MM/DD/YYYY',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove',
inline: true
}
});
試試
$( "#QuoteDate" ).datepicker({
minDate: 0,
changeMonth: true,
changeYear: true,
maxDate: "+2Y",
onSelect: function( selectedDate ) {
$( "#DueDate" ).datepicker("option", "minDate", selectedDate );
setTimeout(function(){
$( "#DueDate" ).datepicker('show');
}, 16);
}
});
$( "#DueDate" ).datepicker({
changeMonth: true,
changeYear: true,
maxDate: "+2Y",
});
如果我嘗試像onSelect
一樣編碼:就像在datepicker
一樣,它不接受。 請任何人幫助我找到解決方案。 此選擇器中的onSelect
日期將調用另一個選擇器。
如果您需要鏈接日期時間選擇器,請查看文檔中的鏈接選擇器示例。
您必須向dp.change
事件添加一個監聽器,因為 datetimepicker 沒有onSelect
選項。 請注意dp.change
:
當日期改變時觸發。
參數:
e = { date, //date the picker changed to. Type: moment object (clone) oldDate //previous date. Type: moment object (clone) or false in the event of a null }
您可以使用show()
函數打開第二個日期時間選擇器。
這是一個完整的現場示例:
var icons = { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-screenshot', clear: 'fa fa-trash', close: 'fa fa-remove', //inline: true }; $('#QuoteDate').datetimepicker({ format: 'MM/DD/YYYY', useCurrent: false, minDate: moment().startOf('day'), maxDate: moment().add(2, 'years'), icons: icons }).on('dp.change', function(e){ console.log('change', e.date, e.oldDate); if( ( e.date && !e.oldDate ) || ( e.date && e.oldDate && !e.date.isSame(e.oldDate, 'day') ) ){ setTimeout(function(){ $('#DueDate').data("DateTimePicker").show(); }, 16); } $('#DueDate').data("DateTimePicker").minDate(e.date); }); $('#DueDate').datetimepicker({ format: 'MM/DD/YYYY', useCurrent: false, minDate: moment().startOf('day'), maxDate: moment().add(2, 'years'), icons: icons }).on('dp.change', function(e){ $('#QuoteDate').data("DateTimePicker").maxDate(e.date); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='QuoteDate'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='DueDate'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div>
由於您使用的是 datetimepicker,您可以使用minDate: moment().startOf('day')
而不是minDate: 0
和maxDate: moment().add(2, 'years')
而不是maxDate: "+2Y"
(有關更多信息,請參閱時刻startOf()
和add()
文檔)。
正如Linked Pickers示例中所建議的,您必須使用useCurrent: false
選項。
我認為您正在尋找change
事件,因此當您在其中一個 datepicker 中選擇了一個日期時,您可以觸發一個回調它已更改,然后在 openAnotherDatePicker 函數中,您可以嘗試從事件中獲取選定的值使用 jquery .val()
函數並將所選日期傳遞給下一個日期選擇器
更新:這是 xdan datetimepicker 的實時和工作示例:
var setMinDate = function( currentDateTime ){ this.setOptions({minDate:currentDateTime}); }; $('#QuoteDate').datetimepicker({ format:'dmY h:i', onChangeDateTime:openAnotherDatePicker, closeOnDateSelect:true }); $('#DueDate').datetimepicker({ format:'dmY h:i', onShow:setMinDate, closeOnDateSelect:true }) function openAnotherDatePicker( selectedDate ) { $( "#DueDate" ).val($( "#QuoteDate" ).val()); $( "#DueDate" ).datetimepicker('show'); }
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script> <p> Start <br /><input id="QuoteDate" type="text" value="12-11-2017 06:24"> <br /> End <br /><input id="DueDate" type="text" value="13-11-2017 06:24"> </p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.