- Este artigo foi escrito por um engenheiro de software do Chrome, Kent Tamura.
Como você já deve ter notado, o Google Chrome oferece suporte à data picker desde a versão 20. Basta definir o atributo type do elemento input como date. O usuário pode clicar no botão de seta e o Chrome vai mostrar um widget de calendário.
Como recebemos muitos feedbacks dos desenvolvedores, gostaríamos de esclarecer algumas coisas sobre como aproveitar ao máximo o seletor de datas neste artigo.
Como a localidade afeta o formato da data do valor de entrada?
Os usuários podem digitar um valor de data no campo de texto de um input[type=date] com o formato de data mostrado na caixa como texto cinza. Esse formato é obtido da configuração do sistema operacional.
Os autores da Web não têm como mudar o formato da data porque atualmente não há padrões para especificar o formato.
Como o valor de entrada é representado ao enviar para um servidor?
O valor da data interpretado de input[type=date] na solicitação HTTP, como GET / POST, será formatado como yyyy-mm-dd.
Que tipo de formato o valor de entrada retorna?
O input.value sempre retorna como yyyy-mm-dd, independente do formato de apresentação.
Que tipo de formato o valor de entrada aceita?
Ao definir o input.value de forma programática, o valor aceita apenas o estilo yyyy-mm-dd, independentemente do formato de apresentação do valor inicial e do valor injetado em JavaScript.
Como faço para mudar a aparência do seletor de data?
No momento, não é possível estilizar a aparência do seletor de datas. No WebKit, já fornecemos maneiras de estilizar controles de formulário com a propriedade CSS -webkit-appearance ou o seletor de pseudoclasse ::-webkit-foo. No entanto, o menu pop-up do calendário não oferece essas opções no WebKit porque ele é separado do documento, como um menu pop-up para <select>, e atualmente não há um padrão para controlar o estilo nos subelementos.
Como posso evitar conflitos entre o jQuery Datepicker e o seletor de data nativo?
Se você já usou o jQuery Datepicker no input[type=date] no Google Chrome, talvez tenha notado que os calendários da interface jQuery e do pop-up de calendário nativo se sobrepõem.
Se você quiser aplicar o jQuery Datepicker em todas as plataformas, use input[type=text] em vez de input[type=date]. Não apenas o Google Chrome, mas também o Safari para iOS, o navegador BlackBerry e o Opera têm a própria interface para input[type=date], e atualmente não há como alcançar uma interface unificada em todas as plataformas usando input[type=date].
Se você quiser aplicar o jQuery Datepicker apenas em plataformas sem suporte a input[type=date], use o Modernizr ou o código a seguir:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();