os datepickers ajudam os usuários a selecionar uma data por meio de um calendário. Assim se evitam erros quase sempre ocasionados por uma má introdução da data, como por exemplo, um mau formato. Usando o plugin jQuery você pode facilmente adicionar um datepicker a um campo input. Existem muitos plugins datepicker disponíveis, mas jQuery UI Datepicker é um dos melhores, pois possui muitas opções de personalização.
neste tutorial, mostraremos como adicionar um datepicker a um campo input usando o jQuery. Com esse datepicker, sempre que um campo input específico for clicado, um calendário será aberto. O usuário poderá escolher desse calendário, uma data (dia, mês e ano).
jQuery UI
Em Primeiro Lugar, devemos incluir a biblioteca jQuery UI para usar suas funções.
funcionalidade básica do Datepicker
neste exemplo, mostro-lhe como adicionar um datepicker a um campo input.
código Javascript
devemos especificar o ID do campo input como seletor do datepicker.
$(function(){ $("#datepicker").datepicker();});
código HTML
quando o focus for feito no campo input, um calendário interativo será aberto.
<p>Date: <input type="text"></p>
funcionalidade avançada do Datepicker
nas linhas a seguir, veremos como fazer um uso mais avançado do Datepicker usando as várias opções que ele nos oferece.
alterar formato de data
por padrão, o plugin usa o formato MM/DD / YYYY. Usando a opção dateFormat podemos alterar o formato de data de acordo com nossas necessidades.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
selecione mês e ano
por padrão, mudamos de mês e ano com as setas esquerda e direita. Com as opções changeMonth e changeYear podemos mostrar um menu com o qual selecionar o mês e o ano.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
Restringir um intervalo de datas
com Datepicker você pode selecionar qualquer data, mas se você quiser restringir isso, você pode usar as opções minDate e maxDate.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker de até
no exemplo a seguir, mostro-lhe como implementar um datepicker no qual o usuário precisa inserir uma data de, e uma data até. A migalha deste script é que a data até, nunca pode ser anterior à data de.
código HTML
o usuário pode selecionar qualquer data no campo de, mas só pode selecionar uma igual ou maior que o anterior valor no campo até.
<p>Date: <input type="text"> TO <input type="text"></p>