Pikaday / Pikaday

Posted by admin Articles

Um refrescante Datepicker JavaScript

  • Peso leve (menos de 5kb minificado e gzip)
  • Sem dependências (mas joga bem com o Momento.js)
  • Classes Modulares CSS para estilo fácil

Try Pikaday Demo →

Pronto para produção? Desde a versão 1.0.0 o Pikaday é estável e utilizado na produção. Se você encontrar bugs ou tiver pedidos de recursos, por favor, envie-os para o GitHub issue tracker.Veja também o changelog

Instalação

Você pode instalar o Pikaday como um pacote NPM:

npm install pikaday

Or link diretamente para o CDN:

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

Estilos

Você também precisará incluir o arquivo CSS do Pikaday. Este passo depende de como o Pikaday foi instalado. Ou importar do NPM:

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

Ou link para o CDN:

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

Utilização

Pikaday pode ser vinculado a um campo de entrada:

<input type="text">

Adicionar o JavaScript ao final do documento:

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

>

Se estiver usando jQuery certifique-se de passar apenas o primeiro elemento:

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

Se a instância Pikaday não estiver ligada a um campo você pode anexar o elemento em qualquer lugar:

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

Formatação

Por padrão, as datas são formatadas e analisadas usando o objeto Data padrão JavaScript.Se o Moment.js estiver disponível no escopo, ele será usado para formatar e analisar os valores de entrada. Você pode passar uma opção adicional format para a configuração que será passada para moment construtor. Veja o exemplo moment.js para uma versão 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>

Para uma formatação mais avançada e flexível você pode passar a sua própria função toString para a configuração que será usada para formatar o objeto data.Esta função tem a seguinte assinatura:

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

Você deve retornar uma string dela.

Seja cuidadoso, no entanto. Se a string formatada que você retornar não puder ser corretamente analisada pelo método Date.parse (ou por moment se estiver disponível), então você deve fornecer a sua própria função parse na configuração. Esta função será passada a string formatada e o 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); }});

Configuração

Como os exemplos acima demonstram, o Pikaday tem muitas opções úteis:

  • field ligar o datapicker a um campo do formulário
  • trigger usar um elemento diferente para acionar a abertura do datepicker, ver exemplo de acionamento (padrão para field)
  • bound mostrar/ocultar automaticamente o selecionador de data em field foco (padrão true se field estiver definido)
  • ariaLabel atributo de dados no campo de entrada com um texto de ajuda de ária (aplicado somente quando bound estiver definido)
  • position posição preferida do selecionador de data em relação ao campo do formulário, e.g.: top right, bottom right Nota: o ajuste automático pode ocorrer para evitar que o datepicker seja exibido fora da viewport, veja o exemplo de posições (padrão para ‘bottom left’)
  • reposition pode ser definido como falso para não reposicionar o datepicker dentro da viewport, forçando-o a tomar a configuração position (padrão: true)
  • container nó DOM para renderizar o calendário, veja o exemplo do recipiente (padrão: indefinido)
  • format o formato de saída padrão para .toString() e field valor (requer momento.js para formatação personalizada)
  • formatStrict a bandeira padrão para a análise da data do momento (requer Moment.js para formatação personalizada)
  • toString(date, format) função que será usada para formatação personalizada. Esta função terá precedência sobre moment.
  • parse(dateString, format) função que será usada para analisar a string de entrada e obter um objeto de data a partir dela. Esta função terá precedência sobre moment.
  • defaultDate a data inicial para ver quando aberta pela primeira vez
  • setDefaultDate Booleano (verdadeiro/falso). faça o defaultDate o valor inicial selecionado
  • firstDay primeiro dia da semana (0: domingo, 1: segunda-feira, etc)
  • minDate a data mínima/primeira data que pode ser selecionada (este deve ser um objeto de data nativo – e.g. new Date() ou moment().toDate())
  • maxDate a data máxima/última data que pode ser selecionada (este deve ser um objeto Data nativo – por exemplo new Date() ou moment().toDate())
  • disableWeekends não permitir a seleção de Sábados ou Domingos
  • disableDayFn função de retorno de chamada que é passada um objeto Data para cada dia em vista. Deve retornar verdadeiro para desativar a seleção desse dia.
  • yearRange número de anos de cada lado (por exemplo, 10) ou matriz de intervalo superior/inferior (por exemplo )
  • showWeekNumber mostrar o número da semana ISO no topo da linha (padrão false)
  • pickWholeWeek selecionar uma semana inteira em vez de um dia (padrão false)
  • isRTL inverter o calendário para a direita paraidiomas esquerdos
  • i18n idioma padrão para nomes de mês e dia da semana (ver internacionalização abaixo)
  • yearSuffix texto adicional para anexar ao ano no título
  • showMonthAfterYear renderizar o mês após ano no título (padrão false)
  • showDaysInNextAndPreviousMonths renderizar os dias da grade do calendário que caem nos meses seguintes ou anteriores (padrão: false)
  • enableSelectionDaysInNextAndPreviousMonths permite ao utilizador seleccionar a data que está nos meses seguintes ou anteriores (por defeito: false)
  • numberOfMonths número de calendários visíveis
  • mainCalendar quando numberOfMonths é utilizado, isto irá ajudá-lo a escolher onde estará o calendário principal (por defeito left, pode ser definido para right). Somente usado para a primeira exibição ou quando uma data selecionada ainda não está visível
  • events matriz de datas que você gostaria de diferenciar dos dias normais (por exemplo )
  • theme define um nome de classe que pode ser usado como um gancho para estilizar diferentes temas, ver exemplo de tema (padrão null)
  • blurFieldOnSelect define se o campo está desfocado quando uma data é selecionada (padrão true)
  • onSelect função callback para quando uma data é selecionada
  • onOpen função callback para quando o picker se torna visível
  • onClose função de callback para quando o selecionador está oculto
  • onDraw função de callback para quando o selecionador desenha um novo mês
  • keyboardInput ativar o suporte de entrada do teclado (padrão true)

Estilo

Se o reposition configuração-a opção está ativada (padrão), Pikaday aplicará as classes CSS ao datador de acordo com o posicionamento do mesmo:

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

Note que o elemento DOM em qualquer momento terá tipicamente 2 classes CSS (ex. top-aligned right-aligned etc).

jQuery Plugin

A versão normal do Pikaday não requer jQuery, no entanto existe um plugin jQuery se este flutuar o seu barco (ver plugins/pikaday.jquery.js no repositório). Esta versão requer jQuery, naturalmente, e pode ser usada como outros plugins:Veja o exemplo jQuery para uma versão 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>

suporte AMD

Se você usa um carregador de scripts modular, o Pikaday não está vinculado ao objeto global e irá se encaixar bem no seu processo de construção. Você pode requerer o Pikaday como qualquer outro módulo. Veja o exemplo da AMD para uma versão completa.

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

O mesmo se aplica ao plugin jQuery mencionado acima. Veja o exemplo jQuery AMD para uma versão completa.

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

Suporte ao módulo CommonJS

Se você usar um ambiente compatível com CommonJS você pode usar a função require para importar o Pikaday.

var pikaday = require('pikaday');

Quando você empacota todos os módulos necessários com o Browserify e você não usa o Moment.js especifique a opção ignore:

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

Ruby on Rails

Se você estiver usando Ruby on Rails, certifique-se de verificar a gem do Pikaday.

Métodos

Pode controlar a data escolhida após a criação:

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

Obter e definir data

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

Retorna a data selecionada em um formato de string. Se o Moment.js existir (recomendado) então o Pikaday pode devolver qualquer formato que o Moment entenda. Você também pode fornecer sua própria função toString e fazer a formatação você mesmo. Leia mais na seção de formatação.

Se nem moment objeto existe nem toString função é fornecida, o método padrão do JavaScript .toDateString() será usado.

picker.getDate()

Retorna um JavaScript básico Date objeto do dia selecionado, ou null se não houver seleção.

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

>>

Definir a seleção atual. Isto será restringido dentro dos limites de minDate e maxDate opções, se forem especificadas. Você pode opcionalmente passar um booleano como segundo parâmetro para evitar o acionamento do objeto onSelect callback (verdadeiro), permitindo que a data seja definida silenciosamente.

picker.getMoment()

Retorna um objeto Moment.js para a data selecionada (Momento deve ser carregado antes do Pikaday).

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

Definir a seleção atual com um objeto Moment.js (veja setDate para detalhes).

Limpar e reiniciar data

picker.clear()

Limpará e reiniciará a entrada onde o selecionador está vinculado.

Alterar a vista actual

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

Alterar a vista actual para ver uma data específica. Este exemplo saltará para fevereiro de 2014 (mês é um índice baseado em zero).

>

picker.gotoToday()

>

Corte de cor para picker.gotoDate(new Date())>

picker.gotoMonth(2)>

>

Mude a vista atual por mês (0: janeiro, 1: Februrary, etc).

>

>677777>>picker.prevMonth()>

>

>

Vá para o mês seguinte ou anterior (isto mudará de ano se necessário).

>

>picker.gotoYear()

>

Mudar o ano que está sendo visualizado.

>

>picker.setMinDate()

>

Atualizar a data mínima/anterior que pode ser selecionada.

>

picker.setMaxDate()

>

Atualizar a data máxima/última que pode ser selecionada.

>

picker.setStartRange()>

>

Atualizar a data de início do intervalo. Para usar duas instâncias Pikaday para selecionar um intervalo de datas.

picker.setEndRange()

Atualizar a data de fim do intervalo. Para usar duas instâncias do Pikaday para selecionar um intervalo de datas.

Mostrar e ocultar o selecionador de datas

picker.isVisible()

>Retornos true ou false.

>picker.show()

Picker visível.

picker.adjustPosition()>

Recalcular e mudar a posição do picker.

picker.hide()>

Esconder o picker tornando-o invisível.

>picker.destroy()

Esconder o colhedor e remover todos os ouvintes do evento – sem voltar atrás!

Internacionalização

O padrão i18n formato de configuração parece assim:

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

Você deve fornecer 12 meses e 7 dias da semana (com abreviações). Especifique sempre os dias da semana nesta ordem com domingo primeiro. Você pode alterar a opção firstDay para reordenar se necessário (0: domingo, 1: segunda-feira, etc). Você também pode definir isRTL para true para idiomas que são lidos da direita para a esquerda.

Extensões

Timepicker

Pikaday é um puramente datapicker. Ele não suportará a escolha de uma hora do dia. No entanto, tem havido esforços para adicionar suporte de tempo ao Pikaday.Veja #1 e #18. Estes residem no seu próprio garfo.

Pode usar o trabalho @owenmead feito mais recentemente em owenmead/PikadayUma abordagem mais simples de selecção de tempo feita por @xeeali em xeeali/Pikaday é baseada na versão 1.2.0.Também @stas tem um fork stas/Pikaday, mas agora é bastante antigo

Compatibilidade do navegador

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

Autores

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

Agradecimentos a @shoogledesigns pelo nome.

Deixe uma resposta

O seu endereço de email não será publicado.