Convert dd-mm-yyyy string to date

JavascriptDate

Javascript Problem Overview


i am trying to convert a string in the format dd-mm-yyyy into a date object in JavaScript using the following:

 var from = $("#datepicker").val();
 var to = $("#datepickertwo").val();
 var f = new Date(from);
 var t = new Date(to);

("#datepicker").val() contains a date in the format dd-mm-yyyy. When I do the following, I get "Invalid Date":

alert(f);

Is this because of the '-' symbol? How can I overcome this?

Javascript Solutions


Solution 1 - Javascript

Split on "-"

Parse the string into the parts you need:

var from = $("#datepicker").val().split("-")
var f = new Date(from[2], from[1] - 1, from[0])

Use regex

var date = new Date("15-05-2018".replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3"))

Why not use regex?

Because you know you'll be working on a string made up of three parts, separated by hyphens.

However, if you were looking for that same string within another string, regex would be the way to go.

Reuse

Because you're doing this more than once in your sample code, and maybe elsewhere in your code base, wrap it up in a function:

function toDate(dateStr) {
  var parts = dateStr.split("-")
  return new Date(parts[2], parts[1] - 1, parts[0])
}

Using as:

var from = $("#datepicker").val()
var to = $("#datepickertwo").val()
var f = toDate(from)
var t = toDate(to)

Or if you don't mind jQuery in your function:

function toDate(selector) {
  var from = $(selector).val().split("-")
  return new Date(from[2], from[1] - 1, from[0])
}

Using as:

var f = toDate("#datepicker")
var t = toDate("#datepickertwo")

Modern JavaScript

If you're able to use more modern JS, array destructuring is a nice touch also:

const toDate = (dateStr) => {
  const [day, month, year] = dateStr.split("-")
  return new Date(year, month - 1, day)
}

Solution 2 - Javascript

regular expression example:

new Date( "13-01-2011".replace( /(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3") );

Solution 3 - Javascript

Another possibility:

var from = "10-11-2011"; 
var numbers = from.match(/\d+/g); 
var date = new Date(numbers[2], numbers[0]-1, numbers[1]);

Match the digits and reorder them

Solution 4 - Javascript

Using moment.js example:

var from = '11-04-2017' // OR $("#datepicker").val();
var milliseconds = moment(from, "DD-MM-YYYY").format('x');
var f = new Date(milliseconds)

Solution 5 - Javascript

var from = $("#datepicker").val(); 
var f = $.datepicker.parseDate("d-m-Y", from);

Solution 6 - Javascript

Use this format: myDate = new Date('2011-01-03'); // Mon Jan 03 2011 00:00:00

Solution 7 - Javascript

You can also write a date inside the parentheses of the Date() object, like these:

new Date("Month dd, yyyy hh:mm:ss")
new Date("Month dd, yyyy")
new Date(yyyy,mm,dd,hh,mm,ss)
new Date(yyyy,mm,dd)
new Date(milliseconds)

Solution 8 - Javascript

The accepted answer kinda has a bug

var from = $("#datepicker").val().split("-")
var f = new Date(from[2], from[1] - 1, from[0])

Consider if the datepicker contains "77-78-7980" which is obviously not a valid date. This would result in:

var f = new Date(7980, 77, 77);
=> Date 7986-08-15T22:00:00.000Z

Which is probably not the desired result.

The reason for this is explained on the MDN site:

> Where Date is called as a constructor with more than one argument, if values are greater than their logical range (e.g. 13 is provided as the month value or 70 for the minute value), the adjacent value will be adjusted. E.g. new Date(2013, 13, 1) is equivalent to new Date(2014, 1, 1).


A better way to solve the problem is:

const stringToDate = function(dateString) {
  const [dd, mm, yyyy] = dateString.split("-");
  return new Date(`${yyyy}-${mm}-${dd}`);
};

console.log(stringToDate('04-04-2019'));
// Date 2019-04-04T00:00:00.000Z

console.log(stringToDate('77-78-7980'));
// Invalid Date

This gives you the possibility to handle invalid input.

For example:

const date = stringToDate("77-78-7980");

if (date === "Invalid Date" || isNaN(date)) {
  console.log("It's all gone bad");
} else {
  // Do something with your valid date here
}

Solution 9 - Javascript

In my case

new Date("20151102034013".replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, "$1-$2-$3T$4:$5:$6"))

Result: Mon Nov 02 2015 04:40:13 GMT+0100 (CET) then I use .getTime() to work with milliseconds

Solution 10 - Javascript

You can use an external library to help you out.

http://www.mattkruse.com/javascript/date/source.html

getDateFromFormat(val,format);

Also see this: https://stackoverflow.com/questions/1576753/parse-date-string-in-javascript

Solution 11 - Javascript

Take a look at Datejs for all those petty date related issues.. You could solve this by parseDate function too

Solution 12 - Javascript

You can just:

var f = new Date(from.split('-').reverse().join('/'));

Solution 13 - Javascript

You could use a Regexp.

var result = /^(\d{2})-(\d{2})-(\d{4})$/.exec($("#datepicker").val());
if (result) {
    from = new Date(
        parseInt(result[3], 10), 
        parseInt(result[2], 10) - 1, 
        parseInt(result[1], 10)
    );
}

Solution 14 - Javascript

let dateString  = '13-02-2021' //date string in dd-mm-yyyy format

let dateArray = dateString.split("-");
//dateArray[2] equals to 2021
//dateArray[1] equals to 02
//dateArray[0] equals to 13

// using template literals below

let dateObj = new Date(`${dateArray[2]}-${dateArray[1]}-${dateArray[0]}`);

// dateObj equals to Sat Feb 13 2021 05:30:00 GMT+0530 (India Standard Time)

//I'm from India so its showing GMT+0530

P.S : Always refer docs for basics, MDN or DevDocs

Solution 15 - Javascript

new Date().toLocaleDateString();

simple as that, just pass your date to js Date Object

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser559142View Question on Stackoverflow
Solution 1 - JavascriptAdrian LynchView Answer on Stackoverflow
Solution 2 - JavascriptepascarelloView Answer on Stackoverflow
Solution 3 - JavascriptJoeView Answer on Stackoverflow
Solution 4 - JavascriptMakahView Answer on Stackoverflow
Solution 5 - JavascriptSaad Imran.View Answer on Stackoverflow
Solution 6 - JavascriptDiodeus - James MacFarlaneView Answer on Stackoverflow
Solution 7 - JavascriptPrisoner ZEROView Answer on Stackoverflow
Solution 8 - JavascriptJames HibbardView Answer on Stackoverflow
Solution 9 - Javascriptargene santoniView Answer on Stackoverflow
Solution 10 - JavascriptwesbosView Answer on Stackoverflow
Solution 11 - JavascriptBaz1ngaView Answer on Stackoverflow
Solution 12 - JavascriptDmitry ArefevView Answer on Stackoverflow
Solution 13 - JavascriptChaosPandionView Answer on Stackoverflow
Solution 14 - JavascriptPrem GView Answer on Stackoverflow
Solution 15 - JavascriptNikhil SengarView Answer on Stackoverflow