Javascript Диалоговое окно подсказки настроить ввод

Question

Я хочу иметь поле, подобное этому, в диалоговом окне приглашения в javascript, чтобы пользователь мог быстро выбрать дату

Это поле ввода должно выглядеть следующим образом

Есть ли простой способ сделать это?

Answer 1

С помощью Sweet Alert .

можно делать очень индивидуальные действия. Пример с вводом даты:

const {
  value: formValue
} = await Swal.fire({
  title: 'Select a date',
  html: '<input type="date" id="swal-input" class="swal2-input">',
  focusConfirm: false,
  allowOutsideClick: false,
  preConfirm: () => {
    return document.getElementById('swal-input').value;
  }
})

Результат выполнения этого в центре экрана появится всплывающее окно с полем ввода даты:

Выбранная дата будет сохранена в переменной с именем formValue.

Инструкции по установке

Чтобы быстро начать работу, вы можете включить этот скрипт в начале HTML:

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Answer 2

Если я понимаю ваши потребности, я думаю, что вы можете использовать jQuery datepicker https://jqueryui.com/datepicker/#default

, если вы хотите, чтобы календарь был встроенным, вы можете сделать это тоже https://jqueryui.com/datepicker/#inline

Исходный код находится внизу страниц.