Un JavaScript Datepicker revigorant

• Lightweight (mai puțin de 5kb minificat și gzipped)
• Nu există dependențe (dar joacă bine cu Moment.js)
• Classe CSS modulare pentru o stilizare ușoară

Încercați Pikaday Demo →

Pregătit pentru producție? Începând cu versiunea 1.0.0, Pikaday este stabil și utilizat în producție. Dacă totuși găsiți bug-uri sau aveți cereri de caracteristici, vă rugăm să le trimiteți la trackerul de probleme GitHub.Vedeți și changelog-ul

Instalare

Puteți instala Pikaday ca un pachet NPM:

npm install pikaday

Sau faceți un link direct către CDN:

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

Stiluri

De asemenea, va trebui să includeți fișierul CSS Pikaday. Acest pas depinde de modul în care a fost instalat Pikaday. Fie importați din NPM:

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

Sau creați un link către CDN:

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

Utilizare

Pikaday poate fi legat de un câmp de intrare:

<input type="text">

Adaugați JavaScript la sfârșitul documentului:

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

Dacă folosiți jQuery asigurați-vă că treceți doar primul element:

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

Dacă instanța Pikaday nu este legată de un câmp, puteți adăuga elementul oriunde:

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

Formatare

În mod implicit, datele sunt formatate și analizate folosind obiectul standard JavaScript Date.Dacă Moment.js este disponibil în domeniul de aplicare, acesta va fi utilizat pentru a formata și analiza valorile de intrare. Puteți trece o opțiune suplimentară format la configurație, care va fi transmisă constructorului moment. consultați exemplul moment.js pentru o versiune completă.

<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>

Pentru o formatare mai avansată și mai flexibilă, puteți trece propria funcție toString la configurație, care va fi folosită pentru a formata obiectul dată.Această funcție are următoarea semnătură:

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

Ar trebui să returnați un șir de caractere din ea.

Atenție, totuși. Dacă șirul formatat pe care îl returnați nu poate fi analizat corect de metoda Date.parse (sau de moment, dacă aceasta este disponibilă), atunci trebuie să furnizați propria funcție parse în configurație. Acestei funcții i se va trece șirul formatat și formatul:

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); }});

Configurație

După cum demonstrează exemplele de mai susPikaday are multe opțiuni utile:

• field legați datapickerul de un câmp de formular
• trigger folosiți un element diferit pentru a declanșa deschiderea datapickerului, a se vedea exemplul de declanșare (implicit field)
• bound afișează/ascunde automat selectorul de date la field focus (implicit true dacă field este setat)
• ariaLabel atributul de date al câmpului de intrare cu un text de asistență aria (aplicat numai când bound este setat)
• position poziția preferată a selectorului de date în raport cu câmpul de formular, de ex.g.: top right, bottom right Notă: poate avea loc o ajustare automată pentru a evita ca datapicker-ul să fie afișat în afara viewportului, a se vedea exemplul pozițiilor (implicit la „stânga jos”)
• reposition poate fi setat la false pentru a nu repoziționa datapicker-ul în cadrul viewportului, forțându-l să ia poziția configurată position (implicit: true)
• container nodul DOM pentru a reda calendarul în, vezi exemplul containerului (implicit: nedefinit)
• format formatul de ieșire implicit pentru valoarea .toString() și field (necesită Moment.js pentru o formatare personalizată)

formatStrict steagul implicit pentru analiza strictă a datelor din Moment (necesită Moment.js pentru o formatare personalizată)

• toString(date, format) funcția care va fi utilizată pentru o formatare personalizată. Această funcție va avea prioritate față de funcția moment.
• parse(dateString, format) care va fi utilizată pentru analizarea șirului de intrare și obținerea unui obiect dată din acesta. Această funcție va avea prioritate față de moment.
• defaultDate data inițială de vizualizat la prima deschidere
• setDefaultDate Boolean (true/false). face din defaultDate valoarea inițială selectată
• firstDay prima zi a săptămânii (0: duminică, 1: luni, etc)
• minDate data minimă/cea mai apropiată care poate fi selectată (aceasta ar trebui să fie un obiect Date nativ – de ex.g. new Date() sau moment().toDate())
• maxDate data maximă/cea mai târzie care poate fi selectată (aceasta ar trebui să fie un obiect Date nativ – de exemplu, new Date() sau moment().toDate())
• disableWeekends nu permite selectarea sâmbetelor sau duminicilor
• disableDayFn funcție de apelare care primește un obiect Date pentru fiecare zi din vizualizare. Ar trebui să returneze true pentru a dezactiva selecția acelei zile.
• yearRange număr de ani de o parte și de alta (de ex. 10) sau matrice de interval superior/inferior (de ex. )
• showWeekNumber afișează numărul ISO al săptămânii în capul rândului (implicit false)
• pickWholeWeek selectează o săptămână întreagă în loc de o zi (implicit false)
• isRTL inversează calendarul pentru a selecta de la dreapta la dreapta.stânga limbi

i18n limbi implicite pentru numele lunilor și zilelor săptămânii (a se vedea internaționalizarea de mai jos)

• yearSuffix text suplimentar care să se adauge la anul din titlu
• showMonthAfterYear redă luna după anul din titlu (implicit false)
• showDaysInNextAndPreviousMonths redă zilele din grila calendarului care cad în lunile următoare sau anterioare (implicit: false)
• enableSelectionDaysInNextAndPreviousMonths permite utilizatorului să selecteze data care se încadrează în lunile următoare sau anterioare (implicit: false)
• numberOfMonths numberOfMonths numărul de calendare vizibile
• mainCalendar atunci când se utilizează numberOfMonths, acest lucru vă va ajuta să alegeți unde va fi calendarul principal (implicit left, poate fi setat la right). Se utilizează numai pentru prima afișare sau atunci când o dată selectată nu este deja vizibilă
• events matrice de date pe care doriți să le diferențiați de zilele obișnuite (de ex. )
• theme definiți un nume de clasă care poate fi utilizat ca un cârlig pentru stilizarea diferitelor teme, a se vedea exemplul de temă (implicit null)
• blurFieldOnSelect definește dacă câmpul este estompat atunci când se selectează o dată (implicit true)
• onSelect funcție de callback pentru când se selectează o dată
• onOpen funcție de callback pentru când selectorul devine vizibil

. onClose funcție callback pentru atunci când selectorul este ascuns

• onDraw funcție callback pentru atunci când selectorul desenează o nouă lună
• keyboardInput activați suportul de introducere a datelor de la tastatură (implicit true)

Styling

În cazul în care configurația reposition…opțiune este activată (implicit), Pikaday va aplica clase CSS la datapicker în funcție de modul în care acesta este poziționat:

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

Rețineți că elementul DOM va avea în orice moment, de obicei, 2 CSS-clase (de ex. top-aligned right-aligned etc).

jQuery Plugin

Versiunea normală a Pikaday nu necesită jQuery, totuși există un plugin jQuery dacă asta vă place (vezi plugins/pikaday.jquery.js în depozit). Această versiune necesită jQuery, în mod natural, și poate fi folosită ca și alte pluginuri: Vedeți exemplul jQuery pentru o versiune completă.

<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>

Suport AMD

Dacă folosiți un încărcător de scripturi modular, Pikaday nu este legat de obiectul global și se va potrivi foarte bine în procesul de construcție. Puteți cere Pikaday la fel ca orice alt modul.Vedeți exemplul AMD pentru o versiune completă.

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

Același lucru este valabil și pentru plugin-ul jQuery menționat mai sus.Vedeți exemplul jQuery AMD pentru o versiune completă.

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

Suportul modulelor CommonJS

Dacă folosiți un mediu compatibil CommonJS, puteți folosi funcția require pentru a importa Pikaday.

var pikaday = require('pikaday');

Când grupați toate modulele necesare cu Browserify și nu folosiți Moment.js specificați opțiunea ignore:

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

Ruby on Rails

Dacă folosiți Ruby on Rails, asigurați-vă că verificați gemul Pikaday.

Metode

Puteți controla selectorul de date după creare:

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

Get and set date

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

Întoarce data selectată într-un format de șir de caractere. Dacă există Moment.js (recomandat), atunci Pikaday poate returna orice format pe care Moment îl înțelege. puteți, de asemenea, să furnizați propria funcție toString și să realizați singur formatarea. Citiți mai multe în secțiunea de formatare.

Dacă nici obiectul moment nu există și nici funcția toString nu este furnizată, se va folosi metoda implicită .toDateString() a JavaScript.

picker.getDate()

Returnează un obiect JavaScript de bază Date al zilei selectate sau null dacă nu există selecție.

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

Setează selecția curentă. Aceasta va fi restrânsă în limitele opțiunilor minDate și maxDate, dacă acestea sunt specificate. Puteți trece opțional un boolean ca al doilea parametru pentru a preveni declanșarea callback-ului onSelect (true), permițând ca data să fie setată în mod silențios.

picker.getMoment()

Întoarce un obiect Moment.js pentru data selectată (Moment trebuie să fie încărcat înainte de Pikaday).

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

Stabilește selecția curentă cu un obiect Moment.js (vezi setDate pentru detalii).

Clear and reset date

picker.clear()

Va șterge și reseta data

picker.clear()

Va șterge și reseta intrarea la care este legat picker-ul.

Change current view

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

Schimbă vizualizarea curentă pentru a vedea o anumită dată. Acest exemplu va sări la februarie 2014 (luna este un indice bazat pe zero).

picker.gotoToday()

Shortcut pentru picker.gotoDate(new Date())

picker.gotoMonth(2)

Schimbă vizualizarea curentă în funcție de lună (0: ianuarie, 1: februarie, etc.).

picker.nextMonth()picker.prevMonth()

Vai la luna următoare sau anterioară (aceasta va schimba anul dacă este necesar).

picker.gotoYear()

Modificați anul care este vizualizat.

picker.setMinDate()

Actualizați data minimă/cea mai timpurie care poate fi selectată.

picker.setMaxDate()

Actualizați data maximă/cea mai târzie care poate fi selectată.

picker.setStartRange()

Actualizați data de început a intervalului. Pentru utilizarea a două instanțe Pikaday pentru a selecta un interval de date.

picker.setEndRange()

Update the range end date. Pentru utilizarea a două instanțe Pikaday pentru a selecta un interval de date.

Show and hide datepicker

picker.isVisible()

Returnează true sau false.

picker.show()

Fă selectorul vizibil.

picker.adjustPosition()

Recalculează și modifică poziția selectorului.

picker.hide()

Ascunde selectorul făcându-l invizibil.

picker.destroy()

Ascundeți selectorul și eliminați toți ascultătorii de evenimente – fără cale de întoarcere!

Internaționalizare

Formul implicit de configurare i18n arată astfel:

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

Trebuie să furnizați 12 luni și 7 zile ale săptămânii (cu abrevieri). Specificați întotdeauna zilele săptămânii în această ordine, cu duminica prima. Puteți modifica opțiunea firstDay pentru a reordona dacă este necesar (0: duminică, 1: luni, etc.). De asemenea, puteți seta isRTL la true pentru limbile care se citesc de la dreapta la stânga.

Extensii

Timepicker

Pikaday este un datepicker pur. Acesta nu va suporta selectarea unei ore a zilei. Cu toate acestea, au existat eforturi pentru a adăuga suport pentru ora în Pikaday. a se vedea #1 și #18. Acestea rezidă în propria lor bifurcație.

Puteți folosi munca pe care @owenmead a făcut-o cel mai recent la owenmead/PikadayO abordare mai simplă de selectare a orei făcută de @xeeali la xeeali/Pikaday se bazează pe versiunea 1.2.0.De asemenea, @stas are o bifurcație stas/Pikaday, dar este acum destul de veche

Compatibilitate cu browserele

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

Autori

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

Mulțumiri lui @shoogledesigns pentru nume.