Javascript add leading zeroes to date

Question

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  lt  10 getMonth    0    getMonth    and  if  MyDate getDate  lt 10 get Date    0    getDate    If someone could show me where to insert these into the script I would be really appreciative

User · Answer

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.

User · Answer

var MyDate   new Date    var MyDateString       MyDate setDate MyDate getDate     var tempoMonth    MyDate getMonth   1   var tempoDate    MyDate getDate     if  tempoMonth  lt  10  tempoMonth    0    tempoMonth  if  tempoDate  lt  10  tempoDate    0    tempoDate  MyDateString   tempoDate         tempoMonth         MyDate getFullYear

User · Answer

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

User · Answer

As  John Henckel suggests  starting using the toISOString   method makes things easier    x000D   x000D  const dateString   new Date   toISOString   split  -    x000D  const year   dateString 0   x000D  const month   dateString 1   x000D  const day   dateString 2  split  T   0   x000D   x000D  console log    year -  month -  day     x000D   x000D   x000D

User · Answer

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

User · Answer

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 archive the desired result   x000D   x000D  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      outputs    01 03 2018    x000D   x000D   x000D   When you skip the first argument it will detect the browser language  instead  Alternatively  you can use 2-digit on the year option  too  If you don t need to support old browsers like IE10  this is the cleanest way to do the job  IE10 and lower versions won t understand the options argument  Please note  there is also toLocaleTimeString  that allows you to localize and format the time of a date

User · Answer

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

User · Answer

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  lt  10  mm    0    mm   var dd   tmp getDate     if  dd  lt  10  dd    0    dd   return mm         dd         tmp getFullYear

User · Answer

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

User · Answer

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

User · Answer

Here is very simple example how you can handle this situation    x000D   x000D  var mydate   new Date    x000D   x000D  var month    mydate getMonth   toString   length  lt  2    0  mydate getMonth   toString    mydate getMonth     x000D   x000D  var date    mydate getDate   toString   length  lt  2    0  mydate getDate   toString    mydate getDate     x000D   x000D  var year   mydate getFullYear    x000D   x000D  console log  Format Y-m-d     year  -  month  -    date   x000D   x000D  console log  Format Y m d     year     month       date   x000D   x000D   x000D

User · Answer

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

User · Answer

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 lt 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 lt 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

User · Answer

function formatDate jsDate        add leading zeroes to jsDate when days or months are  lt  10         i e           formatDate new Date  1 3 2013           returns          01 03 2103                           return  jsDate getDate   lt 10   0  jsDate getDate    jsDate getDate                     jsDate getMonth   1  lt 10   0   jsDate getMonth   1    jsDate getMonth   1                  jsDate getFullYear

User · Answer

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  lt  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  lt  10    0          i

User · Answer

Number prototype padZero  function len    var s  String this   c   0    len  len    2   while s length  lt  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

User · Answer

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  lt  len  i    1            var tick   time i           time i    tick  lt  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

User · Answer

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

User · Answer

You can define a  str pad  function  as in php    function str pad n        return String  00    n  slice -2

User · Answer

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

User · Answer

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  gt  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

User · Answer

What I would do  is create my own custom Date helper that looks like this     x000D   x000D  var DateHelper     x000D      addDays   function aDate  numberOfDays    x000D          aDate setDate aDate getDate     numberOfDays      Add numberOfDays x000D          return aDate                                      Return the date x000D         x000D      format   function format date    x000D          return   x000D               0    date getDate    slice -2                Get day and pad it with zeroes x000D               0     date getMonth   1   slice -2           Get month and pad it with zeroes x000D             date getFullYear                               Get full year x000D            join                                            Glue the pieces together x000D        x000D    x000D   x000D     With this helper  you can now just use one line of readable code to   x000D     --------------------------------------------------------------------- x000D     1  Get the current date x000D     2  Add 20 days x000D     3  Format it x000D     4  Output it x000D     --------------------------------------------------------------------- x000D  document body innerHTML   DateHelper format DateHelper addDays new Date    20    x000D   x000D   x000D     see also this Fiddle

User · Answer

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

User · Answer

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

User · Answer

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  lt  10     if less then 10 add a leading zero      dd    0    dd        if  mm  lt  10        mm    0    mm   if less then 10 add a leading zero

[javascript] Javascript add leading zeroes to date

Examples related to javascript

Examples related to date

Examples related to date-format

Examples related to time-format

Examples related to leading-zero