A refreshing JavaScript Datepicker

• Lightweight (less than 5kb minified and gzipped)
• No dependencies (but plays well with Moment.js)
• Modułowe klasy CSS dla łatwej stylizacji

Wypróbuj Pikaday Demo →

Produkcja gotowa? Od wersji 1.0.0 Pikaday jest stabilny i używany w produkcji. Jeśli jednak znajdziesz błędy lub masz prośby o nowe funkcje, prosimy o przesłanie ich na GitHub issue tracker.Zobacz także changelog

Instalacja

Możesz zainstalować Pikaday jako pakiet NPM:

npm install pikaday

Albo połączyć się bezpośrednio z CDN:

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

Style

Będziesz także musiał dołączyć plik CSS Pikaday. Ten krok zależy od tego jak Pikaday został zainstalowany. Albo import z NPM:

@import './node_modules/pikaday/css/pikaday.css';

Albo link do CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

Użycie

Pikaday może być związany z polem wejściowym:

<input type="text">

Dodaj JavaScript do końca dokumentu:

<script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker') });</script>

Jeśli używasz jQuery upewnij się, że przekazujesz tylko pierwszy element:

var picker = new Pikaday({ field: $('#datepicker') });

Jeśli instancja Pikaday nie jest związana z polem, możesz dołączyć element w dowolnym miejscu:

var field = document.getElementById('datepicker');var picker = new Pikaday({ onSelect: function(date) { field.value = picker.toString(); }});field.parentNode.insertBefore(picker.el, field.nextSibling);

Formatowanie

Domyślnie daty są formatowane i parsowane przy użyciu standardowego obiektu JavaScript Date.Jeśli Moment.js jest dostępny w zakresie, będzie on używany do formatowania i parsowania wartości wejściowych. Możesz przekazać dodatkową format opcję do konfiguracji, która zostanie przekazana do moment konstruktora.Zobacz przykład moment.js dla pełnej wersji.

<input type="text" value="9 Oct 2014"><script src="moment.js"></script><script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D MMM YYYY', onSelect: function() { console.log(this.getMoment().format('Do MMMM YYYY')); } });</script>

Dla bardziej zaawansowanego i elastycznego formatowania możesz przekazać własną funkcję toString do konfiguracji, która będzie używana do formatowania obiektu daty.Ta funkcja ma następujący podpis:

toString(date, format = 'YYYY-MM-DD')

Powinieneś zwrócić z niej ciąg znaków.

Bądź jednak ostrożny. Jeśli sformatowany łańcuch, który zwracasz, nie może być poprawnie przetworzony przez metodę Date.parse (lub przez moment, jeśli jest ona dostępna), to musisz dostarczyć własną funkcję parse w configu. Tej funkcji zostanie przekazany sformatowany łańcuch znaków i format:

parse(dateString, format = 'YYYY-MM-DD')

var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D/M/YYYY', toString(date, format) { // you should do formatting based on the passed format, // but we will just return 'D/M/YYYY' for simplicity const day = date.getDate(); const month = date.getMonth() + 1; const year = date.getFullYear(); return `${day}/${month}/${year}`; }, parse(dateString, format) { // dateString is the result of `toString` method const parts = dateString.split('/'); const day = parseInt(parts, 10); const month = parseInt(parts, 10) - 1; const year = parseInt(parts, 10); return new Date(year, month, day); }});

Konfiguracja

Jak pokazują przykłady powyżejPikaday ma wiele przydatnych opcji:

• field bind the datepicker to a form field
• trigger use a different element to trigger opening the datepicker, zobacz przykład wyzwalacza (domyślnie field)
• bound automatycznie pokaż/ukryj datepicker przy field focus (domyślnie true jeśli field jest ustawione)
• ariaLabel data-attribute na polu wejściowym z aria assistance text (stosowane tylko gdy bound jest ustawione)
• position preferowana pozycja datepickera względem pola formularza, np.g.: top right, bottom right Uwaga: może wystąpić automatyczne dostosowanie, aby uniknąć wyświetlania datepickera poza rzutnią, zobacz przykładowe pozycje (domyślnie 'lewy dolny’)
• reposition można ustawić na false, aby nie zmieniać położenia datepickera w obrębie rzutni, zmuszając go do przyjęcia skonfigurowanego position (domyślnie: true)
• container węzeł DOM do renderowania kalendarza w, zobacz przykład kontenera (domyślnie: undefined)
• format domyślny format wyjściowy dla wartości .toString() i field (wymaga Moment.js do niestandardowego formatowania)
• formatStrict domyślna flaga dla ścisłego parsowania daty przez moment (wymaga Moment.js do niestandardowego formatowania)
• toString(date, format) funkcja, która będzie używana do niestandardowego formatowania. Ta funkcja będzie miała pierwszeństwo przed moment.
• parse(dateString, format) funkcja, która będzie używana do parsowania łańcucha wejściowego i uzyskania z niego obiektu daty. Ta funkcja będzie miała pierwszeństwo przed funkcją moment.
• defaultDate początkowa data do wyświetlenia przy pierwszym otwarciu
• setDefaultDate Boolean (true/false). uczyń defaultDate początkową wybraną wartością
• firstDay pierwszy dzień tygodnia (0: niedziela, 1: poniedziałek, itd.)
• minDate minimalna/najstarsza data, która może być wybrana (powinien to być natywny obiekt Date – np.np. new Date() lub moment().toDate())
• maxDate maksymalna/najpóźniejsza data, która może zostać wybrana (powinien to być natywny obiekt Date – np. new Date() lub moment().toDate())
• disableWeekends uniemożliwienie wyboru sobót lub niedziel
• disableDayFn funkcja wywołania zwrotnego, która otrzymuje obiekt Date dla każdego dnia w widoku. Powinna zwrócić true, aby wyłączyć wybór tego dnia.
• yearRange liczba lat po obu stronach (np. 10) lub tablica górnego/dolnego zakresu (np. )
• showWeekNumber pokaż numer tygodnia ISO w nagłówku wiersza (domyślnie false)
• pickWholeWeek wybierz cały tydzień zamiast dnia (domyślnie false)
• isRTL odwróć kalendarz dla języków od prawej do lewejlewy
• i18n domyślne ustawienia językowe dla nazw miesięcy i dni tygodnia (patrz internacjonalizacja poniżej)
• yearSuffix dodatkowy tekst dołączany do roku w tytule
• showMonthAfterYear renderuj miesiąc po roku w tytule (domyślnie false)
• showDaysInNextAndPreviousMonths renderuj dni siatki kalendarza, które należą do następnego lub poprzedniego miesiąca (domyślnie: false)
• enableSelectionDaysInNextAndPreviousMonths pozwala użytkownikowi wybrać datę, która znajduje się w następnych lub poprzednich miesiącach (domyślnie: false)
• numberOfMonths liczba widocznych kalendarzy
• mainCalendar gdy numberOfMonths jest używane, pomoże to wybrać, gdzie będzie główny kalendarz (domyślnie left, można ustawić na right). Używane tylko do pierwszego wyświetlenia lub gdy wybrana data nie jest jeszcze widoczna
• events tablica dat, które chciałbyś odróżnić od zwykłych dni (np. )
• theme zdefiniuj nazwę klasy, która może być użyta jako hak do stylizacji różnych motywów, zobacz przykład motywu (domyślnie null)
• blurFieldOnSelect definiuje, czy pole jest zamazane, gdy wybrana jest data (domyślnie true)
• onSelect funkcja wywołania zwrotnego, gdy wybrana jest data
• onOpen funkcja wywołania zwrotnego, gdy selektor staje się widoczny

.

• onClose funkcja wywołania zwrotnego, gdy selektor jest ukryty
• onDraw funkcja wywołania zwrotnego, gdy selektor rysuje nowy miesiąc
• keyboardInput włącz obsługę wprowadzania danych z klawiatury (domyślnie true)

Stylizacja

Jeśli opcja reposition configuration-jest włączona (domyślnie), Pikaday zastosuje klasy CSS do datepickera w zależności od tego, jak jest on pozycjonowany:

• top-aligned
• left-aligned
• right-aligned
• bottom-aligned

Zauważ, że element DOM w dowolnym momencie będzie miał zazwyczaj 2 klasy CSS (np. top-aligned right-aligned etc).

Wtyczka jQuery

Zwykła wersja Pikaday nie wymaga jQuery, jednakże istnieje wtyczka jQuery, jeśli to pływa po Twojej łodzi (zobacz plugins/pikaday.jquery.js w repozytorium). Ta wersja wymaga jQuery, naturalnie, i może być używana jak inne wtyczki:Zobacz przykład jQuery dla pełnej wersji.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="pikaday.js"></script><script src="plugins/pikaday.jquery.js"></script><script>// activate datepickers for all elements with a class of `datepicker`$('.datepicker').pikaday({ firstDay: 1 });// chain a few methods for the first datepicker, jQuery style!$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);</script>

Wsparcie AMD

Jeśli używasz modułowego programu ładującego skrypty, Pikaday nie jest związany z obiektem globalnym i będzie ładnie pasował do twojego procesu budowania. Możesz wymagać Pikaday tak jak każdego innego modułu.Zobacz przykład AMD dla pełnej wersji.

require(, function(Pikaday) { var picker = new Pikaday({ field: document.getElementById('datepicker') });});

To samo dotyczy wspomnianej wcześniej wtyczki jQuery.Zobacz przykład jQuery AMD dla pełnej wersji.

require(, function($) { $('#datepicker').pikaday();});

Obsługa modułów CommonJS

Jeśli używasz środowiska zgodnego z CommonJS, możesz użyć funkcji require do zaimportowania Pikaday.

var pikaday = require('pikaday');

Jeśli łączysz wszystkie wymagane moduły z Browserify i nie używasz Moment.js określ opcję ignore:

browserify main.js -o bundle.js -i moment

Ruby on Rails

Jeśli używasz Ruby on Rails, upewnij się, że sprawdzisz klejnot Pikaday.

Metody

Możesz kontrolować datownik po utworzeniu:

var picker = new Pikaday({ field: document.getElementById('datepicker') });

Get and set date

picker.toString('YYYY-MM-DD')

Przywraca wybraną datę w formacie łańcuchowym. Jeśli Moment.js istnieje (zalecane) to Pikaday może zwrócić dowolny format, który Moment rozumie.Możesz również dostarczyć własną funkcję toString i wykonać formatowanie samodzielnie. Przeczytaj więcej w sekcji dotyczącej formatowania.

Jeśli nie istnieje obiekt moment ani nie podano funkcji toString, zostanie użyta domyślna metoda JavaScript .toDateString().

picker.getDate()

Zwraca podstawowy obiekt JavaScript Date wybranego dnia lub null, jeśli nie ma wyboru.

picker.setDate('2015-01-01')

Ustawia bieżący wybór. Zostanie to ograniczone w granicach opcji minDate i maxDate, jeśli zostały one określone. Możesz opcjonalnie przekazać boolean jako drugi parametr, aby zapobiec wyzwoleniu wywołania zwrotnego onSelect (true), umożliwiając ustawienie daty po cichu.

picker.getMoment()

Wraca obiekt Moment.js dla wybranej daty (Moment musi być załadowany przed Pikaday).

picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))

Ustawia bieżący wybór za pomocą obiektu Moment.js (zobacz setDate po szczegóły).

Wyczyść i zresetuj datę

picker.clear()

Wyczyści i zresetuje dane wejściowe, do których jest powiązany picker.

Zmień aktualny widok

picker.gotoDate(new Date(2014, 1))

Zmieni aktualny widok, aby zobaczyć określoną datę. Ten przykład spowoduje przeskok do lutego 2014 (miesiąc jest indeksem opartym na zerze).

picker.gotoToday()

Skrót do picker.gotoDate(new Date())

picker.gotoMonth(2)

Zmień bieżący widok według miesiąca (0: styczeń, 1: luty itd.).

picker.nextMonth()picker.prevMonth()

Przejdź do następnego lub poprzedniego miesiąca (w razie potrzeby zmieni rok).

picker.gotoYear()

Zmień przeglądany rok.

picker.setMinDate()

Zaktualizuj minimalną/najstarszą datę, którą można wybrać.

picker.setMaxDate()

Zaktualizuj maksymalną/najpóźniejszą datę, którą można wybrać.

picker.setStartRange()

Zaktualizuj datę początkową zakresu. W przypadku użycia dwóch instancji Pikaday do wybrania zakresu dat.

picker.setEndRange()

Uaktualnij datę końcową zakresu. W celu użycia dwóch instancji Pikaday do wybrania zakresu dat.

Pokaż i ukryj datepicker

picker.isVisible()

Wraca true lub false.

picker.show()

Uczynić selektor widocznym.

picker.adjustPosition()

Obliczyć i zmienić pozycję selektora.

picker.hide()

Ukryć selektor, czyniąc go niewidocznym.

picker.destroy()

Ukryj selektor i usuń wszystkich słuchaczy zdarzeń – bez powrotu!

Internacjonalizacja

Domyślny format konfiguracji i18n wygląda tak:

i18n: { previousMonth : 'Previous Month', nextMonth : 'Next Month', months : , weekdays : , weekdaysShort : }

Musisz podać 12 miesięcy i 7 dni tygodnia (ze skrótami). Zawsze podawaj dni tygodnia w tej kolejności, z niedzielą jako pierwszą. W razie potrzeby można zmienić kolejność za pomocą opcji firstDay (0: niedziela, 1: poniedziałek itd.). Możesz także ustawić isRTL na true dla języków, które są czytane od prawej do lewej strony.

Rozszerzenia

Timepicker

Pikaday jest czystym datepickerem. Nie będzie obsługiwał wybierania pory dnia. Jednakże, podjęto wysiłki w celu dodania obsługi czasu do Pikaday.Zobacz #1 i #18. Te rezydują w swoich własnych forkach.

Możesz użyć pracy @owenmead wykonanej ostatnio w owenmead/PikadayA bardziej proste podejście do wyboru czasu wykonane przez @xeeali w xeeali/Pikaday jest oparte na wersji 1.2.0.Also @stas has a fork stas/Pikaday, but is now quite old

Browser Compatibility

• IE 7+
• Chrome 8+
• Firefox 3.5+
• Safari 3+
• Opera 10.6+

Autorzy

• David Bushell https://dbushell.com @dbushell
• Ramiro Rikkert GitHub @RamRik

Podziękowania dla @shoogledesigns za nazwę.

.