Блог

Я искал javascript (надеюсь, jQuery) для выбора часового пояса / picker / control widget, который я мог бы включить в свое веб-приложение для социального календаря / маршрутизатора событий.

Учитывая, что в обычных выпадающих меню указано около 400 городов, я надеялся, что кто-то сжалился над бедным пользователем и предоставил хороший виджет пользовательского интерфейса с лучшим интерфейсом, прежде чем я создам его сам. (Я видел несколько хороших примеров веб-сайтов, которые используют карту для выбора часового пояса, но они занимают слишком много места на странице для моего приложения.)

Хотя существует несколько способов перечислить часовые пояса, отличных от просто смещения по Гринвичу, я думаю, что лучший способ упорядочить часовые пояса — это использовать иерархическое выпадающее меню с подменю. Затем я бы составил список по континентам, затем подменю, чтобы перечислить как страну, так и крупные города и, возможно, исключения города / региона, которые не соответствуют географическому правилу или правилу перехода на летнее время. например, Аризона в MST и некоторые города в Индиане в CST.

В виджет будет включена возможность запоминать последние 5 вариантов пользователя и отображать их в верхней части списка.

Виджет также позволил бы пользователю вводить текст с помощью автозапуска (который будет рассматривать пользовательский ввод как префикс, суффикс и в любом другом месте в запросе. что в терминах SQL эквивалентно высказыванию: ГДЕ some_column_name, НАПРИМЕР, %query%). Их ввод привел бы к уменьшению набора вариантов, что сделало бы список на выбор намного короче. т.Е.- CST представил бы несколько часовых поясов, которые используют CST в качестве аббревиатуры, -7 представил бы список городов, для текущего часового пояса которых установлено значение GMT-7, 5.5 перечислил бы страну Inida и т.д.

Если кто-то знает виджет, который близок к этому, было бы любопытно узнать, откуда они получают данные о своем часовом поясе и DST, поскольку существует несколько источников, и данные постоянно обновляются.

Я думаю, что на github есть полезная ветка разработчика timepicker с часовым поясом здесь.

Что касается ограниченного набора входных данных, мне действительно нравится timepickr, но ему все еще нужен часовой пояс. Я не уверен, как вы планируете отправлять это поле в базу данных, но вы могли бы просто создать смежное поле текстового поля для часового пояса и связать его с автозаполнением jquery для часовых поясов, что было бы неплохо, потому что они могли бы отфильтровывать как длину, так и сокращение для часового пояса, если они у вас есть в текстовой метке вместе.

Также было бы нетрудно использовать автозаполнение jquery для развертывания собственной реализации с ограниченными возможностями.

Я создал и LGPL’d именно такой виджет (плагин jQuery) здесь:https://github.com/peterjtracey/timezoneWidget — он имеет соответствующий PHP-код, который динамически генерирует данные о часовом поясе, чтобы учитывать переход на летнее время и легко сохранять значения базы данных, используемые на стороне сервера.