Как создать красивый выбор даты в форме?

от
prokoding.ru > JavaScript > Как создать красивый выбор даты в форме?

Создание красивого выбора даты в форме можно достичь с помощью JavaScript-библиотек, которые предоставляют готовые решения с удобными и стильными элементами выбора даты.

Одной из таких библиотек является Bootstrap Datepicker. Для начала, вам необходимо подключить CSS-стили и JavaScript-скрипты библиотеки к вашей HTML-странице. Это можно сделать с помощью ссылок на файлы или использования CDN:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <title>Datepicker Example</title>
</head>
<body>
  <div class="container">
    <h1>Datepicker Example</h1>
    <form>
      <div class="form-group">
        <label for="datepicker">Выберите дату:</label>
        <input type="text" id="datepicker" class="form-control">
      </div>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
</body>
</html>

После подключения необходимых файлов вам нужно инициализировать datepicker на выбранном элементе в вашем JavaScript коде:

$(document).ready(function() {
  $('#datepicker').datepicker({
    format: 'dd.mm.yyyy',  // Формат даты
    autoclose: true,      // Автоматически закрывать календарь после выбора даты
    todayBtn: 'linked',    // Добавить кнопку "Сегодня" для быстрого выбора текущей даты
    clearBtn: true        // Добавить кнопку "Очистить" для удаления выбранной даты
  });
});

Теперь у вас должен быть функциональный и красивый datepicker на вашей форме. При нажатии на поле ввода, откроется календарь, где пользователь сможет выбрать нужную дату. Выбранная дата будет автоматически заполнена в поле ввода.

Однако, Bootstrap Datepicker - это только один из многих инструментов для создания выбора даты в JavaScript. Вы также можете рассмотреть другие популярные библиотеки, такие как JQueryUI DatePicker, Flatpickr, FullCalendar и другие. Каждая из них имеет свои особенности и возможности настройки в соответствии с вашими потребностями и дизайном формы.