- Este artigo foi escrito por Kent Tamura, engenheiro de software do Chrome.
Como você já deve ter notado, o Google Chrome oferece suporte a um seletor de datas desde o Chrome 20. Basta definir o atributo type do elemento input como date para que o usuário clique no botão de seta para que o Chrome exiba um bom widget de agenda.
Como recebemos muito feedback dos desenvolvedores, gostaríamos de esclarecer algumas coisas sobre como aproveitar ao máximo o uso do seletor de data neste artigo.
Como a localidade afeta o formato de data do valor de entrada?
Os usuários podem digitar um valor de data no campo de texto de uma input[type=date] com o formato de data mostrado na caixa como texto cinza. Esse formato é gerado na configuração do sistema operacional.
Autores da web não têm como alterar o formato da data porque, no momento, não existem 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 é retornado como yyyy-mm-dd, independentemente do formato da apresentação.
Que tipo de formato o valor de entrada aceita?
Ao definir o input.value de maneira programática, o valor aceita apenas o estilo yyyy-mm-dd, independentemente do formato da apresentação, para o valor inicial e o valor injetado pelo JavaScript.
Como faço para alterar a aparência do seletor de data?
No momento, não é possível definir o estilo da aparência do seletor de data. No WebKit, já oferecemos maneiras de definir o estilo dos controles de formulário com a propriedade CSS -webkit-appearance ou o seletor de pseudoclasse ::-webkit-foo. No entanto, o pop-up da agenda não oferece essas formas no WebKit porque é separado do documento, como um menu pop-up para <select>, e não há um padrão de como controlar o estilo nos subelementos.
Como posso evitar conflitos entre o seletor de data do jQuery e o seletor de data nativo?
Se você tentou jQuery Datepicker no input[type=date] no Google Chrome, talvez tenha notado agendas sobrepostas na interface do jQuery e no pop-up de agenda nativo.
Se você quiser aplicar 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 iOS Safari, o navegador BlackBerry e o Opera têm a própria IU para o input[type=date]. No momento, não há como criar uma IU unificada em todas as plataformas usando o input[type=date].
Se você quiser aplicar o jQuery Datepicker somente a 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();