# Admin » Dashboard » Relatórios: Melhorias na interface do usuário para o seletor de data e hora

**URL:** <https://meta.discourse.org/t/admin-dashboard-reports-user-interface-improvements-for-the-datetime-picker/181652>\
**Category:** Product Support\
**Created:** [Março 2, 2021, 7:36pm UTC](https://meta.discourse.org/t/admin-dashboard-reports-user-interface-improvements-for-the-datetime-picker/181652 "2021-03-02T19:36:05Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![amotl](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/amotl/32/109873_2.png) [@amotl](https://meta.discourse.org/u/amotl)\
**Post date:** [Março 2, 2021, 7:43pm UTC](https://meta.discourse.org/t/admin-dashboard-reports-user-interface-improvements-for-the-datetime-picker/181652/2 "2021-03-02T19:43:22Z")

</div>

Acabei de tentar descobrir se outras pessoas já estão enfrentando esses problemas e encontrar a terminologia correta. De fato, consegui encontrar algumas referências, então vou citá-las aqui para consulta.

> [@Ross Summerell](#):
>
> O problema que estou enfrentando é que quero usar um campo de entrada digitável, além do seletor de data, mas quando digito nesse campo, ele dispara o evento keyup, que aciona o evento v-on:selected.
> 
> Isso significa que, se eu começar a digitar ‘2012-02-02’, ele envia o formulário a cada pressionamento de tecla.
> 
> Geralmente, isso seria fácil de resolver, pois poderíamos usar algo como .length, mas este componente Vue sempre retorna um objeto Date já analisado. Então, isso não funcionará.
> 
> Tenho a ideia de desconstruir o componente e criar o meu próprio, mas esperava que alguém pudesse ter uma ideia para uma solução diferente.
> 
> – [https://stackoverflow.com/questions/56890586/vuejs-datepicker-typeable-input-submit-delay](https://stackoverflow.com/questions/56890586/vuejs-datepicker-typeable-input-submit-delay)

Após analisar rapidamente este excelente artigo de Vitaly Friedman, reconheço que melhorar a UX nesses aspectos pode ser mais difícil do que o esperado.

> [@Vitaly Friedman](#):
>
> […]
> 
> Bem, a entrada numérica precisa ser confiável o suficiente para lidar com todos os tipos de casos extremos — e há muitos deles. Claro, usaremos algum tipo de rótulo ou placeholder para indicar a ordem dos campos de dia, mês e ano, além de um exemplo do formato de entrada, mas a validação em tempo real deve detectar rapidamente uma entrada mal formatada e **sugerir correções** para guiar o usuário no fluxo de entrada.
> 
> […]
> 
> Agora, como os usuários inseririam os dados ao encontrar essa entrada numérica? Se você observar usuários digitando uma data em um campo de entrada, verá que eles fazem uma pausa por um segundo, digitam `1`, depois mudam manualmente para o campo de mês, digitam `3`, mudam novamente para o campo de ano e digitam o ano — seja `19` ou `2019`.
> 
> Outros usuários vão jogar pelo seguro e digitar `03` e `01` explicitamente. Ainda outros tentarão incluir um caractere separador em qualquer um desses campos. Como, em algumas implementações, o placeholder desaparece assim que o campo é ativado, alguns usuários usarão um separador diferente do que você previu — frequentemente um hífen (`-`) ou uma barra (`/`). Alguns usuários tentarão incrementar o valor usando as setas para cima e para baixo nos campos de entrada. E alguns escolherão navegar pelos campos usando a tecla Tab ao digitar a data. Ah, que pesadelo para a validação em tempo real!
> 
> […]
> 
> – [Designing The Perfect Date And Time Picker — Smashing Magazine](https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/)

---

_[View the full topic](https://meta.discourse.org/t/admin-dashboard-reports-user-interface-improvements-for-the-datetime-picker/181652)._