Customizando o Date Range Input Component - CDE - Pentaho - Know Solutions
O Date Range Input Component sem dúvidas é extremamente prático, possibilitando que o usuário selecione padrões de intervalos de datas de forma rápida.
Porém, algumas vezes, nossos usuários estão acostumados com intervalos de datas diferentes aos que já vem por padrão no Date Range Input Component. Além disso, esse componente por padrão, está em Inglês.
Padrão do Date Range Input Component
Nesse post vou demonstrar como customizar os textos e intervalos neste componente para melhor atender às necessidades do usuário.
Para alterar o componente, edite o arquivo pentaho-solutions/system/pentaho-cdf/js/daterangepicker/daterangepicker.jQuery.js
Neste arquivo há a função Javascript para a geração do componente, e dentro desta função, existem os presetRanges conforme o trecho de código abaixo:
Como se pode ver, neste trecho de código há a propriedade "text" de cada uma das linhas, essa propriedade é o título que aparecerá para o usuário, então para trocarmos o text "Today" para "Hoje", basta substituir:
{text: 'Today', dateStart: 'today', dateEnd: 'today' }
{text: 'Hoje', dateStart: 'today', dateEnd: 'today' }
Repare que as propriedades dateStart e dateEnd não foram alteradas, esses são valores padrões para que a função utilize datas específicas e não são visíveis ao usuário.
Essas duas propriedades citadas anteriormente, devem ser alteradas caso haja a necessidade de mudar o intervalo das datas utilizadas.
Por Exemplo, caso nosso usuário solicite substituir o item com o dia de Hoje pelo dia de Ontem, trocaríamos o trecho: