Javascript adiciona zeros à esquerda até a data


437

Eu criei esse script para calcular a data com 10 dias de antecedência no formato dd / mm / aaaa:

var MyDate = new Date();
var MyDateString = new Date();
MyDate.setDate(MyDate.getDate()+10);
MyDateString = MyDate.getDate() + '/' + (MyDate.getMonth()+1) + '/' + MyDate.getFullYear();

Eu preciso que a data apareça com zeros à esquerda no componente dia e mês por meio da adição dessas regras ao script. Parece que não consigo fazê-lo funcionar.

if (MyDate.getMonth < 10)getMonth = '0' + getMonth;

e

if (MyDate.getDate <10)get.Date = '0' + getDate;

Se alguém pudesse me mostrar onde inseri-los no script, eu ficaria muito agradecido.


6
Como uma boa convenção, você deve minúscula o primeiro caractere em seus nomes de variável e reservar a caixa de camelo para objetos / protótipos.
zykadelic

Se o formato AAAA-MM-DD for aceitável, essa seria uma resposta muito boa: stackoverflow.com/a/28431880/1717535 #
Fabien Snauwaert

Respostas:


1352

Tente isso: http://jsfiddle.net/xA5B7/

var MyDate = new Date();
var MyDateString;

MyDate.setDate(MyDate.getDate() + 20);

MyDateString = ('0' + MyDate.getDate()).slice(-2) + '/'
             + ('0' + (MyDate.getMonth()+1)).slice(-2) + '/'
             + MyDate.getFullYear();

EDITAR:

Para explicar, .slice(-2)nos dá a última dois caracteres da string.

Então, não importa o quê, podemos adicionar "0" ao dia ou mês e apenas pedir os dois últimos, pois esses são sempre os dois que queremos.

Portanto, se os MyDate.getMonth()retornos 9, será:

("0" + "9") // Giving us "09"

adicionando .slice(-2)isso nos dá os dois últimos caracteres, que é:

("0" + "9").slice(-2)
"09"

Mas se MyDate.getMonth()retornar 10, será:

("0" + "10") // Giving us "010"

adicionando .slice(-2)nos fornece os dois últimos caracteres, ou:

("0" + "10").slice(-2)
"10"

27
Bifurcada - formato da data AAAA-MM-DD jsfiddle.net/j6qJp/1 Pode ser útil para alguém. Graças
tomexx

3
Alguém pode explicar por que isso é melhor do que a resposta que a @Aleross fornece abaixo? Não está claro imediatamente o que ele faz em relação à função pad, explicitamente clara.
22413

2
Sem mencionar que hoje este exemplo me deu 26/06/2014 em vez de 06/06/2014
DazManCat

3
@DazManCat: Isso é o que deveria fazer. O código começa adicionando 20 dias à data atual. MyDate.setDate(MyDate.getDate() + 20);
cookie monster

3
@ n00b e @Phil Cooper, sem se envolver em uma discussão sobre os meandros da rotina JavaScript, descobri que a slice()técnica na resposta aceita é cerca de 1/10 de segundo mais rápida que a técnica de @Aleross pad()em 1 milhão de iterações. jsFiddle . "pague seu dinheiro, faça a sua escolha".
26415 Karl

105

Aqui está um exemplo dos documentos do objeto Date na Mozilla Developer Network usando uma função "pad" personalizada, sem precisar estender o protótipo de número do Javascript. A função útil que eles fornecem como exemplo é

function pad(n){return n<10 ? '0'+n : n}

E abaixo está sendo usado em contexto.

/* use a function for the exact format desired... */
function ISODateString(d){
    function pad(n){return n<10 ? '0'+n : n}
    return d.getUTCFullYear()+'-'
    + pad(d.getUTCMonth()+1)+'-'
    + pad(d.getUTCDate())+'T'
    + pad(d.getUTCHours())+':'
    + pad(d.getUTCMinutes())+':'
    + pad(d.getUTCSeconds())+'Z'
}

var d = new Date();
console.log(ISODateString(d)); // prints something like 2009-09-28T19:03:12Z

3
Uma maneira muito legal de fazer isso. Acho que a resposta aceita é muito bom, mas isso ainda mais limpo na minha opinião
Binke

1
isso pode levar a erros inesperados, pois gera uma string para <10 e um número para> = 10
David Fregoli

@DavidFregoli, todas essas funções de data para string retornam uma string; portanto, se você inserir uma string, pad produzirá apenas strings.
Rohmer

56

A nova maneira moderna de fazer isso é usar toLocaleDateString, porque não apenas permite que você formate uma data com a localização adequada, mas também pode passar opções de formato para arquivar o resultado desejado:

var date = new Date(2018, 2, 1);
var result = date.toLocaleDateString("en-GB", { // you can skip the first argument
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
});
console.log(result);

Quando você pula o primeiro argumento, ele detecta o idioma do navegador. Como alternativa, você pode usar2-digit a opção de ano.

Se você não precisar oferecer suporte a navegadores antigos como o IE10, esta é a maneira mais limpa de fazer o trabalho. O IE10 e versões inferiores não entenderão o argumento de opções.

Nota: Além disso, também há toLocaleTimeString, se você deseja localizar ou formatar a hora de uma data.


3
Isso é exatamente o que eu estava procurando, obrigado. Mais informações sobre as opções disponíveis para toLocaleDateString aqui: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
JoseLinares

1
@JoseLinares Oi, obrigado por colocar este link de volta nos dias. Acabei de decidir melhorar minha resposta para tornar a solução mais atraente para cenários comuns, pois você pode pular o primeiro argumento e o IE10 não é mais relevante. Com isso em mente, incluí o seu link na minha resposta.
Martin Braun

@modiX, desculpe, foi um erro meu em código e eu tomou forma errada a descrição, Sim as localidades (primeira variável) é opcional .
Kanhaiya lal

@Kanhaiyalal Não se preocupe, podem ocorrer erros. Fiquei surpreso que dois dos três revisores também aprovaram a edição errada.
Martin Braun


29

Para vocês do futuro (ECMAScript 2017 e além)

Solução

"use strict"

const today = new Date()

const year = today.getFullYear()

const month = `${today.getMonth() + 1}`.padStart(2, "0")

const day = `${today.getDate()}`.padStart(2, "0")

const stringDate = [day, month, year].join("/") // 13/12/2017

Explicação

a String.prototype.padStart(targetLength[, padString])adiciona o maior número possível padStringno String.prototypealvo para que o novo comprimento do destino é targetLength.

Exemplo

"use strict"

let month = "9"

month = month.padStart(2, "0") // "09"

let byte = "00000100"

byte = byte.padStart(8, "0") // "00000100"

4
Isso faz parte do ES2017 ou ES8. Portanto, é incorreto dizer "ES6 +", pois não faz parte do ES6 e ES7.
Noel Llevares

Tecnicamente, isso deve ser .padStart(2, '0')porque o segundo parâmetro é uma string, embora provavelmente não importe, a menos que você esteja usando o TypeScript
bmaupin 17/04

Você está correto, eu vou editar minha resposta.
Amin NAIRI

11
Number.prototype.padZero= function(len){
 var s= String(this), c= '0';
 len= len || 2;
 while(s.length < len) s= c + s;
 return s;
}

//em uso:

(function(){
 var myDate= new Date(), myDateString;
 myDate.setDate(myDate.getDate()+10);

 myDateString= [myDate.getDate().padZero(),
 (myDate.getMonth()+1).padZero(),
 myDate.getFullYear()].join('/');

 alert(myDateString);
})()

/*  value: (String)
09/09/2010
*/

10

Eu encontrei a maneira mais curta de fazer isso:

 MyDateString.replace(/(^|\D)(\d)(?!\d)/g, '$10$2');

adicionará zeros à esquerda em todos os dígitos solitários e únicos


Eu gosto dessa solução. Você pode esclarecer um pouco o que acontece lá?
Gobliins

7
var MyDate = new Date();
var MyDateString = '';
MyDate.setDate(MyDate.getDate());
var tempoMonth = (MyDate.getMonth()+1);
var tempoDate = (MyDate.getDate());
if (tempoMonth < 10) tempoMonth = '0' + tempoMonth;
if (tempoDate < 10) tempoDate = '0' + tempoDate;
MyDateString = tempoDate + '/' + tempoMonth + '/' + MyDate.getFullYear();

5

Você pode usar o operador ternário para formatar a data como uma declaração "se".

Por exemplo:

var MyDate = new Date();
MyDate.setDate(MyDate.getDate()+10);
var MyDateString = (MyDate.getDate() < 10 ? '0' + MyDate.getDate() : MyDate.getDate()) + '/' + ((d.getMonth()+1) < 10 ? '0' + (d.getMonth()+1) : (d.getMonth()+1)) + '/' + MyDate.getFullYear();

assim

(MyDate.getDate() < 10 ? '0' + MyDate.getDate() : MyDate.getDate())

seria semelhante a uma instrução if, em que se getDate () retornar um valor menor que 10, retornar '0' + a Data ou retornar a data se maior que 10 (já que não precisamos adicionar o líder 0) O mesmo para o mês.

Edit: Esqueceu que getMonth começa com 0, então adicionou o +1 para dar conta dele. Claro que você também pode dizer d.getMonth () <9:, mas achei que usar o +1 ajudaria a facilitar a compreensão.


obrigado por explicar o +1
Bryan A

5

Existe outra abordagem para resolver esse problema, usando sliceJavaScript.

var d = new Date();
var datestring = d.getFullYear() + "-" + ("0"+(d.getMonth()+1)).slice(-2) +"-"+("0" + d.getDate()).slice(-2);

a datestringdata de retorno com o formato esperado: 2019-09-01

outra abordagem está usando a dateformatbiblioteca: https://github.com/felixge/node-dateformat


Tome cuidado com a ortografia "JavaScript".
Basil Bourque

3

Facilite sua vida e use Moment.js alguns exemplos de código:

var beginDateTime = moment()
  .format('DD-MM-YYYY HH:mm')
  .toString();

// Now will print 30-06-2015 17:55
console.log(beginDateTime);

4
moment.js -> não é uma boa solução bcos seus 19,8k de código em comparação com as soluções de 0,3k aqui.
MarcoZen 4/16

3
function formatDate(jsDate){
  // add leading zeroes to jsDate when days or months are < 10.. 
  // i.e.
  //     formatDate(new Date("1/3/2013")); 
  // returns
  //    "01/03/2103"
  ////////////////////
  return (jsDate.getDate()<10?("0"+jsDate.getDate()):jsDate.getDate()) + "/" + 
      ((jsDate.getMonth()+1)<10?("0"+(jsDate.getMonth()+1)):(jsDate.getMonth()+1)) + "/" + 
      jsDate.getFullYear();
}

3

Você pode fornecer opções como um parâmetro para formatar a data. O primeiro parâmetro é para o código do idioma que você pode não precisar e o segundo é para as opções. Para mais informações, visite https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

var date = new Date(Date.UTC(2012, 1, 1, 3, 0, 0));
var options = { year: 'numeric', month: '2-digit', day: '2-digit' };
console.log(date.toLocaleDateString(undefined,options));

1
Obrigado por sugestões.
MJ55

2

Embrulhei a resposta correta dessa pergunta em uma função que pode adicionar vários zeros à esquerda, mas o padrão é adicionar 1 zero.

function zeroFill(nr, depth){
  depth = (depth === undefined)? 1 : depth;

  var zero = "0";
  for (var i = 0; i < depth; ++i) {
    zero += "0";
  }

  return (zero + nr).slice(-(depth + 1));
}

para trabalhar apenas com números e com não mais de 2 dígitos, esta também é uma abordagem:

function zeroFill(i) {
    return (i < 10 ? '0' : '') + i
  }

1

Outra opção, usando uma função interna para fazer o preenchimento (mas resultando em um código bastante longo!):

myDateString = myDate.getDate().toLocaleString('en-US', {minimumIntegerDigits: 2})
  + '/' + (myDate.getMonth()+1).toLocaleString('en-US', {minimumIntegerDigits: 2})
  + '/' + myDate.getFullYear();

// '12/06/2017'

E outro, manipulando strings com expressões regulares:

var myDateString = myDate.toISOString().replace(/T.*/, '').replace(/-/g, '/');

// '2017/06/12'

Mas esteja ciente de que um mostrará o ano no início e o dia no final .


gostou mais deste item: myDate.getDate (). toLocaleString ('en-US', {minimumIntegerDigits: 2})
Max Alexander Hanna

1

Adicionando à resposta @modiX, é isso que funciona ... NÃO DEIXE QUE ESTEJA vazio

today.toLocaleDateString("default", {year: "numeric", month: "2-digit", day: "2-digit"})

1

Aqui está um exemplo muito simples de como você pode lidar com essa situação.

var mydate = new Date();

var month = (mydate.getMonth().toString().length < 2 ? "0"+mydate.getMonth().toString() :mydate.getMonth());

var date = (mydate.getDate().toString().length < 2 ? "0"+mydate.getDate().toString() :mydate.getDate());

var year = mydate.getFullYear();

console.log("Format Y-m-d : ",year+"-"+month+"-" + date);

console.log("Format Y/m/d : ",year+"/"+month+"/" + date);


0

O objetivo a seguir é extrair a configuração, conectar-se Date.protoypee aplicar a configuração.

Eu usei um Arraypara armazenar pedaços de tempo e quando eu push() thiscomo um Dateobjeto, ele me devolve o comprimento para iterar. Quando terminar, posso usar joino returnvalor.

Isso parece funcionar muito rápido: 0.016ms

// Date protoype
Date.prototype.formatTime = function (options) {
    var i = 0,
        time = [],
        len = time.push(this.getHours(), this.getMinutes(), this.getSeconds());

    for (; i < len; i += 1) {
        var tick = time[i];
        time[i] = tick < 10 ? options.pad + tick : tick;
    }

    return time.join(options.separator);
};

// Setup output
var cfg = {
    fieldClock: "#fieldClock",
    options: {
        pad: "0",
        separator: ":",
        tick: 1000
    }
};

// Define functionality
function startTime() {
    var clock = $(cfg.fieldClock),
        now = new Date().formatTime(cfg.options);

    clock.val(now);
    setTimeout(startTime, cfg.options.tick);
}

// Run once
startTime();

demo: http://jsfiddle.net/tive/U4MZ3/


0

O que eu faria é criar meu próprio auxiliar de data personalizado, com a seguinte aparência:

var DateHelper = {
    addDays : function(aDate, numberOfDays) {
        aDate.setDate(aDate.getDate() + numberOfDays); // Add numberOfDays
        return aDate;                                  // Return the date
    },
    format : function format(date) {
        return [
           ("0" + date.getDate()).slice(-2),           // Get day and pad it with zeroes
           ("0" + (date.getMonth()+1)).slice(-2),      // Get month and pad it with zeroes
           date.getFullYear()                          // Get full year
        ].join('/');                                   // Glue the pieces together
    }
}

// With this helper, you can now just use one line of readable code to :
// ---------------------------------------------------------------------
// 1. Get the current date
// 2. Add 20 days
// 3. Format it
// 4. Output it
// ---------------------------------------------------------------------
document.body.innerHTML = DateHelper.format(DateHelper.addDays(new Date(), 20));

(veja também este violino )


0

Adicione um pouco de preenchimento para permitir um zero inicial - quando necessário - e concatenar usando o delimitador de sua escolha como sequência.

Number.prototype.padLeft = function(base,chr){
        var  len = (String(base || 10).length - String(this).length)+1;
        return len > 0? new Array(len).join(chr || '0')+this : this;
    }

var d = new Date(my_date);
var dformatted = [(d.getMonth()+1).padLeft(), d.getDate().padLeft(), d.getFullYear()].join('/');

0

Como sugere @John Henckel, começar a usar o método toISOString () facilita as coisas

const dateString = new Date().toISOString().split('-');
const year = dateString[0];
const month = dateString[1];
const day = dateString[2].split('T')[0];

console.log(`${year}-${month}-${day}`);


0
 let date = new Date();
 let dd = date.getDate();//day of month

 let mm = date.getMonth();// month
 let yyyy = date.getFullYear();//day of week
 if (dd < 10) {//if less then 10 add a leading zero
     dd = "0" + dd;
   }
 if (mm < 10) {
    mm = "0" + mm;//if less then 10 add a leading zero
  }

você também pode descrever resumidamente o que tenta.
Shiv Kumar Baghel

0

tente isso para uma função básica, sem necessidade de bibliotecas

Date.prototype.CustomformatDate = function() {
 var tmp = new Date(this.valueOf());
 var mm = tmp.getMonth() + 1;
 if (mm < 10) mm = "0" + mm;
 var dd = tmp.getDate();
 if (dd < 10) dd = "0" + dd;
 return mm + "/" + dd + "/" + tmp.getFullYear();
};

0
function pad(value) {
    return value.tostring().padstart(2, 0);
}

let d = new date();
console.log(d);
console.log(`${d.getfullyear()}-${pad(d.getmonth() + 1)}-${pad(d.getdate())}t${pad(d.gethours())}:${pad(d.getminutes())}:${pad(d.getseconds())}`);

2
Embora esse código possa responder à pergunta, fornecer um contexto adicional sobre como e / ou por que resolve o problema melhoraria o valor a longo prazo da resposta.
leopal 10/01

0

Você pode usar String.slice () que extrai uma seção de uma string e a retorna como uma nova string, sem modificar a string original:

const currentDate = new Date().toISOString().slice(0, 10) // 2020-04-16

Ou você também pode usar uma biblioteca como Moment.js para formatar a data:

const moment = require("moment")
const currentDate = moment().format("YYYY-MM-DD") // 2020-04-16
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.