У меня есть код JS, в котором при изменении поля он вызывает процедуру поиска. Проблема в том, что я не могу найти какие-либо события jQuery, которые сработают, когда Datepicker обновит поле ввода.
По какой-то причине событие изменения не вызывается, когда Datepicker обновляет поле. Когда календарь всплывает, он меняет фокус, поэтому я тоже не могу его использовать. Есть идеи?
Вы можете использовать средство выбора даты onSelect.
$(".date").datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input current value: " + this.value);
}
});
Пример из жизни:
$(".date")
.datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input current value: " + this.value);
}
})
.on("change", function() {
console.log("Got change event from field");
});<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>T.J. Ответ Crowder (fooobar.com/questions/35674/...) очень хорош и по-прежнему остается точным. Запуск события изменения внутри функции onSelect будет как можно ближе.
Однако на объекте datepicker (lastVal) есть приятное свойство, которое позволит условно запускать событие изменения только при фактических изменениях, не сохраняя значения (ов) самостоятельно
$('#dateInput').datepicker({
onSelect: function(d,i){
if(d !== i.lastVal){
$(this).change();
}
}
});
Затем просто обрабатывайте события изменений, как обычно:
$('#dateInput').change(function(){
//Change code!
});
Ваш поиск события onSelect в объекте datepicker:
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});Я написал это, потому что мне нужно решение для запуска события, только если дата изменилась.
Это простое решение. Каждый раз, когда диалоговое окно закрывается, мы проверяем, изменились ли данные. Если он есть, мы запускаем настраиваемое событие и reset сохраненное значение.
$('.datetime').datepicker({
onClose: function(dateText,datePickerInstance) {
var oldValue = $(this).data('oldValue') || "";
if (dateText !== oldValue) {
$(this).data('oldValue',dateText);
$(this).trigger('dateupdated');
}
}
});
Теперь мы можем подключить обработчики для этого настраиваемого события...
$('body').on('dateupdated','.datetime', function(e) {
// do something
});
$('#inputfield').change(function() {
dosomething();
});
Я использую bootstrap-datepicker, и ни одно из вышеперечисленных решений для меня не срабатывало. Этот ответ мне помог..
Вот что я применил:
$('.date-picker').datepicker({
endDate: new Date(),
autoclose: true,
}).on('changeDate', function(ev){
//my work here
});
Надеюсь, это поможет другим.
В jQueryUi 1.9 мне удалось заставить его работать с дополнительным значением данных и комбинацией функций beforeShow и onSelect:
$( ".datepicker" ).datepicker({
beforeShow: function( el ){
// set the current value before showing the widget
$(this).data('previous', $(el).val() );
},
onSelect: function( newText ){
// compare the new value to the previous one
if( $(this).data('previous') != newText ){
// do whatever has to be done, e.g. log it to console
console.log( 'changed to: ' + newText );
}
}
});
Работает для меня:)
Я знаю, что это старый вопрос. Но я не смог получить событие jquery $ (this).change() для корректного запуска onSelect. Поэтому я использовал следующий подход для запуска события изменения через vanilla js.
$('.date').datepicker({
showOn: 'focus',
dateFormat: 'mm-dd-yy',
changeMonth: true,
changeYear: true,
onSelect: function() {
var event;
if(typeof window.Event == "function"){
event = new Event('change');
this.dispatchEvent(event);
} else {
event = document.createEvent('HTMLEvents');
event.initEvent('change', false, false);
this.dispatchEvent(event);
}
}
});
Пытаться:
$('#idPicker').on('changeDate', function() {
var date = $('#idPicker').datepicker('getFormattedDate');
});
Попробуйте это
$('#dateInput').datepicker({
onSelect: function(){
$(this).trigger('change');
}
}});
Надеюсь, что это поможет:)
Руководство говорит:
apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked
Итак:
$('#daterange').daterangepicker({
locale: { cancelLabel: 'Clear' }
});
$('#daterange').on('apply.daterangepicker', function() {
alert('worked!');
});
Работает для меня.
Мое решение:
events: {
'apply.daterangepicker #selector': 'function'
}
Выбранный код изменения даты DatePicker ниже
/* HTML Part */
<p>Date: <input type="text" id="datepicker"></p>
/* jQuery Part */
$("#datepicker").change(function() {
selectedDate= $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
alert(selectedDate);
});
если вы используете wdcalendar, это поможет вам
$("#PatientBirthday").datepicker({
picker: "<button class='calpick'></button>",
onReturn:function(d){
var today = new Date();
var birthDate = d;
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
$('#ageshow')[0].innerHTML="Age: "+age;
$("#PatientBirthday").val((d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear());
}
});
событие onReturn работает для меня
надеюсь, что эта помощь
Мое решение:
var $dateInput = $('#dateInput');
$dateInput.datepicker({
onSelect: function(f,d,i){
if(d !== i.lastVal){
$dateInput.trigger("change");
}
}
}).data('datepicker');
$dateInput.on("change", function () {
//your code
});