Fomulario com campo data perdendo formatação

Boa tarde,

quando eu realizo um processo com dois campos de data em formato date. ele informa normalmente as datas. mas quando salvo. ela fica em formato ano/mes/dia perdendo o formato inicial.

<div class="grid-4-12">
				    <label for="dt_emissao">Data de Emissão</label>
				    <input
				        type="date"
				        style="font-size: 18px;"
				        class="form-control date-input"
				        name="dt_emissao"
				        id="dt_emissao"
				        onchange="dateValidation(this);" />
				</div>

				<div class="grid-4-12">
				    <label for="dt_vencimento">Data de Vencimento&nbsp;</label>
				    <input
				        type="date"
				        style="font-size: 18px;"
				        class="form-control date-input"
				        name="dt_vencimento"
				        id="dt_vencimento"
				        onchange="dateValidation(this);" />
				</div>

O Fluig faz umas “mágicas” com data e ainda tem o problema do navegador.

Alguns navegadores informam a data no formato ISO, enquanto outros colocam no formato PT-BR, já é o primeiro problema.

Aí tem algum outro problema que o Fluig deve ter alguma identificação de nome de campo com dt_ ou data_ e aí pode mudar as coisas mais ainda.

Uma recomendação da própria documentação é utilizar o evento inputFields para tratar os campos de data e assim armazenar do jeito desejado.

Exemplo que utilizo num formulário aqui:

/**
 * Evento para formatar dados antes de inseridos no sistema
 *
 * @param {FormController} form
 */
function inputFields(form) {
    // Salva Data de Validade no Format ISO para melhor consulta
    var dataPartes = form.getValue("dt_validade").split("/");
    form.setValue(
        "dt_validade_iso",
        dataPartes[2] + "-" + dataPartes[1] + "-" + dataPartes[0]
    );
}

boa tarde bruno! essa função no formulário você usa na custom mesmo?

Não. É um evento de formulário que acontece no back-end.

Se não me engano, no Eclipse, precisa criar um novo script indicando que é evento de formulário, selecionar o evento inputFields e então indicar o formulário do evento.

mesmo mexendo no input fields o campo quando salva se perde na proxima etapa. faz a inversão. estou tentando ainda no input fields uma solução.


Então, mas o navegador utilizado por padrão exibe a data em pt-br ou iso?

Aqui acabo evitando usar o tipo date justamente pra não ter problema de navegador. Deixo como text e utilizo o Calendar do Fluig pra fazer a seleção da data.

Olá,

Montei esta função utilizando a função nativa de calendário do fluig junto com o iMask. Espero que ajude:

utilizo o campo do tipo text e chamo no script.js

//------------------------------------------------------------------------------------
mascaraData(‘dt_emissao’)

//função mascara para data
//https://imask.js.org/
//IMask Date · Issue #345 · uNmAnNeR/imaskjs · GitHub
function mascaraData(campo){
$(“[name^='” + campo + “']”).each(function(index){
if (this.value != undefined){
FLUIGC.calendar(this, {
pickDate: true,
pickTime: false,
language: ‘pt-br’
});
IMask(this, {
mask: Date,
pattern: ‘d{/}m{/}Y’, // default is ‘d{.}m{.}Y’
min: new Date(2000, 0, 1),
max: new Date(2050, 0, 1),
format: function (date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (day < 10) day = “0” + day;
if (month < 10) month = “0” + month;
return [day, month, year].join(‘/’);
},
parse: function (str) {
var yearMonthDay = str.split(‘/’);
var date = new Date(yearMonthDay[2], yearMonthDay[1] - 1, yearMonthDay[0])
return date;
},
lazy: false
});
}
});
}

//------------------------------------------------------------------------------------

IMask.js (139,1,KB)

é aqui usava também. mas tem muita dificuldade dele interpretar regras no javascript sendo em text. por isso voltei pra date onde entendeu a regra corretamente. como text não consegui.

Dá um exemplo de problema?

É que usando a FLUIGC.calendar pra fazer a seleção de data dá pra usar o método getDate dela e vai receber uma data no formato MomentJs. Além de poder usar a MomentJs para interpretar a data que está no formato pt-BR mesmo e fazer validações e cálculos normalmente.

eu tive que criar um datevalidation para fazer tratativa de dt_emissao e dt_vencimento. dt_vencimento d-10 e dt_emissao d+7. funciona legal quando está como date. quando fica como text ele não calcula as datas legal e apresenta varias falhas. posso até trazer aqui se acharem interessante. e essa tratativa ainda precisava de uma validacão para entrar ou não na regra. ex: se fosse feito fora do prazo a data poderia ficar liberada para indicar qualquer coisa. é uma regra para o financeiro não permitir que lancem valores fora dos prazos de pagamento.

Pra ter uma ideia do que faço aqui.

Usuário escolhe a data de saída e retorno (incluindo o horário na data). Já deixo a máscara no campo pra garantir que vai estar digitado nesse formato, mesmo que não utilizem o calendário.

Nesse caso configuro pra permitir selecionar a data, mas como é reserva pro futuro não pode ter data anterior a hoje. Também obriga data de saída ser anterior a de retorno e vice-versa.

Como o .getDate retorna um MomentJs você pode fazer as contas normalmente, adicionando ou subtraindo data, formatando e todo o resto que a MomentJs permite (que é muito melhor do que o objeto Date padrão do JS, que é horrível).

Por exemplo, na hora de validar o formulário dá pra fazer algo assim:

if (calendarSaida.getDate().isBefore(today)) {
    // Erro: data de saída tem que ser posterior a hoje
}

if (calendarRetorno.getDate().isBefore(calendarSaida.getDate())) {
    // Erro: data de retorno tem que ser posterior a data de saída
}

// Pensando em adicionar/subtrair data
const dataMinimaPagamento = moment().add(7, 'days');

if (calendarDataPagamento.isAfter(dataMinimaPagamento)) {
    // Ok, tá no prazo
}

Qualquer coisa se o campo tá formatado como dd/mm/yyyy também basta transformar numa data Moment.

const dataPagamento = moment($("#campo_data").val(), "DD/MM/YYYY");

sempre usei o input date e so deixo usarem o chrome aqui. Dai evita esses bos.

@Daniel_Sales , e como convenceu os usuários que só dá pra usar Chrome? Porque tenho situações de usuários que só usam Firefox ou Edge e se eu chego com uma notícia dessas vão jogar na cara que o sistema é péssimo, hehehe.

E no caso dos que usam o app mobile, não dá diferença ou problema?

Bloqueio outros navegadores.
Tenho uma widget na home que válida.

obrigado pelo apoio pessoal. eu insisti ao maximo como date. mas como comecou a apresentar problemas na minha central. eu tive que virar para text. consegui implementar a regra como text e funcional. posso demonstrar se alguém tiver interesse. mas por ora já consegui o que precisava.