Нужен выбор даты / времени с определенными функциями - PullRequest
1 голос
/ 29 ноября 2010

Я осмотрелся и вижу предыдущие вопросы, где люди спрашивают о сборщиках даты / времени;к сожалению, ни одна из этих тем не соответствовала моим конкретным потребностям.Я вижу, что многие люди также рекомендуют Any + Time, но это кажется немного «тяжелым», и я ищу легкий.

По сути, мне нужен выбор даты / времени для «событий»».Выбор поиска событий здесь (http://jqueryui.com/demos/datepicker/#event-search) очень хорош, но он не обрабатывает время. Моя форма построена на jQuery, поэтому я в порядке с этим.

  • Должен быть в состояниидля выбора даты и времени
  • Форма времени окончания должна быть скрыта до тех пор, пока не выбрано время начала.
  • После того, как время начала выбрано, время окончания должно быть автоматически установлено на 6 часов позже
  • Не должен быть в состоянии выбрать время окончания, которое происходит до времени начала
  • Должен быть в состоянии обрабатывать часовые пояса, и по умолчанию текущий часовой пояс пользователя
  • Должен быть в состоянииотправить метку времени UTC (я буду хранить в скрытом поле; например: 1291004863)

Ваши рекомендации приветствуются ... Я не очень разбираюсь в Javascript.

1 Ответ

1 голос
/ 29 ноября 2010

Я бы попытался расширить указатель даты jQuery UI с помощью изменений, сделанных на следующей странице: http://addyosmani.com/blog/the-missing-date-time-selector-for-jquery-ui/

Код примера поиска событий в пользовательском интерфейсе jQuery будет нуждаться только в добавлении новых параметров, чтобы он работал.

Надеюсь, это поможет!

Редактировать: Пример кода для диапазона выбора даты (используя код по ссылке выше):

-HTML-

<p>
    <label for="from">From:</label> <input class="datetime" type="text" name="from" id="from" value="" />
    <label for="to">To:</label> <input class="datetime" type="text" name="to" id="to" value="" />
</p>

-js-

$(function() {
    $('.datetime').datepicker({
        duration: '',
        showTime: true,
        constrainInput: false
     });
});

Вот ссылка, чтобы увидеть в действии: http://bit.ly/hZTR84

...