Вибір дати / часу jQuery [закрито]


245

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

Я знайшов декілька хаків для того, щоб DatePicker працював із часом, але всі вони здаються досить неелегантними, і Google не виявляє нічого хорошого.

Чи є хороший плагін jQuery для вибору дат та часу в одному елементі управління інтерфейсом із зручним інтерфейсом?


Я майже впевнений, що мій приклад трохи менш заплутаний і більш зручний для користувачів. Є плюси і мінуси обох.
Майкл Стоун

Відповіді:


251

На сьогодні найприємніший і простий варіант вибору DateTime - це http://trentrichardson.com/examples/timepicker/ .

Це розширення інтерфейсу jQuery UI Datepicker, тому він буде підтримувати ті самі теми, а також він працює дуже точно так само, аналогічний синтаксис і т. Д. Це повинно бути упаковано з imo jQuery UI.


3
Я використовую цей, і я люблю його.
Сонні

3
Мені це подобається, але це все-таки ДУЖЕ баггі.
Аластер Піттс

11
"ДУЖЕ баггі"? Навряд чи. Я використовую його у виробничому коді, і вже деякий час. Це також активно розвивається.
Сонні

7
@Sonny: чи використовуєте ви його у виробництві, це не стосується того, баггі чи ні. Ви, можливо, просто не бачили його помилок, тому що ви не робите тих речей, які їх викривають, що, можливо, є Аластер. З іншого боку, він не запропонував жодних доказів щодо своєї претензії, тому я не схильний сприймати це занадто серйозно ...
iconoclast

18
Моя найбільша проблема з цим плагіном - це інтерфейс користувача: чому я хочу використовувати повзунки, горизонтальні при цьому !, щоб ввести час !? Мені це виглядає і дуже незручно. У мене був стільки разів досвід роботи з повзунками, коли я не можу отримати його до потрібного номера (кілька разів переходячи трохи нижче, ніж трохи), і я закінчую його введенням. Клавіатуру, як правило, найпростіший спосіб ввести точне числове значення. Якщо ви хочете метод візуального введення, годинник - це звичайний час, а не повзунок. Більш складний у здійсненні, але насправді може бути корисним (доки можливо також введення з клавіатури).
іконоборство

46

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

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

Будь-які проблеми, будь ласка, повідомте мене про це за посиланням для коментарів на моєму веб-сайті!


6
Будь-яка версія +x (TM) версія 4.x тепер доступна! Новий випуск підтримує часові зони (знайдіть ТО в будь-якому іншому виборі!), А також селектори / ланцюги jQuery, просте видалення (уникайте витоків пам'яті!) Та багато інших удосконалень. Будь ласка, попросіть, і якщо у вас виникнуть якісь проблеми чи пропозиції, повідомте мене про це на сторінці коментарів на моєму веб-сайті.
Ендрю М. Ендрюс III

4
Будь-який + час виглядає досить гладко. Мені це подобається.
Зак Петерсон

Просто впроваджено AnyTime за кілька хвилин у додатку Rails. Працює чудово.
Гвін Морфей

Я просто вибрав інструмент вибору AnyTime як вибір для свого додатка JSF! Дякуємо за гарний продукт, продовжуйте роботу!
Арг

Any + Time додає новий прихований поділ для інтерфейсу користувача для кожного вводу Any + Time (на відміну від jQUery інтерфейсу інтерфейсу, який повторно використовує прихований інтерфейс користувача 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.
Jaxidian

Я не думав про це місяцями і місяцями. Але мій особистий проект хотів кілька оновлень, і я вже майже готовий був ввести в дію який-небудь jquery. Я подумав, що заміню датчик, поки я в ньому, тому що мені не знадобляться всі функції Any + Time і подумав, що я можу також перейти на весь jQuery. І бам! Я натрапляю на це. Дивовижні терміни.
Девід Бергер

Приємно, хоча селектор року (клацання <або>) для мене хитромудрий.
кодер

7

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


4

Я досліджував це зовсім недавно і ще не знайшов гідного вибору дати, який також включає пристойний вибір часу. Що я в кінцевому підсумку використовував, був дивовижний DatePicker , що склався , з двома простими спаданнями часу. Мене спокусило використовувати Timepickr.js, але це виглядає як дуже приємний підхід.


3

Я зіткнувся з тією ж проблемою. Я фактично розробив моє програмування на сервері, але я швидко пробував, щоб спробувати допомогти вам і знайшов це.

Здається, добре, не надто дивився на джерело, але здається, що це суто JavaScript.

Погляньте:

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

Ось посилання на демонстраційну сторінку:

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

Щасти


Я цим користуюся вже кілька років. Це стає трохи довго в зубі, але працює.
кодер

1

Це деякий код, який я використовую для того, щоб користувач обрав один вибір часу, встановив час, а інший вибрав дату додав одну хвилину до цього часу.

Мені це було потрібно для контролю за замовленням ліків ...

У будь-якому випадку, я думав, що це може допомогти комусь іншому, оскільки я не можу знайти відповіді там, де в Інтернеті ...

(принаймні, не повна відповідь)

Майте на увазі, що доданий 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 Вибір часу часу .

Я просто зв'язав подію натискання, щоб з’явитись у ній:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});

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 таким чином:

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

Отже, я отримую таке значення, як таке: 2010-10-31 12:41:57


іноді нам потрібно визначити час (не використовуючи функцію getTime)
bungdito

-4

У нас були проблеми з пошуку того, хто працював так, як ми цього хотіли, тому я написав його. Я підтримую джерело та виправляю помилки, коли вони виникають, а також надаю безкоштовну підтримку.

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


На жаль, це посилання не активне.
Стефан
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.