Как настроить Datepicker в Bootstrap?

Опубликовано: 20 Февраля, 2023

В этой статье мы увидим, как использовать различные параметры Bootstrap Datepicker, чтобы предоставить пользователям различные функции выбора даты. Мы настроим средство выбора даты с четырьмя вариантами. Для настройки средства выбора даты загрузчика мы будем использовать HTML, CSS, jQuery и Bootstrap.

Настройка средства выбора даты при загрузке — простая задача, поскольку мы используем создание экземпляра средства выбора даты и добавляем к нему параметры. Прежде всего, давайте разберемся, что такое Datepicker. Bootstrap Datepicker — это репозиторий с открытым исходным кодом, который предоставляет API для интеграции средства выбора даты и времени во внешний интерфейс веб-сайта. Большинство форм, созданных сегодня, используют средство выбора даты для ввода даты, а не ручной ввод. Datepicker — это утилита ввода, которая предоставляет пользователям представление календаря для выбора даты. У средства выбора даты Bootstrap есть несколько вариантов настройки средства выбора даты.

Синтаксис:

$("#datepickerID").datepicker({ 
          OPTIONS
    }).datepicker("update", new Date());

Подход:

Сначала создайте файл HTML с телом страницы, полем ввода и другими элементами. При необходимости создайте отдельные файлы JavaScript и CSS и включите их в файл HTML.
Добавьте JAVASCRIPT для создания экземпляра средства выбора даты. Добавьте разные варианты получения разных функций в datepicker.
Следуйте приведенному ниже формату кода, чтобы связать некоторый внешний CSS с вашим кодом внутри тега <head>, следуя этому порядку.
Добавьте следующие ссылки CDN, чтобы включить использование средства выбора даты.

Bootstrap 3.0+ (ссылка CSS и JS):

<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js” integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js” integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>

UX-решения Datepicker 1.2+

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css”>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js”></script>

При необходимости добавьте различные доступные классы в Bootstrap Datepicker в поле ввода.
Мы можем добавить параметры средства выбора даты во время создания экземпляра средства выбора даты.
Затем необходимо инициализировать средство выбора даты для поля ввода, чтобы, когда пользователь щелкает это поле ввода, отображался всплывающий календарь, и они могли затем выбрать дату из этого приглашения.

Пример 1. В этом примере мы настроили средство выбора даты начальной загрузки с параметрами автозакрытия и выделения сегодняшнего дня . Параметр автозакрытия автоматически закрывает средство выбора даты после выбора даты. Опция Todayhighlight выделяет текущую дату.

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

Пример 2. В этом примере мы добавим параметр todayBtn , который добавит кнопку «Сегодня» внизу средства выбора даты, которое при нажатии выбирает сегодняшнюю дату. Кроме того, мы добавим параметр заголовка, который показывает заголовок средства выбора даты. Мы будем использовать приведенный выше пример, обновив код, где скрипт имеет обе опции, добавленные к функции.

Выход:

Technical Scripter Picked Bootstrap

Как настроить Datepicker в Bootstrap?

РЕКОМЕНДУЕМЫЕ СТАТЬИ