View data format en dd/mm/yyyy

Question

Good afternoon! I’m using the plugin air-datepicker for dates.

When I click on the field, I see the format en dd/mm/yyyy.

Now, therefore, I want this date to be displayed in the same dd/mm/yyyy format when opening the modal window, as it is displayed in the yyyy-mm-dd format.

Remembering that I’m using ajax.

Under Ajax

function editar_lancamento(id)
{
metodo_salvar = 'update';
$('#form')[0].reset(); // Redefinir o formulário em modals
$('.form-group').removeClass('has-error'); // Apagar class de erro
$('.help-block').empty(); // clear error string

//Ajax - Carregar dados do ajax
$.ajax({
    url : "lancamento/lancamento_obter_por_id/" + id,
    type: "GET",
    dataType: "JSON",
    success: function( tbl_lancamento )
    {
        $('[name="id"]').val(tbl_lancamento.id);
		$('[name="txt_tipo"]').val(tbl_lancamento.tipo);			
        $('[name="txt_descricao"]').val(tbl_lancamento.descricao);
		$('[name="txt_valor"]').val(tbl_lancamento.valor);
		$('[name="txt_dt_vencimento"]').val(tbl_lancamento.dt_vencimento);			
		$('[name="sel_categoria"]').val(tbl_lancamento.id_categoria);
		$('[name="sel_conta"]').val(tbl_lancamento.id_conta);
		$('[name="txt_recebido"]').val(tbl_lancamento.recebido);
		$('[name="txt_dt_pagamento"]').val(tbl_lancamento.dt_pagamento);
		$('[name="sel_forma_pagamento"]').val(tbl_lancamento.forma_pagamento);			
	
		var tipo = $('#tipo').val();
		if(tipo == '1'){
			console.log(tipo);
			$('#modal_lancamento').modal('show'); // Abrir bootstrap modal quando completo carregado
		    $('.modal-title').html('<i class="fa fa-plus "></i> Editar Receita'); //Definir título e icone para o título modal Bootstrap
			$(".modal-header").css('background-color', '#00A65A');
			$('#lbl_recebido').text('Recebido ?');
		} else {		
			console.log(tipo);
			$('#modal_lancamento').modal('show'); // Abrir bootstrap modal quando completo carregado
		    $('.modal-title').html('<i class="fa fa-plus "></i> Editar Despesa'); //Definir título e icone para o título modal Bootstrap
			$(".modal-header").css('background-color', '#E9573F');
			$("#lbl_recebido").text('Pago ?');
		}
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Erro para obter dados ajax');
		console.log('Erro para obter dados ajax')	;
		
    }
});
}

Answer 1

//exemplo: tbl_lancamento.dt_vencimento.split('-').reverse().join("/"); 
var brDate = '2017-06-08'.split('-').reverse().join("/");
console.log(brDate);

Answer 2

A more manly possibility would be this:

var dateStr = '2017/06/07'; 
var dateSplit = dateStr.split("/");
var dateFormated = dateSplit[2] + "/" + dateSplit[1] + "/" + dateSplit[0]; 
console.log(dateFormated);

Answer 3

You need to change the date format, there are several ways to do, below is a simple example.

Change that :

 $('[name="txt_dt_vencimento"]').val(tbl_lancamento.dt_vencimento);

for :

 var spDate = tbl_lancamento.dt_vencimento.split('-');
 $('[name="txt_dt_vencimento"]').val(spDate[2]+'/'spDate[1]+'/'+spDate[0]);

Answer 4

Solved with Meajudasilvio’s answer

var dateStr = tbl_lancamento.dt_vencimento;
var dateSplit = dateStr.split("-");
var dateFormated = dateSplit[2] + "/" + dateSplit[1] + "/" + dateSplit[0];
console.log(dateFormated);
$('[name="txt_dt_vencimento"]').val(dateFormated);