Pikaday / Pikaday

Posted by admin Articles

En forfriskende JavaScript Datepicker

  • Letvægt (mindre end 5kb minificeret og gzippet)
  • Ingen afhængigheder (men spiller godt sammen med Moment.js)
  • Modulære CSS-klasser til nem styling

Test Pikaday Demo →

Produktionsklar? Siden version 1.0.0.0 er Pikaday stabil og bruges i produktionen. Hvis du dog finder fejl eller har ønsker til funktioner, bedes du indsende dem til GitHub-fejlsporet.Se også changelog

Installation

Du kan installere Pikaday som en NPM-pakke:

npm install pikaday

Og linke direkte til CDN:

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

Styles

Du skal også inkludere Pikaday CSS-filen. Dette trin afhænger af, hvordan Pikaday blev installeret. Enten importeres fra NPM:

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

Og link til CDN:

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

Anvendelse

Pikaday kan bindes til et indtastningsfelt:

<input type="text">

Føj JavaScript til slutningen af dit dokument:

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

Hvis du bruger jQuery, skal du sørge for kun at videregive det første element:

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

Hvis Pikaday-instansen ikke er bundet til et felt, kan du vedhæfte elementet hvor som helst:

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

Formatering

Som standard formateres og analyseres datoer ved hjælp af standard JavaScript Date-objektet.Hvis Moment.js er tilgængelig i anvendelsesområdet, bruges det til at formatere og analysere inputværdier. Du kan sende en ekstra format indstilling til konfigurationen, som vil blive sendt til moment-konstruktøren.Se moment.js eksemplet for en fuld version.

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

For mere avanceret og fleksibel formatering kan du videregive din egen toString-funktion til konfigurationen, som vil blive brugt til at formatere dato-objektet. denne funktion har følgende signatur:

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

Du skal returnere en streng fra den.

Vær dog forsigtig. Hvis den formaterede streng, som du returnerer, ikke kan analyseres korrekt af Date.parse-metoden (eller af moment, hvis den er tilgængelig), skal du levere din egen parse-funktion i konfigurationen. Denne funktion vil få overdraget den formaterede streng og formatet:

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

Konfiguration

Som eksemplerne viser ovenfor harPikaday mange nyttige muligheder:

  • field binde datopicker til et formularfelt
  • trigger bruge et andet element til at udløse åbning af datopickeren, se triggereksempel (standard er field)
  • bound automatisk vise/skjule datoviseren ved field fokus (standard er true, hvis field er indstillet)
  • ariaLabel data-attribut på inputfeltet med en aria assistance text (anvendes kun, når bound er indstillet)
  • position foretrukken position for datoviseren i forhold til formularfeltet, f.eks.g.: top right, bottom right Bemærk: Der kan ske en automatisk justering for at undgå, at datoviseren vises uden for visningsområdet, se eksempel på positioner (standard er “nederst til venstre”)
  • reposition kan indstilles til falsk for ikke at omplacere datoviseren inden for visningsområdet og tvinge den til at tage den konfigurerede position (standard: true)
  • container DOM-knude til at gengive kalenderen i, se containereksempel (standard: udefineret)
  • format standard output-formatet for .toString() og field-værdi (kræver Moment.js til brugerdefineret formatering)
  • formatStrict standardflaget for Moment’s strict date parsing (kræver Moment.js til brugerdefineret formatering)
  • toString(date, format) funktion, som vil blive brugt til brugerdefineret formatering. Denne funktion vil have forrang frem for moment.
  • parse(dateString, format) funktionen, som vil blive brugt til at analysere indtastningsstrengen og hente et datoobjekt fra den. Denne funktion har forrang for moment.
  • defaultDate den oprindelige dato, der skal vises ved første åbning
  • setDefaultDate Boolean (sandt/falsk). gør defaultDate til den oprindelige valgte værdi
  • firstDay første ugedag (0: søndag, 1: mandag osv.)
  • minDate den mindste/tidligste dato, der kan vælges (dette bør være et oprindeligt Date-objekt – e.f.eks. new Date() eller moment().toDate())
  • maxDate den maksimale/seneste dato, der kan vælges (dette bør være et oprindeligt Date-objekt – f.eks. new Date() eller moment().toDate())
  • disableWeekends afviser valg af lørdage eller søndage
  • disableDayFn callback-funktion, der får overgivet et Date-objekt for hver dag i visningen. Skal returnere true for at deaktivere valg af den pågældende dag.
  • yearRange antal år på begge sider (f.eks. 10) eller array af øvre/nedre område (f.eks. )
  • showWeekNumber vis ISO-ugenummeret i toppen af rækken (standard false)
  • pickWholeWeek vælg en hel uge i stedet for en dag (standard false)
  • isRTL vend kalenderen om for højre-tilvenstre sprog
  • i18n sprogstandarder for navne på måneder og ugedage (se internationalisering nedenfor)
  • yearSuffix yderligere tekst, der skal tilføjes til året i titlen
  • showMonthAfterYear gengives måneden efter året i titlen (standard false)
  • showDaysInNextAndPreviousMonths gengives dage i kalendergitteret, der falder i den næste eller foregående måned (standard: false)
  • enableSelectionDaysInNextAndPreviousMonths giver brugeren mulighed for at vælge datoer, der ligger i de næste eller foregående måneder (standard: false)
  • numberOfMonths antal synlige kalendere
  • mainCalendar når numberOfMonths bruges, hjælper dette dig med at vælge, hvor hovedkalenderen skal være (standard left, kan indstilles til right). Bruges kun til den første visning, eller når en valgt dato ikke allerede er synlig
  • events array af datoer, som du ønsker at skelne fra almindelige dage (f.eks. )
  • theme definere et classname, der kan bruges som en hook til styling af forskellige temaer, se temaeksempel (standard null)
  • blurFieldOnSelect definerer, om feltet er sløret, når der vælges en dato (standard true)
  • onSelect callback-funktion for, når der vælges en dato
  • onOpen callback-funktion for, når plukkeren bliver synlig
  • onClose callback-funktion for, når plukkeren er skjult
  • onDraw callback-funktion for, når plukkeren tegner en ny måned
  • keyboardInput aktiverer understøttelse af tastaturindtastning (standard true)

Styling

Hvis reposition konfiguration-indstilling er aktiveret (standard), Pikaday anvender CSS-klasser på datovælgeren i henhold til, hvordan den er positioneret:

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

Bemærk, at DOM-elementet på et hvilket som helst tidspunkt typisk vil have 2 CSS-klasser (f.eks. top-aligned right-aligned osv.).

jQuery-plugin

Den normale version af Pikaday kræver ikke jQuery, men der findes dog et jQuery-plugin, hvis det er noget for dig (se plugins/pikaday.jquery.js i repository). Denne version kræver naturligvis jQuery og kan bruges som andre plugins: Se jQuery-eksemplet for en fuld version. 

<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-understøttelse

Hvis du bruger en modulær script loader, er Pikaday ikke bundet til det globale objekt og passer fint ind i din byggeproces. Du kan kræve Pikaday ligesom ethvert andet modul. se AMD-eksemplet for en fuld version. 

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

Det samme gælder for det ovenfor nævnte jQuery-plugin. se jQuery AMD-eksemplet for en fuld version. 

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

Understøttelse af CommonJS-moduler

Hvis du bruger et CommonJS-kompatibelt miljø, kan du bruge require-funktionen til at importere Pikaday.

var pikaday = require('pikaday');

Når du bundler alle dine nødvendige moduler med Browserify, og du ikke bruger Moment.js, skal du angive indstillingen ignore:

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

Ruby on Rails

Hvis du bruger Ruby on Rails, skal du sørge for at tjekke Pikaday-perlen.

Metoder

Du kan styre datovælgeren efter oprettelse:

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

Hent og sæt dato

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

Returnerer den valgte dato i et strengformat. Hvis Moment.js findes (anbefales), kan Pikaday returnere ethvert format, som Moment forstår. du kan også levere din egen toString-funktion og selv foretage formateringen. Læs mere i afsnittet om formatering.

Hvis hverken moment-objektet findes eller toString-funktionen er angivet, anvendes JavaScript’s standard .toDateString()-metode.

picker.getDate()

Returnerer et grundlæggende JavaScript Date-objekt for den valgte dag, eller null hvis der ikke er noget valg.

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

Sæt det aktuelle valg. Dette vil blive begrænset inden for grænserne af minDate og maxDate-indstillingerne, hvis de er angivet. Du kan eventuelt overdrage et boolean som den anden parameter for at forhindre udløsning af onSelect-callbacken (true), så datoen kan indstilles lydløst.

picker.getMoment()

Returnerer et Moment.js-objekt for den valgte dato (Moment skal indlæses før Pikaday).

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

Sætter det aktuelle valg med et Moment.js objekt (se setDate for detaljer).

Ryd og nulstil dato

picker.clear()

Ryd og nulstil input, hvor plukkeren er bundet til.

Ændre nuværende visning

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

Ændrer den nuværende visning for at se en bestemt dato. Dette eksempel vil springe til februar 2014 (måned er et nulbaseret indeks).

picker.gotoToday()

Kortvej til picker.gotoDate(new Date())

picker.gotoMonth(2)

Ændre den aktuelle visning efter måned (0: januar, 1: februar osv.).

picker.nextMonth()picker.prevMonth()

Gå til den næste eller forrige måned (dette vil om nødvendigt ændre årstal).

picker.gotoYear()

Ændre det årstal, der vises.

picker.setMinDate()

opdatere den mindste/tidligste dato, der kan vælges.

picker.setMaxDate()

opdatere den maksimale/seneste dato, der kan vælges.

picker.setStartRange()

opdatere intervallets startdato. Ved brug af to Pikaday-instanser til at vælge et datointerval.

picker.setEndRange()

Ajourfør intervallets slutdato. Hvis du bruger to Pikaday-instanser til at vælge et datointerval.

Vis og skjul datopicker

picker.isVisible()

Returnerer true eller false.

picker.show()

Gør plukkeren synlig.

picker.adjustPosition()

Genberegner og ændrer plukkeren position.

picker.hide()

Husk plukkeren, så den bliver usynlig.

picker.destroy()

Skjul plukkeren og fjern alle hændelseslyttere – ingen vej tilbage!

Internationalisering

Det standard i18n konfigurationsformat ser således ud:

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

Du skal angive 12 måneder og 7 ugedage (med forkortelser). Angiv altid ugedage i denne rækkefølge med søndag først. Du kan ændre indstillingen firstDay for at ændre rækkefølgen, hvis det er nødvendigt (0: søndag, 1: mandag osv.). Du kan også indstille isRTL til true for sprog, der læses fra højre mod venstre.

Udvidelser

Timepicker

Pikaday er en ren datopicker. Den understøtter ikke valg af et tidspunkt på dagen. Der har dog været bestræbelser på at tilføje tidsunderstøttelse til Pikaday. se #1 og #18. Disse befinder sig i deres egen fork.

Du kan bruge det arbejde @owenmead har udført senest på owenmead/PikadayEn mere simpel tilgang til tidsvalg udført af @xeeali på xeeali/Pikaday er baseret på version 1.2.0.Også @stas har en fork stas/Pikaday, men den er nu ret gammel

Browserkompatibilitet

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

Forfattere

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

Tak til @shoogledesigns for navnet.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.