Ein erfrischender JavaScript Datepicker

• Leichtgewichtig (weniger als 5kb minified und gzipped)
• Keine Abhängigkeiten (spielt aber gut mit Moment.js)
• Modulare CSS-Klassen für einfaches Styling

Try Pikaday Demo →

Produktionsreif? Seit Version 1.0.0 ist Pikaday stabil und wird in der Produktion eingesetzt. Wenn Sie jedoch Bugs finden oder Feature-Wünsche haben, senden Sie diese bitte an den GitHub Issue Tracker.Siehe auch das Changelog

Installation

Sie können Pikaday als NPM-Paket installieren:

npm install pikaday

oder direkt auf das CDN verlinken:

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

Styles

Sie müssen auch die CSS-Datei von Pikaday einbinden. Dieser Schritt hängt davon ab, wie Pikaday installiert wurde. Entweder von NPM importieren:

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

Oder auf das CDN verlinken:

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

Verwendung

Pikaday kann an ein Eingabefeld gebunden werden:

<input type="text">

Fügen Sie das JavaScript am Ende Ihres Dokuments ein:

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

Wenn Sie jQuery verwenden, stellen Sie sicher, dass Sie nur das erste Element übergeben:

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

Wenn die Pikaday-Instanz nicht an ein Feld gebunden ist, können Sie das Element an beliebiger Stelle anfügen:

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

Formatierung

Standardmäßig werden Datumsangaben mit dem Standard-JavaScript-Date-Objekt formatiert und geparst.Wenn Moment.js im Geltungsbereich verfügbar ist, wird es zum Formatieren und Parsen von Eingabewerten verwendet. Sie können eine zusätzliche format-Option an die Konfiguration übergeben, die an den moment-Konstruktor übergeben wird, siehe das moment.js-Beispiel für eine vollständige 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 eine fortgeschrittene und flexible Formatierung können Sie der Konfiguration eine eigene toString-Funktion übergeben, die zur Formatierung des Datumsobjekts verwendet wird.

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

Sie sollten eine Zeichenkette zurückgeben.

Seien Sie jedoch vorsichtig. Wenn die formatierte Zeichenkette, die du zurückgibst, nicht korrekt von der Date.parse-Methode geparst werden kann (oder von moment, wenn diese verfügbar ist), dann musst du deine eigene parse-Funktion in der Konfiguration bereitstellen. Dieser Funktion wird der formatierte String und das Format übergeben:

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

Wie die Beispiele oben zeigen, hat Pikaday viele nützliche Optionen:

• field den Datepicker an ein Formularfeld binden
• trigger ein anderes Element verwenden, um das Öffnen des Datepickers auszulösen, siehe Trigger-Beispiel (Standard ist field)
• bound Automatisches Ein-/Ausblenden des Datepickers bei field Fokus (Standard true wenn field gesetzt ist)
• ariaLabel Daten-Attribut auf dem Eingabefeld mit einem Aria-Hilfstext (wird nur angewendet wenn bound gesetzt ist)
• position Bevorzugte Position des Datepickers relativ zum Formularfeld, z.g.: top right, bottom right Hinweis: Es kann eine automatische Anpassung erfolgen, um zu vermeiden, dass der Datumsanzeiger außerhalb des Ansichtsfensters angezeigt wird, siehe Beispiel für Positionen (Standardwert ‚unten links‘)
• reposition kann auf false gesetzt werden, um den Datumsanzeiger nicht innerhalb des Ansichtsfensters neu zu positionieren und ihn zu zwingen, die konfigurierte position zu nehmen (Standardwert: true)
• container DOM-Knoten zum Rendern des Kalenders, siehe Container-Beispiel (Standard: undefiniert)
• format das Standardausgabeformat für .toString() und field Wert (erfordert Moment.js für benutzerdefinierte Formatierung)
• formatStrict das Standardflag für das strenge Datums-Parsing von Moment (erfordert Moment.js für benutzerdefinierte Formatierung)
• toString(date, format) Funktion, die für benutzerdefinierte Formatierung verwendet wird. Diese Funktion hat Vorrang vor der Funktion moment.
• parse(dateString, format), die für das Parsen von Eingabestrings und das Abrufen eines Datumsobjekts aus diesen verwendet wird. Diese Funktion hat Vorrang vor moment.
• defaultDate dem Anfangsdatum, das beim ersten Öffnen angezeigt wird
• setDefaultDate Boolescher Wert (wahr/falsch). defaultDate ist der erste ausgewählte Wert
• firstDay erster Wochentag (0: Sonntag, 1: Montag usw.)
• minDate das minimale/früheste Datum, das ausgewählt werden kann (dies sollte ein natives Datumsobjekt sein – z.z. B. new Date() oder moment().toDate())
• maxDate das maximale/späteste Datum, das ausgewählt werden kann (dies sollte ein natives Datumsobjekt sein – z. B. new Date() oder moment().toDate())
• disableWeekends Auswahl von Samstagen oder Sonntagen verbieten
• disableDayFn Callback-Funktion, der ein Datumsobjekt für jeden Tag in der Ansicht übergeben wird. Sollte true zurückgeben, um die Auswahl dieses Tages zu deaktivieren.
• yearRange Anzahl der Jahre auf beiden Seiten (z.B. 10) oder Array des oberen/unteren Bereichs (z.B. )
• showWeekNumber zeige die ISO-Wochennummer am Kopf der Zeile (Standard false)
• pickWholeWeek wähle eine ganze Woche anstelle eines Tages (Standard false)
• isRTL kehr den Kalender um für Sprachen von rechts nach linkslinks
• i18n Sprachvorgaben für Monats- und Wochentagsnamen (siehe Internationalisierung unten)
• yearSuffix zusätzlicher Text, der an das Jahr im Titel angehängt wird
• showMonthAfterYear den Monat nach dem Jahr im Titel darstellen (Standard false)
• showDaysInNextAndPreviousMonths Tage des Kalendergitters darstellen, die in den nächsten oder vorherigen Monat fallen (Standard: false)
• enableSelectionDaysInNextAndPreviousMonths erlaubt dem Benutzer, ein Datum auszuwählen, das im nächsten oder vorhergehenden Monat liegt (Standard: false)
• numberOfMonths Anzahl der sichtbaren Kalender
• mainCalendar wenn numberOfMonths verwendet wird, hilft dies bei der Auswahl des Hauptkalenders (Standard left, kann auf right gesetzt werden). Nur für die erste Anzeige verwendet oder wenn ein ausgewähltes Datum noch nicht sichtbar ist
• events Array von Daten, die Sie von normalen Tagen unterscheiden möchten (z.B. )
• theme Definieren Sie einen Klassennamen, der als Aufhänger für das Styling verschiedener Themen verwendet werden kann, siehe Theme-Beispiel (Standard null)
• blurFieldOnSelect definiert, ob das Feld verschwommen ist, wenn ein Datum ausgewählt wird (Standard true)
• onSelect Callback-Funktion, wenn ein Datum ausgewählt wird
• onOpen Callback-Funktion, wenn der Picker sichtbar wird
• onClose Callback-Funktion, wenn der Picker ausgeblendet wird
• onDraw Callback-Funktion, wenn der Picker einen neuen Monat zeichnet
• keyboardInput Unterstützung für Tastatureingaben aktivieren (Standard true)

Styling

Wenn die reposition Konfigurations-Option aktiviert ist (Standard), Pikaday wendet CSS-Klassen auf den Datepicker an, je nachdem wie er positioniert ist:

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

Beachten Sie, dass das DOM-Element zu jeder Zeit typischerweise 2 CSS-Klassen hat (z.B.. top-aligned right-aligned etc).

jQuery Plugin

Die normale Version von Pikaday benötigt kein jQuery, jedoch gibt es ein jQuery Plugin, falls das Ihr Boot antreibt (siehe plugins/pikaday.jquery.js im Repository). Diese Version benötigt natürlich jQuery und kann wie andere Plugins verwendet werden: Siehe das jQuery-Beispiel für eine vollständige 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-Unterstützung

Wenn Sie einen modularen Skript-Loader verwenden, ist Pikaday nicht an das globale Objekt gebunden und passt gut in Ihren Build-Prozess. Sie können Pikaday wie jedes andere Modul benötigen.

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

Das gleiche gilt für das oben erwähnte jQuery-Plugin.

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

CommonJS-Modulunterstützung

Wenn Sie eine CommonJS-kompatible Umgebung verwenden, können Sie die require-Funktion verwenden, um Pikaday zu importieren.

var pikaday = require('pikaday');

Wenn Sie alle benötigten Module mit Browserify bündeln und Moment.js nicht verwenden, geben Sie die Option ignore an:

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

Ruby on Rails

Wenn Sie Ruby on Rails verwenden, stellen Sie sicher, dass Sie sich das Pikaday Gem ansehen.

Methoden

Sie können die Datumsauswahl nach der Erstellung steuern:

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

Get and set date

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

Gibt das ausgewählte Datum in einem String-Format zurück. Wenn Moment.js vorhanden ist (empfohlen), kann Pikaday jedes Format zurückgeben, das Moment versteht. Sie können auch Ihre eigene toString-Funktion bereitstellen und die Formatierung selbst vornehmen. Lesen Sie mehr im Abschnitt über die Formatierung.

Wenn weder ein moment-Objekt existiert noch eine toString-Funktion bereitgestellt wird, wird die Standardmethode .toDateString() von JavaScript verwendet.

picker.getDate()

Gibt ein einfaches JavaScript Date-Objekt des ausgewählten Tages zurück, oder null, wenn keine Auswahl besteht.

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

Setzen Sie die aktuelle Auswahl. Diese wird innerhalb der Grenzen der Optionen minDate und maxDate eingeschränkt, wenn diese angegeben sind. Optional kann ein Boolean als zweiter Parameter übergeben werden, um das Auslösen des onSelect-Callbacks zu verhindern (true), so dass das Datum stillschweigend gesetzt werden kann.

picker.getMoment()

Gibt ein Moment.js-Objekt für das ausgewählte Datum zurück (Moment muss vor Pikaday geladen sein).

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

Setzt die aktuelle Auswahl mit einem Moment.js-Objekt (siehe setDate für Details).

Datum löschen und zurücksetzen

picker.clear()

Löscht und setzt die Eingabe zurück, an die der Picker gebunden ist.

Aktuelle Ansicht ändern

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

Wechselt die aktuelle Ansicht, um ein bestimmtes Datum zu sehen. In diesem Beispiel wird zum Februar 2014 gesprungen (Monat ist ein auf Null basierender Index).

picker.gotoToday()

Kurzbefehl für picker.gotoDate(new Date())

picker.gotoMonth(2)

Die aktuelle Ansicht nach Monat ändern (0: Januar, 1: Februar usw.).

picker.nextMonth()picker.prevMonth()

Zum nächsten oder vorherigen Monat gehen (dadurch wird das Jahr geändert, falls erforderlich).

picker.gotoYear()

Ändern Sie das angezeigte Jahr.

picker.setMinDate()

Aktualisieren Sie das minimale/früheste Datum, das ausgewählt werden kann.

picker.setMaxDate()

Aktualisieren Sie das maximale/letzte Datum, das ausgewählt werden kann.

picker.setStartRange()

Aktualisieren Sie das Startdatum des Bereichs. Für die Verwendung von zwei Pikaday-Instanzen zur Auswahl eines Datumsbereichs.

picker.setEndRange()

Aktualisieren Sie das Enddatum des Bereichs. Für die Verwendung von zwei Pikaday-Instanzen zur Auswahl eines Datumsbereichs.

Datumsauswahl ein- und ausblenden

picker.isVisible()

Rückgabe von true oder false.

picker.show()

Den Picker sichtbar machen.

picker.adjustPosition()

Die Position des Pickers neu berechnen und ändern.

picker.hide()

Den Picker ausblenden und unsichtbar machen.

picker.destroy()

Den Picker ausblenden und alle Event-Listener entfernen – kein Zurück mehr!

Internationalisierung

Das Standardkonfigurationsformat i18n sieht wie folgt aus:

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

Sie müssen 12 Monate und 7 Wochentage (mit Abkürzungen) angeben. Geben Sie die Wochentage immer in dieser Reihenfolge an, den Sonntag zuerst. Sie können die Option firstDay ändern, um die Reihenfolge bei Bedarf zu ändern (0: Sonntag, 1: Montag usw.). Sie können auch isRTL auf true für Sprachen setzen, die von rechts nach links gelesen werden.

Erweiterungen

Timepicker

Pikaday ist ein reiner Datepicker. Er unterstützt nicht die Auswahl einer Tageszeit. Es gab jedoch Bestrebungen, Pikaday eine Zeitunterstützung hinzuzufügen, siehe #1 und #18. Diese befinden sich in einem eigenen Fork.

Sie können die Arbeit verwenden, die @owenmead zuletzt unter owenmead/Pikaday gemacht hat.Eine einfachere Zeitauswahl, die von @xeeali unter xeeali/Pikaday gemacht wurde, basiert auf Version 1.2.0.Auch @stas hat einen Fork stas/Pikaday, der aber schon ziemlich alt ist

Browser-Kompatibilität

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

Autoren

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

Danke an @shoogledesigns für den Namen.