Pikaday / Pikaday

Posted by admin Articles

Un rinfrescante Datepicker JavaScript

  • Leggero (meno di 5kb minificato e gzippato)
  • No dipendenze (ma gioca bene con Moment.js)
  • Classi CSS modulari per uno stile facile

Prova Pikaday Demo →

Pronto per la produzione? Dalla versione 1.0.0 Pikaday è stabile e utilizzato in produzione. Se comunque trovi dei bug o hai richieste di funzionalità, per favore inviale al tracker dei problemi di GitHub.Vedi anche il changelog

Installazione

Puoi installare Pikaday come pacchetto NPM:

npm install pikaday

Oppure collegarti direttamente al CDN:

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

Stili

Devi anche includere il file CSS Pikaday. Questo passo dipende da come Pikaday è stato installato. O importare da NPM:

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

O collegare il CDN:

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

Uso

Pikaday può essere legato a un campo di input:

<input type="text">

Aggiungi il JavaScript alla fine del tuo documento:

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

Se stai usando jQuery assicurati di passare solo il primo elemento:

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

Se l’istanza di Pikaday non è legata a un campo puoi aggiungere l’elemento ovunque:

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

Formattazione

Di default, le date sono formattate e analizzate usando l’oggetto standard JavaScript Date.Se Moment.js è disponibile nello scope, sarà usato per formattare ed analizzare i valori di input. È possibile passare un’opzione aggiuntiva format alla configurazione, che verrà passata al costruttore moment.Vedere l’esempio moment.js per una versione completa.

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

Per una formattazione più avanzata e flessibile puoi passare la tua funzione toString alla configurazione che sarà usata per formattare l’oggetto data.Questa funzione ha la seguente firma:

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

Dovresti restituire una stringa da essa.

Fa attenzione, però. Se la stringa formattata che restituisci non può essere analizzata correttamente dal metodo Date.parse (o da moment se è disponibile), allora devi fornire la tua funzione parse nella configurazione. A questa funzione verrà passata la stringa formattata e il formato:

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

Configurazione

Come dimostrano gli esempi precedentiPikaday ha molte opzioni utili:

  • field legare il datepicker a un campo del modulo
  • trigger usare un elemento diverso per attivare l’apertura del datepicker, vedi esempio di trigger (predefinito a field)
  • bound mostra/nascondi automaticamente il datepicker su field focus (predefinito true se field è impostato)
  • ariaLabel data-attribute sul campo di input con un testo di assistenza aria (applicato solo quando bound è impostato)
  • position posizione preferita del datepicker rispetto al campo del modulo, es.g.: top right, bottom right Nota: la regolazione automatica può avvenire per evitare che il datepicker sia visualizzato al di fuori del viewport, vedi l’esempio delle posizioni (predefinito a ‘bottom left’)
  • reposition può essere impostato a false per non riposizionare il datepicker all’interno del viewport, forzandolo ad assumere la configurazione position (default: true)
  • container nodo DOM in cui rendere il calendario, vedi esempio di contenitore (predefinito: non definito)
  • format il formato di output predefinito per il valore .toString() e field (richiede Moment.js per la formattazione personalizzata)
  • formatStrict il flag predefinito per l’analisi rigorosa della data di Moment (richiede Moment.js per la formattazione personalizzata)
  • toString(date, format) funzione che sarà utilizzata per la formattazione personalizzata. Questa funzione avrà la precedenza su moment.
  • parse(dateString, format) funzione che sarà usata per analizzare la stringa di input e ottenere un oggetto data da essa. Questa funzione avrà la precedenza su moment.
  • defaultDate la data iniziale da visualizzare alla prima apertura
  • setDefaultDate booleano (vero/falso). rendere defaultDate il valore iniziale selezionato
  • firstDay primo giorno della settimana (0: domenica, 1: lunedì, ecc)
  • minDate la data minima/prima che può essere selezionata (questo dovrebbe essere un oggetto Date nativo – es.g. new Date() o moment().toDate())
  • maxDate la data massima/più recente che può essere selezionata (questo dovrebbe essere un oggetto Date nativo – es. new Date() o moment().toDate())
  • disableWeekends disabilita la selezione di sabato o domenica
  • disableDayFn funzione di callback che riceve un oggetto Date per ogni giorno nella vista. Dovrebbe restituire true per disabilitare la selezione di quel giorno.
  • yearRange numero di anni su entrambi i lati (es. 10) o array di intervallo superiore/inferiore (es. )
  • showWeekNumber mostra il numero della settimana ISO all’inizio della riga (predefinito false)
  • pickWholeWeek seleziona un’intera settimana invece di un giorno (predefinito false)
  • isRTL inverti il calendario per le lingue da destra asinistra
  • i18n lingua predefinita per i nomi dei mesi e dei giorni della settimana (vedi internazionalizzazione sotto)
  • yearSuffix testo aggiuntivo da aggiungere all’anno nel titolo
  • showMonthAfterYear rendere il mese dopo l’anno nel titolo (default false)
  • showDaysInNextAndPreviousMonths rendere i giorni della griglia del calendario che rientrano nei mesi successivi o precedenti (default: false)
  • enableSelectionDaysInNextAndPreviousMonths permette all’utente di selezionare la data che è nei mesi successivi o precedenti (default: false)
  • numberOfMonths numero di calendari visibili
  • mainCalendar quando numberOfMonths è usato, questo ti aiuterà a scegliere dove sarà il calendario principale (default left, può essere impostato a right). Usato solo per la prima visualizzazione o quando una data selezionata non è già visibile
  • events array di date che vorresti differenziare dai giorni normali (per esempio )
  • theme definire un nome di classe che può essere usato come gancio per lo stile di diversi temi, vedi esempio di tema (default null)
  • blurFieldOnSelect definisce se il campo è sfocato quando una data è selezionata (default true)
  • onSelect funzione di callback per quando una data è selezionata
  • onOpen funzione di callback per quando il selezionatore diventa visibile
  • onClose funzione di callback per quando il selezionatore è nascosto
  • onDraw funzione di callback per quando il selezionatore disegna un nuovo mese
  • keyboardInput abilita il supporto dell’input da tastiera (predefinito true)

Styling

Se l’opzione reposition configurazione-è abilitata (default), Pikaday applicherà le classi CSS al datepicker in base a come è posizionato:

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

Nota che l’elemento DOM in qualsiasi momento avrà tipicamente 2 classi CSS (es. top-aligned right-aligned ecc.).

Plugin jQuery

La versione normale di Pikaday non richiede jQuery, tuttavia c’è un plugin jQuery se ti piace (vedi plugins/pikaday.jquery.js nel repository). Questa versione richiede jQuery, naturalmente, e può essere usata come altri plugin:Vedi l’esempio di jQuery per una versione completa.

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

Supporto AMD

Se usi un caricatore di script modulare, Pikaday non è legato all’oggetto globale e si adatta bene al tuo processo di compilazione. Puoi richiedere Pikaday proprio come qualsiasi altro modulo.Vedi l’esempio AMD per una versione completa.

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

Lo stesso vale per il plugin jQuery menzionato sopra.Vedi l’esempio jQuery AMD per una versione completa.

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

Supporto modulo CommonJS

Se usi un ambiente CommonJS compatibile puoi usare la funzione require per importare Pikaday.

var pikaday = require('pikaday');

Quando fai il bundle di tutti i tuoi moduli richiesti con Browserify e non usi Moment.js specifica l’opzione ignore:

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

Ruby on Rails

Se stai usando Ruby on Rails, assicurati di controllare la gemma Pikaday.

Metodi

Puoi controllare il selezionatore di date dopo la creazione:

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

Ottieni e imposta data

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

Ritorna la data selezionata in un formato stringa. Se Moment.js esiste (raccomandato) allora Pikaday può restituire qualsiasi formato che Moment capisce.Puoi anche fornire la tua funzione toString e fare la formattazione da solo. Leggi di più nella sezione formattazione.

Se non esiste un oggetto moment né viene fornita la funzione toString, verrà usato il metodo predefinito di JavaScript .toDateString().

picker.getDate()

Ritorna un oggetto base JavaScript Date del giorno selezionato, o null se non c’è selezione.

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

Imposta la selezione corrente. Questa sarà ristretta entro i limiti delle opzioni minDate e maxDate se sono specificate. Puoi opzionalmente passare un booleano come secondo parametro per prevenire l’attivazione del callback onSelect (true), permettendo alla data di essere impostata silenziosamente.

picker.getMoment()

Ritorna un oggetto Moment.js per la data selezionata (Moment deve essere caricato prima di Pikaday).

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

Imposta la selezione corrente con un oggetto Moment.js (vedi setDate per dettagli).

Cancella e resetta la data

picker.clear()

Cancella e resetta l’input a cui è legato il picker.

Cambia la vista corrente

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

Cambia la vista corrente per vedere una data specifica. Questo esempio salterà a febbraio 2014 (il mese è un indice basato su zero).

picker.gotoToday()

Scorciatoia per picker.gotoDate(new Date())

picker.gotoMonth(2)

Cambia la vista corrente per mese (0: gennaio, 1: febbraio, ecc.).

picker.nextMonth()picker.prevMonth()

Passa al mese successivo o precedente (questo cambierà anno se necessario).

picker.gotoYear()

Cambia l’anno visualizzato.

picker.setMinDate()

Aggiorna la data minima/precedente che può essere selezionata.

picker.setMaxDate()

Aggiorna la data massima/ultima che può essere selezionata.

picker.setStartRange()

Aggiorna la data di inizio intervallo. Per usare due istanze di Pikaday per selezionare un intervallo di date.

picker.setEndRange()

Aggiorna la data di fine intervallo. Per usare due istanze di Pikaday per selezionare un intervallo di date.

Mostra e nascondi datepicker

picker.isVisible()

Risulta true o false.

picker.show()

Rendi visibile il selezionatore.

picker.adjustPosition()

Ricalcola e cambia la posizione del selezionatore.

picker.hide()

Nascondi il selezionatore rendendolo invisibile.

picker.destroy()

Nascondi il selezionatore e rimuovi tutti gli ascoltatori di eventi – non si torna indietro!

Internazionalizzazione

Il formato di configurazione predefinito i18n è come questo:

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

Devi fornire 12 mesi e 7 giorni della settimana (con abbreviazioni). Specifica sempre i giorni della settimana in quest’ordine con la domenica per prima. Puoi cambiare l’opzione firstDay per riordinare se necessario (0: domenica, 1: lunedì, ecc.). Puoi anche impostare isRTL a true per le lingue che si leggono da destra a sinistra.

Estensioni

Timepicker

Pikaday è un puro datepicker. Non supporta la scelta dell’ora del giorno. Tuttavia, ci sono stati degli sforzi per aggiungere il supporto dell’ora a Pikaday, vedi #1 e #18. Questi risiedono nel proprio fork.

Puoi usare il lavoro che @owenmead ha fatto più recentemente a owenmead/PikadayUn approccio più semplice alla selezione dell’ora fatto da @xeeali a xeeali/Pikaday è basato sulla versione 1.2.0.Inoltre @stas ha un fork stas/Pikaday, ma ora è abbastanza vecchio

Compatibilità browser

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

Autori

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

Grazie a @shoogledesigns per il nome.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.