Een verfrissende JavaScript Datepicker

• Lichtgewicht (minder dan 5kb geminified en gzipped)
• Geen afhankelijkheden (maar speelt goed met Moment.js)
• Modulaire CSS-klassen voor eenvoudige styling

Probeer Pikaday Demo →

Klaar voor productie? Sinds versie 1.0.0 is Pikaday stabiel en wordt in productie gebruikt. Als u echter bugs vindt of functieverzoeken heeft, kunt u deze indienen op de GitHub issue tracker.Zie ook de changelog

Installatie

U kunt Pikaday installeren als een NPM package:

npm install pikaday

Of direct linken naar het CDN:

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

Styles

U zult ook het Pikaday CSS bestand moeten includen. Deze stap hangt af van hoe Pikaday werd geïnstalleerd. Ofwel importeren van NPM:

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

Of linken naar de CDN:

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

Gebruik

Pikaday kan gebonden worden aan een invoerveld:

<input type="text">

Voeg het JavaScript toe aan het einde van uw document:

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

Als u jQuery gebruikt, zorg er dan voor dat u alleen het eerste element doorgeeft:

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

Als de Pikaday-instantie niet aan een veld is gebonden, kunt u het element overal toevoegen:

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

Opmaak

De datums worden standaard geformatteerd en ontleed met behulp van het standaard JavaScript-object Date.Als Moment.js in het bereik beschikbaar is, wordt het gebruikt om invoerwaarden te formatteren en te parseren. U kunt een extra format optie doorgeven aan de configuratie die zal worden doorgegeven aan de moment constructor.Zie het moment.js voorbeeld voor een volledige versie.

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

Voor meer geavanceerde en flexibele opmaak kunt u uw eigen toString functie aan de configuratie doorgeven die zal worden gebruikt om het datumobject op te maken.Deze functie heeft de volgende signatuur:

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

U moet er een string uit retourneren.

Wees echter voorzichtig. Als de geformatteerde string die u retourneert niet correct kan worden geparseerd door de Date.parse methode (of door moment als die beschikbaar is), dan moet u uw eigen parse functie in de config voorzien. Aan deze functie wordt de geformatteerde string en de opmaak doorgegeven:

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

Configuratie

Zoals de voorbeelden hierboven laten zien heeftPikaday vele nuttige opties:

• field bind de datepicker aan een formulierveld
• trigger gebruik een ander element om het openen van de datepicker te triggeren, zie trigger voorbeeld (standaard field)
• bound automatisch tonen/verbergen van de datepicker bij field focus (standaard true als field is ingesteld)
• ariaLabel data-attribuut op het invoerveld met een aria bijstand tekst (alleen toegepast als bound is ingesteld)
• position voorkeurspositie van de datepicker ten opzichte van het formulierveld, bijv.g.: top right, bottom right Opmerking: er kan een automatische aanpassing plaatsvinden om te voorkomen dat de datepicker buiten de viewport wordt weergegeven, zie het voorbeeld van de posities (standaard ‘linksonder’)
• reposition kan op false worden gezet om de datepicker niet binnen de viewport te herpositioneren, zodat deze de geconfigureerde position krijgt (standaard: true)
• container DOM-knooppunt om kalender in te renderen, zie container voorbeeld (standaard: ongedefinieerd)
• format het standaard uitvoerformaat voor .toString() en field waarde (vereist Moment.js voor aangepaste opmaak)
• formatStrict de standaard vlag voor Moment’s strikte datum parsing (vereist Moment.js voor aangepaste opmaak)
• toString(date, format) functie die zal worden gebruikt voor aangepaste opmaak. Deze functie heeft voorrang op moment.
• parse(dateString, format) functie die zal worden gebruikt voor het ontleden van input string en het verkrijgen van een datum object van het. Deze functie heeft voorrang op moment.
• defaultDate de begindatum om te bekijken wanneer voor het eerst geopend
• setDefaultDate Boolean (waar/waar). maak van defaultDate de aanvankelijk geselecteerde waarde
• firstDay eerste dag van de week (0: zondag, 1: maandag, enz)
• minDate de minimum/eerste datum die kan worden geselecteerd (dit moet een native datumobject zijn – bijv.b.v. new Date() of moment().toDate())
• maxDate de maximum/laatste datum die kan worden geselecteerd (dit moet een native Datum-object zijn – b.v. new Date() of moment().toDate())
• disableWeekends selectie van zaterdagen of zondagen verbieden
• disableDayFn callback-functie die een Datum-object krijgt doorgegeven voor elke dag in de view. Moet true terugsturen om selectie van die dag uit te schakelen.
• yearRange aantal jaren aan weerszijden (bijv. 10) of array van bovenste/onderste bereik (bijv. )
• showWeekNumber toon het ISO weeknummer aan het hoofd van de rij (standaard false)
• pickWholeWeek selecteer een hele week in plaats van een dag (standaard false)
• isRTL draai de kalender om voor rechts-naar-links talen
• isRTL draai de kalender om voor rechts-naartalen
• i18n taalstandaards voor maand- en weekdagnamen (zie internationalisatie hieronder)
• yearSuffix extra tekst om aan het jaartal in de titel toe te voegen
• showMonthAfterYear de maand na het jaartal in de titel weergeven (standaard false)
• showDaysInNextAndPreviousMonths dagen van het kalenderrooster weergeven die in de volgende of vorige maanden vallen (standaard false)
• showDaysInNextAndPreviousMonths dagen van het kalenderrooster weergeven die in de volgende of vorige maanden vallen (standaard false): false)
• enableSelectionDaysInNextAndPreviousMonths laat gebruiker datum selecteren die in de volgende of vorige maanden valt (default: false)
• numberOfMonths aantal zichtbare kalenders
• mainCalendar wanneer numberOfMonths wordt gebruikt, helpt dit om te kiezen waar de hoofdkalender komt te staan (standaard left, kan worden ingesteld op right). Alleen gebruikt voor de eerste weergave of wanneer een geselecteerde datum nog niet zichtbaar is
• events array van datums die u wilt onderscheiden van gewone dagen (b.v. )
• theme definieer een classname die gebruikt kan worden als haakje voor de styling van verschillende thema’s, zie thema voorbeeld (standaard null)
• blurFieldOnSelect definieert of het veld wazig wordt wanneer een datum wordt geselecteerd (standaard true)
• onSelect callback functie voor wanneer een datum wordt geselecteerd
• onOpen callback functie voor wanneer de kiezer zichtbaar wordt
• onClose terugbelfunctie voor wanneer de kiezer verborgen wordt
• onDraw terugbelfunctie voor wanneer de kiezer een nieuwe maand tekent
• keyboardInput ondersteuning voor toetsenbordinvoer inschakelen (standaard true)

Styling

Als de configuratie-optie reposition is ingeschakeld (standaardinstelling), wordt

Styling

optie is ingeschakeld (standaard), zal Pikaday CSS-klassen toepassen op de datepicker, afhankelijk van hoe deze is gepositioneerd:

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

Merk op dat het DOM-element op elk moment meestal 2 CSS-klassen zal hebben (bijv.

jQuery Plugin

De normale versie van Pikaday vereist geen jQuery, maar er is een jQuery plugin als dat je boot drijft (zie plugins/pikaday.jquery.js in de repository). Deze versie vereist jQuery, natuurlijk, en kan gebruikt worden zoals andere plugins:Zie het jQuery voorbeeld voor een volledige versie.

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

AMD ondersteuning

Als je een modulaire script loader gebruikt, is Pikaday niet gebonden aan het globale object en zal het mooi passen in je bouwproces. U kunt Pikaday net als elke andere module vereisen.Zie het AMD voorbeeld voor een volledige versie.

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

Hetzelfde geldt voor de hierboven genoemde jQuery plugin.Zie het jQuery AMD voorbeeld voor een volledige versie.

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

CommonJS module ondersteuning

Als u een CommonJS compatibele omgeving gebruikt, kunt u de require functie gebruiken om Pikaday te importeren.

var pikaday = require('pikaday');

Wanneer u al uw benodigde modules bundelt met Browserify en u gebruikt geen Moment.js specificeer dan de ignore optie:

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

Ruby on Rails

Als u Ruby on Rails gebruikt, zorg er dan voor dat u de Pikaday gem bekijkt.

Methoden

U kunt de datumkiezer na het aanmaken bedienen:

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

Haal en stel datum

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

Haalt de geselecteerde datum terug in een string-indeling. Als Moment.js bestaat (aanbevolen) dan kan Pikaday elk formaat teruggeven dat Moment begrijpt.U kunt ook uw eigen toString functie opgeven en de opmaak zelf doen. Lees meer in de sectie over opmaak.

Als noch het moment-object bestaat, noch de toString-functie is opgegeven, wordt de standaardmethode .toDateString() van JavaScript gebruikt.

picker.getDate()

Retourneert een basis JavaScript Date-object van de geselecteerde dag, of null als er geen selectie is.

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

Stelt de huidige selectie in. Deze zal worden beperkt binnen de grenzen van minDate en maxDate opties indien deze zijn gespecificeerd. U kunt optioneel een booleaans als tweede parameter doorgeven om te voorkomen dat de onSelect callback wordt geactiveerd (true), zodat de datum in stilte kan worden ingesteld.

picker.getMoment()

Retourneert een Moment.js object voor de geselecteerde datum (Moment moet vóór Pikaday worden geladen).

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

Stelt de huidige selectie in met een Moment.js object (zie setDate voor details).

Datum wissen en resetten

picker.clear()

Wist en reset de invoer waar de kiezer aan is gebonden.

Huidige weergave wijzigen

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

Wijzig de huidige weergave om een specifieke datum te zien. In dit voorbeeld springt u naar februari 2014 (de maand is een index op basis van nul).

picker.gotoToday()

Shortcut voor picker.gotoDate(new Date())

picker.gotoMonth(2)

Wijzig de huidige weergave per maand (0: januari, 1: februari, enzovoort).

picker.nextMonth()picker.prevMonth()

Ga naar de volgende of vorige maand (dit verandert het jaar indien nodig).

picker.gotoYear()

Wijzig het jaar dat wordt bekeken.

picker.setMinDate()

Update the minimum/earliest date that can be selected.

picker.setMaxDate()

Update the maximum/latest date that can be selected.

picker.setStartRange()

Update the range start date. Voor het gebruik van twee Pikaday-instanties voor het selecteren van een datumbereik.

picker.setEndRange()

Bewerk de einddatum van het bereik bij. Voor het gebruik van twee Pikaday-instanties om een datumbereik te selecteren.

Datepicker weergeven en verbergen

picker.isVisible()

Retourneert true of false.

picker.show()

Maak de kiezer zichtbaar.

picker.adjustPosition()

Bereken en wijzig de positie van de kiezer.

picker.hide()

Verberg de kiezer waardoor deze onzichtbaar wordt.

picker.destroy()

Verberg de kiezer en verwijder alle event listeners – geen weg terug!

Internationalization

Het standaard i18n configuratieformaat ziet er als volgt uit:

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

U moet 12 maanden en 7 weekdagen (met afkortingen) opgeven. Geef de weekdagen altijd in deze volgorde op, met zondag eerst. U kunt de optie firstDay wijzigen om de volgorde aan te passen indien nodig (0: zondag, 1: maandag, enz.). U kunt isRTL ook op true zetten voor talen die van rechts naar links worden gelezen.

Extensions

Timepicker

Pikaday is een pure datepicker. Het ondersteunt niet het kiezen van een tijd van de dag. Er zijn echter pogingen geweest om tijdondersteuning aan Pikaday toe te voegen. Zie #1 en #18. Deze bevinden zich in hun eigen fork.

Je kunt het werk gebruiken dat @owenmead onlangs heeft gedaan bij owenmead/PikadayEen meer eenvoudige tijd selectie aanpak gedaan door @xeeali bij xeeali/Pikaday is gebaseerd op versie 1.2.0.Ook @stas heeft een fork stas/Pikaday, maar die is nu vrij oud

Browser compatibiliteit

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

Auteurs

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

Met dank aan @shoogledesigns voor de naam.