Pikaday / Pikaday

Posted by admin Articles

En uppfriskande JavaScript Datepicker

  • Lättviktig (mindre än 5kb minifierad och gzippad)
  • Inga beroenden (men fungerar bra med Moment.js)
  • Modulära CSS-klasser för enkel styling

Try Pikaday Demo →

Produktionsklar? Sedan version 1.0.0 är Pikaday stabilt och används i produktionen. Om du dock hittar fel eller har önskemål om funktioner kan du skicka in dem till GitHub issue tracker.Se även ändringsloggen

Installation

Du kan installera Pikaday som ett NPM-paket:

npm install pikaday

Och länka direkt till CDN:

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

Styles

Du behöver även inkludera Pikadays CSS-fil. Detta steg beror på hur Pikaday installerades. Antingen importerar du från NPM:

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

eller länkar till CDN:

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

Användning

Pikaday kan bindas till ett inmatningsfält:

<input type="text">

Lägg till JavaScript i slutet av dokumentet:

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

Om du använder jQuery ska du se till att endast det första elementet överförs:

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

Om Pikaday-instansen inte är bunden till ett fält kan du lägga till elementet var 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 formateras och analyseras datum med hjälp av standard-JavaScript Date-objekt.Om Moment.js är tillgängligt inom räckvidden kommer det att användas för att formatera och analysera inmatningsvärden. Du kan skicka ett ytterligare format-alternativ till konfigurationen som kommer att skickas till moment-konstruktören.Se moment.js-exemplet för en fullständig 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>

För mer avancerad och flexibel formatering kan du skicka din egen toString-funktion till konfigurationen som kommer att användas för att formatera datumobjektet.Den här funktionen har följande signatur:

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

Du bör returnera en sträng från den.

Var försiktig, dock. Om den formaterade strängen som du returnerar inte kan analyseras korrekt av Date.parse-metoden (eller av moment om den är tillgänglig) måste du tillhandahålla en egen parse-funktion i konfigurationen. Den här funktionen får den formaterade strängen och 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); }});

Configuration

Som exemplen visar ovan harPikaday många användbara alternativ:

  • field bind datumplockaren till ett formulärfält
  • trigger använd ett annat element för att utlösa öppnandet av datumplockaren, se exempel på utlösare (standard field)
  • bound Visa/dölj automatiskt datumplockaren vid field fokus (standard true om field är inställt)
  • ariaLabel dataattribut på inmatningsfältet med aria assistance text (tillämpas endast när bound är inställt)
  • position önskad position för datumplockaren i förhållande till formulärfältet, t.ex.g.: top right, bottom right Observera: automatisk justering kan ske för att undvika att datumplockaren visas utanför visningsfältet, se exempel på positioner (standard är ”längst ner till vänster”)
  • reposition kan ställas in på false för att inte omplacera datumplockaren inom visningsfältet, vilket tvingar den att ta den konfigurerade position (standard: true)
  • container DOM-nod för att återge kalendern i, se exempel på container (standard: odefinierad)
  • format standardformatet för .toString() och field värde (kräver Moment.js för anpassad formatering)
  • formatStrict standardflaggan för momentets strikta datumanalys (kräver Moment.js för anpassad formatering)
  • toString(date, format) funktion som kommer att användas för anpassad formatering. Denna funktion kommer att ha företräde framför moment.
  • parse(dateString, format) funktion som kommer att användas för att analysera inmatningssträngen och hämta ett datumobjekt från den. Den här funktionen har företräde framför moment.
  • defaultDate det första datumet som ska visas när det öppnas för första gången
  • setDefaultDate Boolean (sant/falskt). gör defaultDate till det första valda värdet
  • firstDay veckans första dag (0: söndag, 1: måndag osv.)
  • minDate det lägsta/främsta datumet som kan väljas (detta bör vara ett inhemskt Date-objekt – e.new Date() eller moment().toDate())
  • maxDate det högsta/senast möjliga datumet som kan väljas (detta bör vara ett inhemskt Date-objekt – t.ex. new Date() eller moment().toDate())
  • disableWeekends förbjuder val av lördagar eller söndagar
  • disableDayFn callback-funktion som får ett Date-objekt för varje dag i vyn. Bör återge true för att inte tillåta val av den dagen.
  • yearRange antal år på båda sidor (t.ex. 10) eller en matris med övre/nedre intervall (t.ex. )
  • showWeekNumber visa ISO veckonumret i början av raden (standard false)
  • pickWholeWeek välja en hel vecka i stället för en dag (standard false)
  • isRTL vända kalendern för höger till högervänsterspråk
  • i18n standardspråk för månads- och veckodagsnamn (se internationalisering nedan)
  • yearSuffix ytterligare text som ska läggas till året i titeln
  • showMonthAfterYear återge månaden efter året i titeln (standard false)
  • showDaysInNextAndPreviousMonths återge de dagar i kalendergallret som ligger i nästa eller föregående månad (standard: false)
  • enableSelectionDaysInNextAndPreviousMonths gör det möjligt för användaren att välja datum som ligger i nästa eller föregående månad (standard: false)
  • numberOfMonths antal synliga kalendrar
  • mainCalendar när numberOfMonths används hjälper detta dig att välja var huvudkalendern kommer att vara (standard left, kan ställas in till right). Används endast vid den första visningen eller när ett valt datum inte redan är synligt
  • events matris med datum som du vill skilja från vanliga dagar (t.ex. )
  • theme definiera ett klassnamn som kan användas som en krok för att styla olika teman, se exempel på tema (standard null)
  • blurFieldOnSelect definierar om fältet är suddigt när ett datum väljs (standard true)
  • onSelect callbackfunktion för när ett datum väljs
  • onOpen callbackfunktion för när plockaren blir synlig
  • onClose callback-funktion för när plockaren är dold
  • onDraw callback-funktion för när plockaren drar en ny månad
  • keyboardInput aktivera stöd för tangentbordsinmatning (standard true)

Styling

Om reposition konfiguration-alternativet är aktiverat (standard), Pikaday tillämpar CSS-klasser på datumplockaren beroende på hur den är placerad:

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

Notera att DOM-elementet vid varje tidpunkt vanligtvis kommer att ha 2 CSS-klasser (t.ex. top-aligned right-aligned etc).

jQuery-plugin

Den normala versionen av Pikaday kräver inte jQuery, men det finns ett jQuery-plugin om det passar dig (se plugins/pikaday.jquery.js i repository). Den här versionen kräver naturligtvis jQuery och kan användas som andra plugins: Se jQuery-exemplet för en fullständig 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-stöd

Om du använder en modulär skriptladdare är Pikaday inte bunden till det globala objektet och passar bra in i din byggprocess. Du kan kräva Pikaday precis som vilken annan modul som helst. se AMD-exemplet för en fullständig version. 

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

Det samma gäller för det jQuery-plugin som nämns ovan. se jQuery AMD-exemplet för en fullständig version. 

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

Stöd för CommonJS-moduler

Om du använder en CommonJS-kompatibel miljö kan du använda require-funktionen för att importera Pikaday.

var pikaday = require('pikaday');

När du buntar alla dina nödvändiga moduler med Browserify och inte använder Moment.js anger du alternativet ignore:

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

Ruby on Rails

Om du använder Ruby on Rails ska du se till att kolla in Pikaday gem.

Metoder

Du kan styra datumväljaren efter skapandet:

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

Get and set date

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

Returnerar det valda datumet i ett strängformat. Om Moment.js finns (rekommenderas) kan Pikaday returnera vilket format som helst som Moment förstår.Du kan också tillhandahålla en egen toString-funktion och göra formateringen själv. Läs mer i avsnittet om formatering.

Om varken moment-objektet finns eller toString-funktionen tillhandahålls används JavaScript:s standardmetod .toDateString().

picker.getDate()

Returnerar ett grundläggande JavaScript Date-objekt för det valda dygnet, eller null om inget val finns.

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

Sätt det aktuella valet. Detta begränsas inom gränserna för alternativen minDate och maxDate om de är angivna. Du kan valfritt skicka ett boolean som den andra parametern för att förhindra utlösning av onSelect-callbacken (true), vilket gör att datumet kan ställas in tyst.

picker.getMoment()

Returnerar ett Moment.js-objekt för det valda datumet (Moment måste vara laddat före Pikaday).

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

Sätter det aktuella urvalet med ett Moment.js objekt (se setDate för detaljer).

Rensa och återställ datum

picker.clear()

Rensar och återställer ingången där plockaren är bunden till.

Ändra aktuell vy

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

Ändra aktuell vy för att se ett visst datum. I det här exemplet hoppar du till februari 2014 (månaden är ett nollbaserat index).

picker.gotoToday()

Kortkommando för picker.gotoDate(new Date())

picker.gotoMonth(2)

Ändra den aktuella vyn efter månad (0: januari, 1: februari osv.).

picker.nextMonth()picker.prevMonth()

Gå till nästa eller föregående månad (detta ändrar årtal om det är nödvändigt).

picker.gotoYear()

Ändra det år som visas.

picker.setMinDate()

Uppdatera det minsta/åldrigaste datumet som kan väljas.

picker.setMaxDate()

Uppdatera det högsta/senaste datumet som kan väljas.

picker.setStartRange()

Uppdatera intervallets startdatum. Om du använder två Pikaday-instanser för att välja ett datumintervall.

picker.setEndRange()

Uppdatera slutdatumet för intervallet. Om du använder två Pikaday-instanser för att välja ett datumintervall.

Visa och dölja datumplockare

picker.isVisible()

Returnerar true eller false.

picker.show()

Gör plockaren synlig.

picker.adjustPosition()

Beräkna om och ändra plockarens position.

picker.hide()

Mörka plockaren och gör den osynlig.

picker.destroy()

Hölj plockaren och ta bort alla händelselyssnare – ingen återvändo!

Internationalisering

Standardformatet för i18nkonfigurationen ser ut så här:

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

Du måste ange 12 månader och 7 vardagar (med förkortningar). Ange alltid veckodagarna i denna ordning med söndagen först. Du kan ändra alternativet firstDay för att ändra ordningen vid behov (0: söndag, 1: måndag osv.). Du kan också ställa in isRTL till true för språk som läses från höger till vänster.

Tillägg

Timepicker

Pikaday är en ren datumpicker. Den har inget stöd för att välja en tid på dagen. Det har dock gjorts ansträngningar för att lägga till tidsstöd i Pikaday, se #1 och #18. Dessa finns i en egen gaffel.

Du kan använda det arbete som @owenmead gjorde senast på owenmead/PikadayEtt enklare tillvägagångssätt för tidsval som gjorts av @xeeali på xeeali/Pikaday är baserat på version 1.2.0.Även @stas har en gaffel stas/Pikaday, men den är nu ganska gammal

Browserkompatibilitet

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

Författare

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

Tack till @shoogledesigns för namnet.

Lämna ett svar

Din e-postadress kommer inte publiceras.