Выбор даты / времени jQuery [закрыт]

245

Я искал приличный плагин jQuery, который может обрабатывать как даты, так и время. Основной пользовательский интерфейс DatePickerвеликолепен, но, к сожалению, мне нужно уметь уделять время.

Я нашел несколько хаков для DatePicker, чтобы работать со временем, но все они кажутся довольно не элегантными, и Google не дает ничего хорошего.

Есть ли хороший плагин jQuery для выбора даты и времени в одном элементе управления пользовательского интерфейса с удобным интерфейсом?

челси
источник
Я уверен, что мой пример немного менее запутан и более удобен для пользователя. Есть плюсы и минусы обоих.
Майкл Стоун

Ответы:

251

Безусловно, самый хороший и простой вариант выбора DateTime - http://trentrichardson.com/examples/timepicker/ .

Это расширение jQuery UI Datepicker, поэтому оно будет поддерживать те же темы, а также работать практически одинаково, схожим синтаксисом и т. Д. Это должно быть в комплекте с jQuery UI imo.

xordon
источник
3
Я использовал это, и я люблю это.
Сонни
3
Мне это нравится, но все равно ОЧЕНЬ глючит.
Аластер Питтс
11
"ОЧЕНЬ глючит"? Едва. Я использую его в производственном коде, и уже какое-то время. Это также активно развивается.
Сонни
7
@Sonny: используете ли вы его в производстве, не имеет никакого отношения к тому, глючит он или нет. Возможно, вы просто не видели его ошибок, потому что вы не делаете с ним тех вещей, которые их разоблачают, как, возможно, Аластер. С другой стороны, он не представил никаких доказательств своего утверждения, поэтому я не склонен относиться к нему слишком серьезно ...
iconoclast
18
Моя самая большая проблема с этим плагином - это пользовательский интерфейс: зачем мне использовать ползунки, горизонтальные, чтобы вводить время !? Это выглядит и чувствует себя очень неловко для меня. У меня был опыт много раз с ползунками, где я не могу получить его до нужного мне числа (многократно переходя немного дальше, чем немного ниже), и я в итоге набираю его. Клавиатура, как правило, самый простой способ ввести точное числовое значение. Если вам нужен метод визуального ввода, часы - это обычные часы, а не слайдер. Сложнее в реализации, но на самом деле может быть полезным (если возможен также ввод с клавиатуры).
иконоборчество
46

@ Дэвид, спасибо за рекомендацию! @fluid_chelsea, я только что выпустил Any + Time (TM) версии 3.x, которая использует jQuery вместо Prototype и имеет значительно улучшенный интерфейс, поэтому я надеюсь, что теперь он отвечает вашим потребностям:

http://www.ama3.com/anytime/

Любые проблемы, пожалуйста, дайте мне знать через ссылку на мой сайт!

Эндрю М. Эндрюс III
источник
6
Любая + Time (TM) версия 4.x теперь доступна! Новый релиз поддерживает TIME ZONES (найдите ТО в любом другом средстве выбора!), А также jQuery селекторы / цепочки, легкое удаление (избегайте утечек памяти!) И многие другие улучшения. Пожалуйста, подвезите его, и если у вас есть какие-либо проблемы или предложения, дайте мне знать через страницу комментариев на моем сайте.
Эндрю М. Эндрюс III
4
Любое + время выглядит довольно гладко. Мне это нравится.
Зак Петерсон
Просто внедрил AnyTime за несколько минут в приложении Rails. Работает отлично.
Гвин Морфей
Я просто выбрал сборщик AnyTime в качестве своего выбора для моего приложения JSF! Спасибо за хороший продукт, продолжайте в том же духе!
Arg
Any + Time добавляет новый скрытый div для пользовательского интерфейса для каждого ввода Any + Time (в отличие от jQUery UI datepicker, который использует скрытый div div), это сильно снижает производительность в плохо спроектированном MSIE6. Так что не используйте Any + Time, если вам нужна поддержка MSIE6!
Эдуардо
14

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

Я использую базовый пользовательский интерфейс DatePicker и следующий указатель времени.

Этот вдохновлен тем, что использует Календарь Google:

jQuery timePicker :
примеры: http://labs.perifer.se/timedatepicker/
проект на github: https://github.com/perifer/timePicker

Я нашел это, чтобы быть лучшим среди всех альтернатив. Пользователь может быстро вводить, он выглядит чисто, просто и позволяет пользователю вводить определенное время вплоть до минуты.

PS: На мой взгляд: ползунки (используемые некоторыми альтернативными таймерами) берут слишком много кликов и требуют от мыши точности мыши (что делает ввод медленнее).

Магне
источник
Базовый пользовательский интерфейс DatePicker: jqueryui.com/demos/datepicker
Magne
Это убивает преимущества привязки модели C # MVC для этой области
Серж Саган
13

Мой лучший опыт работы с датщиком связан с AnyTime на основе прототипа . Я знаю, что это не JQuery, но это все же может стоить компромисса для вас. Я не знаю абсолютно никакого прототипа, и с ним все еще достаточно легко работать.

Одно замечание, которое я нашел: оно не совместимо с некоторыми браузерами. То есть он не работал с более новой версией прототипа на Chrome.

Дэвид Бергер
источник
1
Если бы я мог использовать прототип, это не было бы проблемой, к сожалению, мы застряли с jQuery для этого приложения.
Челси
7
Просто обновление - AnyTime 3 теперь работает с jQuery.
Джаксидиан
Я не думал об этом месяцами и месяцами. Но мой личный проект нуждался в обновлении, и я был почти готов добавить немного jquery. Я подумал, что заменю средство выбора даты, пока я на нем, потому что мне не нужны все функции Any + Time, и подумал, что с таким же успехом могу пройти весь jQuery. И БАМ! Я сталкивался с этим. Отличное время.
Дэвид Бергер
Хорошо, хотя селектор года (щелчок <или>) мне не нравится.
кодер
7

Просто добавить к информации здесь, Проект Fluid имеет хорошие вика рецензию как описать большое количество даты и / или время сборщиков здесь .

Jaxidian
источник
4

Я исследовал это совсем недавно и еще не нашел приличного сборщика дат, который также включает в себя приличный сборщик времени. В итоге я использовал потрясающий DatePicker от eyecon с двумя простыми выпадающими списками времени. Я был соблазн использовать Timepickr.js, хотя, похоже, действительно хороший подход.

децезе
источник
3

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

Кажется, хорошо, я не слишком много смотрю на источник, но, похоже, это просто JavaScript.

Взгляни:

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

Вот ссылка на демонстрационную страницу:

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

удачи

Майкл Стоун
источник
Я использую это в течение нескольких лет. Это становится немного длиннее в зубе, но работает.
кодер
1

Это некоторый код, который я использую, чтобы пользователь выбрал один datetimepicker, установил datetime, а другой datetimepicker добавил одну минуту к этому времени.

Мне нужно было это для индивидуального контроля лекарств ....

Во всяком случае, подумал, что это может помочь кому-то еще, так как я не мог найти ответ где-нибудь в Интернете ...

(по крайней мере, не полный ответ)

Имейте в виду, что 60000 добавил, добавляет одну минуту. (60 * 1000 миллисекунд)

$('.frdtPicker').datetimepicker({
        onClose: function(dateText, inst) {
            var endDateTextBox = $('.todtPicker');
            if (endDateTextBox.val() != '') {
                var testStartDate = new Date(dateText);
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate) {

                    var testStartDate = new Date(dateText).getTime() + 60000;
                    var testStartDate2 = new Date(testStartDate); 

                    endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
                }
            }
            else {
                var testStartDate = new Date(dateText).getTime() + 60000;
                var testStartDate2 = new Date(testStartDate);
                endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
            }
            $('.frdtPicker').val(dateText); //endDateTextBox.val());

        },
        onSelect: function(selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });
Карлос Мартини
источник
1

Не jQuery, но он хорошо работает для календаря со временем: JavaScript Date Time Picker .

Я просто привязал событие click, чтобы открыть его:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
bigspotteddog
источник
1
Обновил ссылку - они ее перенесли.
bigspotteddog
Я использую его в течение нескольких лет, хотя я вызывал его по-другому (следовательно, не распознавая из вашего кода). Я перешел на DatePicker от jquery, так как тропический лес выглядит немного длиннее в зубе.
кодер
0

Я делаю одну функцию, как это:

function getTime()
{
    var date_obj = new Date();
    var date_obj_hours = date_obj.getHours();
    var date_obj_mins = date_obj.getMinutes();
    var date_obj_second = date_obj.getSeconds();

    var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
    return date_obj_time;
}

Затем я использую указатель даты jQuery UI следующим образом:

$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );

Итак, я получаю значение как это: 2010-10-31 12:41:57

dhaniBinZain
источник
иногда нам нужно определить время (не используя функцию getTime)
bungdito
-4

У нас были проблемы с поиском того, который работал так, как мы хотели, поэтому я написал один. Я поддерживаю источник и исправляю ошибки по мере их появления, а также предоставляю бесплатную поддержку.

http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx

Пятрас
источник
Эта ссылка не активна, к сожалению.
Стефан