Рубрики
Без рубрики

Bootstrap 5 DatePicker

Что такое начальная станка? DatePicker – это плагин, который добавляет функцию выбора T … Tagged с Bootstrap, JavaScript, WebDev, HTML.

Что такое начальная станка?

DatePicker – это плагин, который добавляет функцию выбора времени без необходимости использования пользовательского кода JavaScript.

Монтаж

Ручная установка (ZIP -пакет)

Чтобы воспользоваться нашим компонентом Bootstrap Images и использовать их в вашем проекте, вам сначала нужно установить MDB 5 бесплатный пакет

MDB CLI

Смотрите наш Quick Start Tutorial Чтобы обнаружить и использовать весь потенциал MDB 5 и MDB CLI

Npm

Предварительные условия

Перед началом проекта обязательно установите Node LTS (12.x.x рекомендуется) Анкет

Монтаж

Чтобы установить набор пользовательского интерфейса MDB в ваш проект, легко введите следующую команду в терминале:

npm i mdb-ui-kit
Импорт модулей JS

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

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
Импорт файла CSS

Для импорта таблицы стилей MDB, пожалуйста, используйте следующий синтаксис:

@import '~mdb-ui-kit/css/mdb.min.css';
Импорт модулей SCSS

Вы также можете импортировать отдельные модули SCSS. Чтобы сделать это правильно, мы рекомендуем скопировать их из местоположения Node_Modules/MDB-UI-KIT/SRC/SCSS непосредственно в ваш проект и импортировать так же, как файлы CSS.

Интеграция WebPack

Вы можете значительно ускорить процесс создания нового проекта на основе WebPack, используя наш Стартер Анкет

CDN

Установка через CDN является одним из самых простых методов интеграции набора пользовательского интерфейса MDB с вашим проектом. Просто скопируйте последний скомпилированный тег сценария JS и тег ссылки CSS из cdnjs к приложению.

Не забудьте добавить также шрифт Awesome и Roboto Font, если вам это нужно. Вот пример кода:

CSS
JS

Настройка

Основной пример
HTML
Переводы

Сборщик может быть настроен, чтобы добавить поддержку интернационализации. Измените параметры компонента для добавления переводов.

HTML
JS
const datepickerTranslated = document.querySelector('.datepicker-translated');
new mdb.Datepicker(datepickerTranslated, {
  title: 'Datum auswählen',
  monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
  monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dez'],
  weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
  weekdaysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
  weekdaysNarrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
  okBtnText: 'Ok',
  clearBtnText: 'Klar',
  cancelBtnText: 'Schließen',
});

Вы можете увидеть больше примеров настройки на странице документации DatePicker DatePicker

Важные ресурсы

Вот ресурсы, которые мы подготовили, чтобы помочь вам работать с этим компонентом:

  1. Читать 📄 Страница документации DatePicker <- Начни здесь
  2. Чтобы получить максимальную отдачу от вашего проекта, вы также должны познакомиться с другими вариантами форм, связанных с DatePicker. См. Раздел ниже, чтобы найти их список.
  3. Вы можете использовать предварительно назначенные элементы форм в 📥 Starter Bootstrap 5 шаблонов
  4. Шаблоны являются частью 📦 Бесплатный комплект пользовательского интерфейса для Bootstrap 5
  5. После завершения проекта вы можете опубликовать его с помощью CLI, чтобы получить 💽 Бесплатный хостинг (бета)

Связанный контент и стили опции и функции

Узнайте Bootstrap 5 за 1,5 часа

Дополнительные ресурсы

Узнайте веб -разработку с нашим обучение дорожной карте : 🎓 Начните учиться

Присоединяйтесь к нашему списку рассылки и получите Эксклюзивные ресурсы для разработчиков 🎁 Получите подарки

Присоединяйтесь к нашей частной группе FB для Вдохновение и опыт сообщества 👨‍👩‍👧‍👦 Попросите присоединиться

Поддержка создания пакетов с открытым исходным кодом со звездой на GitHub

Оригинал: “https://dev.to/mdbootstrap/bootstrap-5-datepicker-12fm”

Читайте ещё по теме: