Как вызвать событие при выборе даты ввода, когда значение не изменилось?

Я предварительно выбираю дату <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() );
});

🤔 А знаете ли вы, что...
HTML использует различные теги для определения структуры и содержания веб-страницы.

[РЕШЕНО]Перейти к решению

2

108

3

Html113619 вопросов Jquery62551 вопрос Date7814 вопросов Events2857 вопросов Input3375 вопросов

Вместо использования события изменения вам следует попытаться определить, совпадает ли новое значение даты со старым значением.

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>

Насколько мне известно, невозможно получить событие выбора во встроенном вводе даты.

Вам нужно использовать библиотеку выбора даты.

Например виджет 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">

Как вызвать событие при выборе даты ввода, когда значение не изменилось?

Ответы:

Интересные вопросы для изучения