Jak vybrat date/time picker

Že raději uživateli nabídnout výběr data v malém pop-up kalendáři, než ho nutit napsat datum ve správném formátu je bez diskuze. U času už to tak jasné být nemusí, hodně timepickerů je opravdu hrozných. Jak teda vybrat to nejlepší?

Nejznámější je rozhodně jQueryUI datepicker. Za mě je ale rozhodně nejhorší. Nutnost jQuery většinou překážka není, je ale nutné stáhnout velký balík jQuery UI knihoven.

Datepicker / Timepicker - Fengyuan Chen

Naposledy jsou použil Datepicker od tvůrce Fengyuan Chen na jeho GitHubu. Celá knihovna je jednoduchá a malá, ale vyžaduje jQuery. Nabízí dostatečné množství eventů metod a design je velmi čistý. Jedinou nevýhodou, se kterou jsem se setkal jsem také popsal v Issues. Jedná se o nemožnost vložení data pod jiným formátem, než jaký je nastaven pro daný jazyk.

Jednoduché použití pro výběr rozsahů 2 datumů: 

var dateTo = $("[name=date_to]").datepicker({
    language: 'cs-CZ',
    autoPick: true
});
var dateFrom = $("[name=date_from]").datepicker({
    language: 'cs-CZ',
    autoPick: true
}).on('pick.datepicker', function (e) {
    dateTo.datepicker('setStartDate', e.date);
    // Pokud výběr "Do" je dříve než "Od"
    // automaticky se aktivuje výběr "Do" 
    if (dateTo.datepicker('getDate') < e.date){
        $(e.target).datepicker('hide');
        dateTo.datepicker('setDate', e.date).datepicker('show');
    }
});

Timepicker

Jak jsem již psal, timepicker je často vyřešen tak, že uživateli zadání času ztíží než ulehčí. Od stejného autora existuje ale i DateTime picker, který bych zařadil mezi ty povedenější.

Flatpickr funguje i bez jQuery

Jako další velmi povedený Date/Time picker od Gregoryho obsahuje možnost výběru data, nebo času, nebo data i času zároveň. Velkou výhodou je možnost fungování i bez jQuery. Pokud ale jQuery na webu je, knihovna bude registrována jako plugin.

Podobně jako předchozí knihovna, také obsahuje velmi čistý design. Navíc ale dodává pluginy, které umožňují třeba výběr týdne. Osobní zkušenost nemám, ale při potřebě výběru kromě data i času rozhodně vyzkouším.

---

Používáte jiný date/time picker? Podělte se v komentářích.
Úvodní obrázek vytvořen z vektorů z Freepik 1 a 2.