Maybaygiare.org

Blog Network

adicionar um datepicker a um campo input usando jQuery UI

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>

Deixe uma resposta

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