1

Eu tenho um campo que recebe um valor de data como no exemplo: 24/10/18.

Eu preciso replicar esse campo para um do tipo date mas seguindo a regra de value que o date exige. Exemplo: 2018-09-24.

Ou seja, converter a data 24/10/18 para 2018-10-24.

<label>Data um</label>
<input type="text" class="form-control" id="dataum" name="dataum" value="24/09/18">
<br>
Converte a data 24/09/18 para 2018-09-24 para adicionar o resultado num value do tipo date
<br>
<label>Data Copia</label>
<input type="date" class="form-control" id="dataumcopia" name="dataumcopia" value="2018-09-24">

3 Respostas 3

3

Simples assim:

var data = '24/10/2018';
var date = data.split('/').reverse().join('-');
console.log(date);

Edit.:

Percebi agora que a data vem só com 2 digitos do ano, e você precisa do retorno em 4 dígitos. Nesse caso, fica um pouco diferente. Se a data não for ser antes dos anos 2000, pode fazer assim:

var data = '24/10/18';
var date = data.split('/').reverse()
date[0] = '20' + date[0];
date = date.join('-');
console.log(date);
2

Fazer split e reverse, como as outras respostas sugerem, funciona bem se a data digitada for válida.

Mas como a data está sendo digitada em um campo input type="text", quer dizer que qualquer valor pode ser digitado nela. Ou seja, o campo pode ter desde datas inválidas (como 31/02/18 ou 10/99/18) até um texto qualquer que nem de longe lembra uma data (abc).

Por isso eu recomendo que você também valide a data que está sendo digitada, antes de setá-la no input type="date". Veja a diferença entre setar um valor válido e um inválido no exemplo abaixo:

function setar(valor) {
    document.getElementById('data').value = valor;
}
<input type="date" id="data" value="" />
<br/>
<input type="button" value="setar data inválida" onclick="setar('2018-02-31')" />
<input type="button" value="setar data válida" onclick="setar('2018-02-01')"/>

Ao setar uma data inválida, o valor do campo é "resetado". Estou testando no Chrome 63, não sei se o comportamento é o mesmo em todos os browsers (de qualquer forma, eu recomendo que valide a data antes de setá-la para evitar esses problemas).


Por isso é importante validar a data. Para isso, você pode criar um Date com os valores passados. Só há um detalhe: o construtor de Date aceita valores maiores que os permitidos (mês 13, 31 de fevereiro, etc), fazendo ajustes no valor final. Outro detalhe é que neste construtor o valor do mês é indexado em zero: ou seja, janeiro é mês zero, fevereiro é 1, etc. Exemplos:

// mês 13 é ajustado para fevereiro do ano seguinte
console.log(new Date(2018, 13, 1)); // 2019-02-01
// 31 de fevereiro é ajustado para 3 de março
console.log(new Date(2018, 1, 31)); // 2018-03-03

Dito isso, uma forma de validar é construir um Date e verificar se os valores finais são os mesmos (ou seja, se não houve nenhum ajuste):

var v = '24/10/18'.split('/');
var dia = parseInt(v[0]);
var mes = parseInt(v[1]);
var ano = parseInt(v[2]);

// verificar se os valores são números
if (isNaN(dia)) {
    // dia inválido
}
if (isNaN(mes)) {
    // mês inválido
}
if (isNaN(ano)) {
    // ano inválido
}

// corrigir os valores (supondo que o ano 18 seja 2018)
ano += 2000;
mes -= 1; // mês é indexado em zero (janeiro é zero, fevereiro é 1, etc)
var date = new Date(ano, mes, dia);

if (date.getFullYear() == ano && date.getMonth() == mes && date.getDate() == dia) {
    console.log("data válida");
}

O parseInt retornará NaN caso os valores obtidos não sejam números. Por isso o teste feito logo em seguida com isNaN para verificar se eles são de fato números.

Obs: a partir do ES6 você pode usar o destructuring assignment (veja aqui a tabela de compatibilidade dos browsers):

var [dia, mes, ano] = '24/10/18'.split('/').map(function(v) { return parseInt(v) });
var mes = mes - 1;
var ano = ano + 2000;

Uma vez que a data seja válida, você pode setá-la no input. Eu usei o método toISOString() para retornar a data no formato "yyyy-mm-dd", e usei substring para pegar somente a parte da data (já que o método toISOString() também retorna o horário):

var v = '24/10/18'.split('/');
var dia = parseInt(v[0]);
var mes = parseInt(v[1]);
var ano = parseInt(v[2]);

// verificar se os valores são números
if (isNaN(dia)) {
    // dia inválido
}
if (isNaN(mes)) {
    // mês inválido
}
if (isNaN(ano)) {
    // ano inválido
}

// corrigir os valores (supondo que o ano 18 seja 2018)
ano += 2000;
mes -= 1; // mês é indexado em zero (janeiro é zero, fevereiro é 1, etc)
var date = new Date(ano, mes, dia);

if (date.getFullYear() == ano && date.getMonth() == mes && date.getDate() == dia) {
    document.getElementById('dataumcopia').value =  date.toISOString().substring(0, 10);
}
<input type="date" class="form-control" id="dataumcopia" name="dataumcopia" value="">


Momentjs

Se você não se importa de adicionar uma biblioteca externa no seu projeto, recomendo o Moment.js, que facilita bastante esse trabalho:

var d = moment('24/10/18', 'DD/MM/YY');
if(d.isValid()) {
    document.getElementById('dataumcopia').value = d.format('YYYY-MM-DD');
}
<script src="https://momentjs.com/downloads/moment.min.js"></script>

<input type="date" class="form-control" id="dataumcopia" name="dataumcopia" value="">

1

Caso não ultrapasse o ano 2000 (falta muito, rs), da para fazer desse modo:

let str =  document.getElementById('dataum').value; //pega o valor
let split = str.split('/').reverse(); // quebra o valor entre os caracteres '/' e transforma o array na forma reversa
let shift = split.shift(); // remove o primeiro elemento e guarda na variavel
let join = split.join('-'); // junta os elementos do array separando-os por '-' 
let string = '20' + shift + '-' + join; //gera a string final

console.log(string);

document.getElementById('dataumcopia').value = string;
<label>Data um</label>
<input type="text" class="form-control" id="dataum" name="dataum" value="24/09/18">
<br>
Converte a data 24/09/18 para 2018-09-24 para adicionar o resultado num value do tipo date
<br>
<label>Data Copia</label>
<input type="date" class="form-control" id="dataumcopia" name="dataumcopia" value="">

Deixei o código todo comentado, caso tiver dúvidas, só perguntar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .