Как получить дату из альтернативного поля выбора даты?
Datepicker имеет эту функцию, которая позволяет вам отправлять дату в альтернативный ввод с альтернативным форматом даты. В моей программе я скрываю ввод даты и запускаю открытие календаря с помощью кнопки. Как мне получить дату из этого альтернативного ввода?
Мой код
/*
open calendar
*/
$(document).on('click','.openDatePicker',function(){
$('#popupDatepicker').datepicker({
changeMonth: true,
changeYear: true,
altField: "#alternateDateField",
altFormat: "DD, d MM, yy"
});
$('#popupDatepicker').show().focus().hide();
})
/*
get date from alternate field
*/
$(document).on('change','#alternateDateField',function(){
var fulldate = $('#alternateDateField').val();
console.info(fulldate)
}) <link rel = "stylesheet" href = "//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel = "stylesheet" href = "/resources/demos/style.css">
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<script src = "https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<button class = "openDatePicker">Calendar</button>
<input type = "text" style = "display: none;" id = "popupDatepicker">
<input type = "hidden" id = "alternateDateField" size = "30">
Ответы 2
altField Datepicker устанавливает значение для поля ввода, но не запускает событие изменения. Таким образом, вы не можете поймать событие изменения ввода.
Вместо этого попробуйте поймать событие onSelect средства выбора даты:
$("#popupDatepicker").datepicker({
onSelect: function(dateText) {
console.info("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
Событие change не запускается, если ввод не был изменен пользователем, взаимодействующим с пользовательским интерфейсом браузера. Он не срабатывает, если значение изменено программным обеспечением. Это сделано по дизайну и не является поведением jQuery, а поведением браузера.
Поэтому вам нужно вручную инициировать событие самостоятельно. Есть два способа сделать это:
- Использование опции DatePicker onSelect для запуска события
changeвручную. (лучший подход) - Использование метода setInterval для периодической проверки того, изменилось ли значение скрытого ввода. (альтернативный подход)
См. следующий пример с использованием первого подхода:
/*
open calendar
*/
$(document).on('click', '.openDatePicker', function() {
$('#popupDatepicker').datepicker({
changeMonth: true,
changeYear: true,
altField: "#alternateDateField",
altFormat: "DD, d MM, yy",
onSelect: function(datestring, dp) {
$('#alternateDateField').trigger('change');
}
});
$('#popupDatepicker').show().focus().hide();
})
/*
get date from alternate field
*/
$(document).on('change', '#alternateDateField', function() {
var fulldate = $('#alternateDateField').val();
console.info(fulldate)
})<link rel = "stylesheet" href = "//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel = "stylesheet" href = "/resources/demos/style.css">
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<script src = "https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<button class = "openDatePicker">Calendar</button>
<input type = "text" style = "display: none;" id = "popupDatepicker">
<input type = "hidden" id = "alternateDateField" size = "30">Использованная литература:
onSelect:
Функция вызывается при выборе средства выбора даты. Функция получает выбранную дату в виде текста и экземпляр средства выбора даты в качестве параметров. это относится к соответствующему полю ввода.
setInterval():
Метод setInterval(), предлагаемый в интерфейсах Window и Worker, неоднократно вызывает функцию или выполняет фрагмент кода с фиксированной задержкой по времени между каждым вызовом.