Поиск решения для выбора даты для Bootstrap

А как насчет jQuery UI?

Прежде чем перейти к пользовательскому решению (я намеренно отказался от возможности управления двумя форматами в серверной части), я начал рассматривать jQuery UI Datepicker как возможное решение.

Я изначально не рассматривал jQuery UI, потому что он поставляется с некоторыми предопределенными темами, которые не интегрированы с Bootstrap (но это не было большой проблемой). С другой стороны, DatePicker пользовательского интерфейса jQuery — это хорошо протестированная и поддерживаемая библиотека, и ее опция altField представляет именно то, что я искал. Кроме того, сценарии Bootstrap требуют jQuery, как и пользовательский интерфейс jQuery.

Пользовательский интерфейс jQuery можно загрузить со страницы проекта , но, поскольку я собираюсь смешивать файлы пользовательского интерфейса jQuery с файлами Bootstrap, я думаю, что наилучшим способом является его загрузка (или клонирование и т. д.) из репозитория GitHub .

Использование файлов разработки позволит мне проще комбинировать CSS-файлы с Bootstrap. Необходимые файлы (из основной папки пользовательского интерфейса jQuery):

• JS:
  • ui/core.js
  • ui/datepicker.js
  • файл локализации из папки ui/i18n
• CSS:
  • themes/base/core.css
  • themes/base/datepicker.css
  • themes/base/theme.css .

Условная загрузка

Перед загрузкой скрипта обратного вызова нам необходимо проверить поддержку браузера. Простой способ сделать это — использовать функцию обнаружения с Modernizr, как и в моем предыдущем тесте, используя загрузчик ресурсов для загрузки резервных сценариев только при необходимости:

 Modernizr.load({ test: Modernizr.inputtypes.date, nope: [ 'jquery-ui-master/ui/core.js', 'jquery-ui-master/ui/datepicker.js', 'jquery-ui-master/ui/i18n/datepicker-it.js', 'jquery-ui-master/themes/base/core.css', 'jquery-ui-master/themes/base/datepicker.css', 'jquery-ui-master/themes/base/theme.css' ], callback: function () { // do something if test fails } }); 

Сначала мы проверяем поддержку inputtypes.date , при необходимости загружая файлы JavaScript и CSS для inputtypes.date .

Я специально держал все файлы отдельно для ясности, но это хорошая идея объединить их в процессе сборки для производства.

Примечание: имейте в виду, что yepnope.js (компонент загрузки Modernizr) устарел , и будущие версии Modernizr не будут включать его.

После nope скриптов nope и css мы должны сказать нашим браузерам (тем, которые не Modernizr.inputtypes.date тест Modernizr.inputtypes.date ) сделать что-то, поэтому мы должны добавить функцию обратного вызова:

 callback:function (url) { if (url === 'jquery-ui-master/ui/i18n/datepicker-it.js') { var idx = 0; $('input[type="date"]').each( function() { var _this = $(this), prefix = 'alt' + String(idx++) + '_', _val = _this.val(); _this .attr('placeholder', 'gg/mm/aaaa') .attr('autocomplete', 'off') .prop('readonly', true) .after('<input type="hidden" id="' + prefix + _this.attr('id') + '" name="' + _this.attr('name') + '" value="' + _val + '">') .removeAttr('name') .val('') .datepicker({ altField: '#'+ prefix + _this.attr('id'), dateFormat: 'dd/mm/yy', altFormat: 'yy-mm-dd' }); // managing existing date values if (_val) { _this.datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', _val) ); } }); } } 

Как работает код:

• Используя аргумент url , мы сначала проверяем, все ли скрипты были загружены, проверяя последний из них.
• Для каждого поля input[type="date"] создается скрытое поле с unique-id .
• Атрибут имени поля даты удаляется и добавляется в скрытое поле.
• Виджет проинструктирован использовать скрытое поле как altField для хранения даты в формате ISO, независимо от используемой нами локализации.
• Дата и скрытое поле форматов даты установлены.
• Любое существующее значение ISO удаляется и переназначается в формате DatePicker.
• Добавляется заполнитель с шаблоном вставляемой даты (в соответствии с нашим локальным форматом даты).
• autocomplete отключено, поскольку в некоторых случаях это может привести к путанице при использовании виджета.
• атрибут readonly добавляется в поля. Это, конечно, не лучший вариант с точки зрения UX, но он решает большую проблему: если содержимое поля даты стирается вручную (без запуска виджета), поле alt не обновляется, и только readonly предотвращает такое поведение.

Вы можете увидеть результат, показанный на скриншоте ниже (я изменил altField со hidden на text в серой altField чтобы вы могли видеть изменения).

Вот страница результатов просмотра с Firefox …

 @import (reference) 'path/to/bootstrap/variables.less'; @import (reference) 'path/to/bootstrap/glyphicons.less'; 

 .ui-datepicker .ui-datepicker-header { background-color: @panel-default-heading-bg; border-radius: @border-radius-base; font-family: @font-family-sans-serif; color: @panel-default-text; font-weight: bold; } 

 .ui-datepicker .ui-icon { .glyphicon(); visibility: hidden; text-indent: 0; &:before { visibility: visible; } } .ui-datepicker .ui-icon.ui-icon-circle-triangle-w { .glyphicon-chevron-left(); } .ui-datepicker .ui-icon.ui-icon-circle-triangle-e { .glyphicon-chevron-right(); }