617

I've created this script to calculate the date for 10 days in advance in the format of dd/mm/yyyy:

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

I need to have the date appear with leading zeroes on the day and month component by way of adding these rules to the script. I can't seem to get it to work.

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

and

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

If someone could show me where to insert these into the script I would be really appreciative.

3
  • 7
    As a good convention, you should lowercase the first character in your variable names and reserve camel casing for objects/prototypes.
    – zykadelic
    Jan 16, 2014 at 18:46
  • If the YYYY-MM-DD format is acceptable, this would be a very good answer: stackoverflow.com/a/28431880/1717535 Jul 4, 2017 at 7:49
  • 2
    Scroll down for ES6+ padStart answer Aug 10, 2020 at 20:30

33 Answers 33

1657

Try this: 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();

EDIT:

To explain, .slice(-2) gives us the last two characters of the string.

So no matter what, we can add "0" to the day or month, and just ask for the last two since those are always the two we want.

So if the MyDate.getMonth() returns 9, it will be:

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

so adding .slice(-2) on that gives us the last two characters which is:

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

But if MyDate.getMonth() returns 10, it will be:

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

so adding .slice(-2) gives us the last two characters, or:

("0" + "10").slice(-2)
"10"
11
  • 45
    Forked - date format YYYY-MM-DD jsfiddle.net/j6qJp/1 It may be useful for somebody. Thanks
    – tomexx
    Oct 31, 2012 at 13:59
  • 3
    Can someone explain why this is better than the answer that @Aleross provides below? It is not immediately clear what it does versus the pad function which is explicitly clear.
    – claudio
    Oct 29, 2013 at 20:37
  • 2
    Not to mention that today this example gave me 26/06/2014 instead of 06/06/2014
    – DazManCat
    Jun 6, 2014 at 10:50
  • 4
    @DazManCat: That's what it is supposed to do. The code starts by adding 20 days to the current date. MyDate.setDate(MyDate.getDate() + 20); Jul 25, 2014 at 16:45
  • 3
    @n00b and @Phil Cooper, without getting hung up on a discussion about the ins and outs of timing JavaScript routines, I found that the slice() technique in the accepted answer is about a 1/10 of a second faster than @Aleross 's pad() technique on 1 million iterations. jsFiddle. "pay your money, take your pick".
    – Karl
    Nov 26, 2015 at 14:32
286

The modern way

The new modern way to do this is to use toLocaleDateString, because it allows you not only to format a date with proper localization, but even to pass format options to achieve the desired result:

const date = new Date(2018, 2, 1)
const result = date.toLocaleDateString("en-GB", { // you can use undefined as first argument
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
})
console.log(result) // outputs “01/03/2018”

Or using a Temporal object (still in proposal, caniuse):

const date = new Temporal.PlainDate(2018, 3, 1) // also works with zoned date
const result = date.toLocaleString("en-GB", { // you can use undefined as first argument
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
})
console.log(result) // outputs “01/03/2018”

When you use undefined as the first argument it will detect the browser language, instead. Alternatively, you can use 2-digit on the year option, too.

Performance

If you plan to format a lot of dates, you should consider using Intl.DateTimeFormat instead:

const formatter = new Intl.DateTimeFormat("en-GB", { // <- re-use me
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
})
const date = new Date(2018, 2, 1) // can also be a Temporal object
const result = formatter.format(date)
console.log(result) // outputs “01/03/2018”

The formatter is compatible with Date and Temporal objects.

Historical dates

Unlike in the Temporal constructor years between 0 and 99 will be interpreted as 20th century years on the Date constructor. To prevent this, initialize the date like so:

const date = new Date()
date.setFullYear(18, 2, 1) // the year is A.D. 18

This is not required for Temporal objects, but years below 1000 will not contain leading zeros in all cases, because the formatter (that is shared for the Date and Temporal API) does not support 4-digit formatting at all. In this case you have to do manual formatting (see below).

For the ISO 8601 format

If you want to get your date in the YYYY-MM-DD format (ISO 8601), the solution looks different:

const date = new Date(Date.UTC(2018, 2, 1))
const result = date.toISOString().split('T')[0]
console.log(result) // outputs “2018-03-01”

Your input date should be in the UTC format or toISOString() will fix that for you. This is done by using Date.UTC as shown above.

Historical dates for the ISO 8601 format

Unlike in the Temporal constructor years between 0 and 99 will be interpreted as 20th century years on the Date constructor. To prevent this, initialize the date like so to be used for the ISO 8601 format:

const date = new Date()
date.setUTCFullYear(18, 2, 1) // the year is A.D. 18

Note that the ISO format for Temporal objects with dates before the year 1000 or after the year 9999 will have a different formatting compared to the legacy Date API. It is recommend to fallback to custom formatting to enforce 4 digit years in all circumstances.

Custom 4-digit formatting on the year

Sadly, the formatter doesn't support leading zeros on the year. There is no 4-digit option. This will remain for Temporal objects as well, because they do share the same formatter.

Fortunately, the ISO format of the Date API will always display at least 4 digits on the year, although Temporal objects do not. So at least for the Date API you can format historical dates before the year 1000 with leading zeros by falling back to a manual formatting approach using part of the ISO 8601 format method:

const date = new Date()
date.setUTCFullYear(18, 2, 1)
const ymd = date.toISOString().split('T')[0].split('-')
const result = `${ymd[2]}/${ymd[1]}/${ymd[0]}`
console.log(result) // outputs “01/03/0018”

For a Temporal object a different route is necessary, since the ISOYearString will be formatted differently for dates before the year 1000 and after the year 9999 as mentioned before:

const date = new Temporal.PlainDate(2018, 3, 1) // also works with zoned date
const zeroPad = (n, digits) => n.toString().padStart(digits, '0');
const result = `${zeroPad(date.day, 2)}/${zeroPad(date.month, 2)}/${zeroPad(date.year, 4)}`;
console.log(result) // outputs “01/03/0018”

Miscellaneous

For the Date and Temporal API there is also toLocaleTimeString, that allows you to localize and format the time of a date.

5
  • 7
    This is exactly what I was looking for, thanks. More info about the options available for toLocaleDateString here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Jul 25, 2018 at 9:24
  • 1
    @JoseLinares Hi, thanks for putting this link back in the days. I just decided to improve my answer to make the solution more appealing for common scenarios, since you can skip the first argument and IE10 is not relevant anymore. With that in mind, I included your link into my answer. Apr 12, 2019 at 9:09
  • @modiX, sorry it was a my mistake in code and i took wrong way the description, Yes the locales (first variable) is Optional. Jul 3, 2019 at 11:13
  • How to add leading zeros to the year using this method ? year: "numeric" displays the year as is, not on 4 digits :(
    – Sixteen
    Dec 17, 2021 at 11:37
  • 1
    @Sixteen Unfortunately, there is no 4-digit format option to address historical dates below the year 1000 with the modern approach. I updated my answer to address your issue and provide an alternative solution for this case. I wish there was a better way to do this, though. Dec 17, 2021 at 15:51
128

Here is an example from the Date object docs on the Mozilla Developer Network using a custom "pad" function, without having to extend Javascript's Number prototype. The handy function they give as an example is

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

And below is it being used in context.

/* 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
  • 4
    Very nice way of doing it. I think the accepted answer is really nice, but this even cleaner in my opinion
    – Binke
    Jan 19, 2016 at 10:52
  • 2
    this could lead to unexpected bugs cause it outputs a string for < 10 and a number for >= 10 Jun 23, 2017 at 10:26
  • @DavidFregoli, all those date to string functions return a string, so if you input a string, pad does output only strings. Dec 3, 2017 at 23:52
81

For you people from the future (ECMAScript 2017 and beyond)

Solution

"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

Explaination

the String.prototype.padStart(targetLength[, padString]) adds as many as possible padString in the String.prototype target so that the new length of the target is targetLength.

Example

"use strict"

let month = "9"

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

let byte = "00000100"

byte = byte.padStart(8, "0") // "00000100"
3
  • 4
    This is part of ES2017 or ES8. So it's incorrect to say "ES6+" as it's not part of ES6 and ES7. Jan 8, 2018 at 1:43
  • 1
    This should technically be .padStart(2, '0') since the second parameter is a string, although it probably won't matter unless you're using TypeScript
    – bmaupin
    Apr 17, 2020 at 13:14
  • This solution is really elegant.
    – Sixteen
    Dec 17, 2021 at 11:48
57

You can define a "str_pad" function (as in php):

function str_pad(n) {
    return String("00" + n).slice(-2);
}
1
  • 12
    "0" instead of "00" is enough Jun 23, 2017 at 10:25
18

I found the shorterst way to do this:

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

will add leading zeros to all lonely, single digits

5
  • I like this solution, can you maybe clarifiy a bit what happens there?
    – Gobliins
    Aug 8, 2019 at 10:19
  • Could you please explain how this works? Seems like an elegant solution Nov 3, 2020 at 4:07
  • 1
    Regexp finds maximum of three groups: $1 - any non-digit symbol (or beginning of the line) $2 - any digit $3 - any non-digit (that may not exist) Then we're replacing the captured (matched) stuff with $1 + "0" + $2 which comes $10$2 in the replacement string. Nov 10, 2020 at 21:13
  • It finds a single digit (between any other symbols) and adds a zero before this single digit You can play with S = ['1/2/16', '2.10.20', '3 5 9', 'Today is 4.5.20', 'US style 3/9/21']; S.forEach(s => console.log(s.replace(/(^|\D)(\d)(?!\d)/g, '$10$2'))) Nov 10, 2020 at 21:22
  • $3 does not exist in your regex, (?!\d) is negative lookahead not to add the leading zero if there is more than one digit.
    – Chupo_cro
    Jul 12, 2021 at 1:08
12
Number.prototype.padZero= function(len){
 var s= String(this), c= '0';
 len= len || 2;
 while(s.length < len) s= c + s;
 return s;
}

//in use:

(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

Nowadays you can also utilize String.prototype.padStart to reach the goal in quick and easy way

String(new Date().getMonth() + 1).padStart(2, '0')

The availability can be assessed at caniuse

var date = new Date()

var year = date.getFullYear()
var month = String(date.getMonth() + 1).padStart(2, '0')
var day = String(date.getDate()).padStart(2, '0')

console.log('%s/%s/%s', month, day, year)

Check

var date = new Date('7/4/2021')
    
var year = date.getFullYear()
var month = String(date.getMonth() + 1).padStart(2, '0')
var day = String(date.getDate()).padStart(2, '0')
    
/**
 * Expected output: 07/04/2021
 */
console.log('%s/%s/%s', month, day, year)

Polyfill for old browsers

String.prototype.padStart || Object.defineProperty(String.prototype, 'padStart', {
    configurable : true,
    writable : true,
    value : function (targetLength, padString) {
        'use strict'
        /**
         * String.prototype.padStart polyfill
         * https://stackoverflow.com/questions/3605214/javascript-add-leading-zeroes-to-date
         */
        targetLength = targetLength | 0
        padString = arguments.length > 1 ? String(padString) : ' '

        if (this.length < targetLength && padString.length) {
            targetLength = targetLength - this.length

            while (padString.length < targetLength) {
                padString += padString
            }

            return padString.slice(0, targetLength) + this
        } else {
            return this
        }
    }
})
8
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();
8

There is another approach to solve this problem, using slice in JavaScript.

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

the datestring return date with format as you expect: 2019-09-01

another approach is using dateformat library: https://github.com/felixge/node-dateformat

1
  • Take care in spelling "JavaScript". Sep 2, 2019 at 4:59
6

You could use ternary operator to format the date like an "if" statement.

For example:

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();

So

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

would be similar to an if statement, where if the getDate() returns a value less than 10, then return a '0' + the Date, or else return the date if greater than 10 (since we do not need to add the leading 0). Same for the month.

Edit: Forgot that getMonth starts with 0, so added the +1 to account for it. Of course you could also just say d.getMonth() < 9 :, but I figured using the +1 would help make it easier to understand.

0
4
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();
}
4

You can provide options as a parameter to format date. First parameter is for locale which you might not need and second is for options. For more info visit 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));
0
3

I wrapped the correct answer of this question in a function that can add multiple leading zero's but defaults to adding 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));
}

for working with numbers only and not more than 2 digits, this is also an approach:

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

Adding on to @modiX answer, this is what works...DO NOT LEAVE THAT as empty

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

Another option, using a built-in function to do the padding (but resulting in quite long code!):

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

// '12/06/2017'

And another, manipulating strings with regular expressions:

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

// '2017/06/12'

But be aware that one will show the year at the start and the day at the end.

1
  • liked this the most : myDate.getDate().toLocaleString('en-US', {minimumIntegerDigits: 2}) Dec 5, 2018 at 22:14
2

Here is very simple example how you can handle this situation.

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);

1
  • And you missed the +1 for the month
    – Baccata
    Jun 4, 2021 at 11:43
2

I think this solution is easier and can be easily remembered:

var MyDate = new Date();


var day = MyDate.getDate() + 10; // 10 days in advance
var month = MyDate.getMonth() + 1; // since months start from 0 we should add 1 to it
var year = MyDate.getFullYear();

day = checkDate(day);
month = checkDate(month);


function checkDate(i){
    if(i < 10){
    i = '0' + i;
  }
  return i;
}

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

1

What I would do, is create my own custom Date helper that looks like this :

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));

(see also this Fiddle)

1

As @John Henckel suggests, starting using the toISOString() method makes things easier

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}`);

1

try this for a basic function, no libraries required

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();
};
1

You can use String.slice() which extracts a section of a string and returns it as a new string, without modifying the original string:

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

Or you can also use a lib such as Moment.js to format the date:

const moment = require("moment")
const currentDate = moment().format("YYYY-MM-DD") // 2020-04-16
1

You could simply use :

const d = new Date();
const day = `0${d.getDate()}`.slice(-2);

So a function could be created like :

AddZero(val){
    // adding 0 if the value is a single digit
    return `0${val}`.slice(-2);
}

Your new code :

var MyDate = new Date();
var MyDateString = new Date();

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

toISOString can get leading 0

    const currentdate = new Date(); 
    const date = new Date(Date.UTC(currentdate.getFullYear(), (currentdate.getMonth()),currentdate.getDate(), currentdate.getHours(), currentdate.getMinutes(), currentdate.getSeconds()));
    //you can pass YY, MM, DD //op: 2018-03-01
    //i have passed YY, MM, DD, HH, Min, Sec // op : 2021-06-09T12:14:27.000Z
    console.log(date.toISOString());

output will be similar to this : 2021-06-09T12:14:27.000Z

1
const month = date.toLocaleDateString('en-US', { month: '2-digit' });
const day = date.toLocaleDateString('en-US', { day: '2-digit' });
const year = date.getFullYear();
const dateString = `${month}-${day}-${year}`;
1

Update for 2023

If you are looking for a simple modern solution, date-fns handles this beautifully.

Usage

import {format} from 'date-fns';

const myDate = new Date();
const formattedDate = format(myDate, 'dd/MM/yyyy');
0

The following aims to extract configuration, hook into Date.protoype and apply configuration.

I've used an Array to store time chunks and when I push() this as a Date object, it returns me the length to iterate. When I'm done, I can use join on the return value.

This seems to work pretty fast: 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

Add some padding to allow a leading zero - where needed - and concatenate using your delimiter of choice as string.

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
 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
  }
1
  • you can also describe in short what you attempt. May 16, 2019 at 0:12
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())}`);
1
  • 2
    While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
    – leopal
    Jan 10, 2020 at 14:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.