Как вызвать событие при выборе даты ввода, когда значение не изменилось?
Я предварительно выбираю дату <input type='date' /> и хочу, чтобы пользователь все равно выбрал дату. Если выбранная дата совпадает с предварительно выбранным значением, это не вызывает событие change в jQuery.
Также пробовал blur и input, но blur активируется только при потере фокуса элемента, а не при выборе даты. Кажется, что на input тот же результат, что и на change.
Есть идеи, как этого добиться?
Предварительно выбранная дата — это предлагаемая дата, которую можно выбрать или можно выбрать другую дату.
<input id = "my-date" type = "date" value = "2024-07-20" />
// ..
$( '#container' ).on( 'change', '#my-date', function()
{
console.info( 'selected date: ' + $( this ).val() );
});
@Barmar событие input также запускается только при изменении значения
Возможно, вам придется использовать библиотеку выбора даты вместо встроенного ввода.
Было бы неплохо иметь некоторый код, чтобы мы могли отлаживать. Но лучший способ сделать это из того, что вы указали, — это выбрать дату, которую пользователю не разрешено выбирать. Таким образом, ваша дата будет бессмысленной датой, которую пользователю не должно быть разрешено выбирать.
@Доктор. Обновленный вопрос
«...ввод, но он активируется только при потере фокуса элемента, а не при выборе даты». Никакого события «ввода» не происходит, когда пользователь вводит <input>. Более того, если дата по умолчанию является допустимым значением, почему важно отличать ее от всех других значений? Кроме того, почему сохранение фокуса на дате по умолчанию является проблемой, когда все остальные даты обрабатываются, когда <input> не сфокусирован?
Чего вы пытаетесь достичь? Возможно, есть более элегантное решение.
Ответы 3
Вместо использования события изменения вам следует попытаться определить, совпадает ли новое значение даты со старым значением.
var old_value = "";
$("#dateinput").val("2024-07-20");
function check(){
if (old_value != $("#dateinput").val()){
alert("Value changed"); // Change this to your code
old_value = $("#dateinput").val()
}
setTimeout(check, 10);
}
setTimeout(check, 10);<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>
<input type = "date" id = "dateinput" value = ""><br><br>
<input type = "submit" value = "Submit">
</body>
</html>Спасибо за предложение, хорошая находка! Как вы думаете, было бы эффективно, если бы этот интервал составлял 10 мс?
«попробуйте определить, совпадает ли новое значение даты со старым значением». Вы этого не делаете. Вы только что заново изобрели событие input, но все еще не делаете то, что хочет ОП.
Насколько мне известно, невозможно получить событие выбора во встроенном вводе даты.
Вам нужно использовать библиотеку выбора даты.
Например виджет Datepicker jQuery-UI, который имеет событие выбора.
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect(date) {
console.info(date);
},
});<link rel = "stylesheet" href = "https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-3.7.1.js"></script>
<script src = "https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<input type = "text" id = "datepicker" value = "2024-07-20">Я предлагаю решение, установив значение null при выборе даты:
Рабочий фрагмент:
var input = document.getElementById('mydate');
input.onclick = function () {
this.value = null;
};
input.onchange = function () {
console.info(this.value);
};<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input type = "date" id = "mydate" value = "2024-07-24">Хорошая находка! Я попробую это!
Решено! Спасибо!!
@Z0q Я очень рад помочь тебе.
Попробуйте мероприятие
input.