Issue with extracting and parsing date from a string using JavaScript

Question

I'm currently working on a JavaScript function that extracts a date from a string and then parses it to set the start and end dates for a date filter. However, I'm encountering an issue with the date parsing part.

$("#startDateF").data("initialValue", startDateString);

$("#endDateF").data("initialValue", endDateString);

These lines are getting used in a reset button function which will retrieve these values and set the current values of the date filters back to the initialValues.

Here is the code:

var cDate = dText.match(/\d{2}-\d{2}-\d{4}/)[0];
console.log(cDate);
let initialStartDate = new Date(cDate);
let initialEndDate = new Date(initialStartDate.getFullYear(), initialStartDate.getMonth() + 1, initialStartDate.getDate());
startDateString = formatDate(initialStartDate);
endDateString = formatDate(initialEndDate);
$("#startDateF").data("initialValue", startDateString);
$("#endDateF").data("initialValue", endDateString);

function formatDate(date) {
    let day = ("0" + date.getDate()).slice(-2);
    let month = ("0" + (date.getMonth() + 1)).slice(-2);
    let year = date.getFullYear();
    return day + "-" + month + "-" + year;
}

I tried using the formatDate function to format the date, but it seems it is not working correctly. When I used this method it is setting startDate and endDate to aN-aN-NaN. I am expecting that the startDate is set to cDate and endDate is set to the same date, but the in the next month. E.g., cDate = 16-04-2023 startDate = 16-04-2023 endDate = 16-05-2023

mplungjan · Accepted Answer · 2023-07-11T13:26:50.897

Assuming your cDate is dd-mm-yyyy then I suggest this simplified script

const formatDate = d => d.toJSON().slice(0, 10).split('-').reverse().join('-')

const getDates = dText => {
  let initialStartDate = dText.match(/\d{2}-\d{2}-\d{4}/)[0]; // no validation
  const [dd, mm, yyyy] = initialStartDate.split("-");
  let initialEndDate = new Date(yyyy, mm, dd, 15, 0, 0, 0); // not subtracting 1 from the 0 based month gives us next month - ignoring the fact that 31st of Feb will be 2 or 3rd of March
  return {
    startDate: initialStartDate,
    endDate: formatDate(initialEndDate)
  }
};
let dateStrings = getDates("16-04-2023");
$("#startDateF").text(dateStrings.startDate); // change to data() after testing
$("#endDateF").text(dateStrings.endDate);

// test to show the rollover:
dateStrings = getDates("31-01-2020");
console.log(dateStrings)

dateStrings = getDates("31-02-2020"); // this is an invalid date, we do not handle that in the above script
console.log(dateStrings)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="startDateF"></span>
<span id="endDateF"></span>

Surely "16-14-2023" should return an invalid date or throw an error? There is also [*JavaScript function to add X months to a date*](https://stackoverflow.com/questions/2706125/javascript-function-to-add-x-months-to-a-date). — RobG, Jul 11 '23 at 12:29
That was a typo. The dates are in European format so the dupe is less suited for this — mplungjan, Jul 11 '23 at 13:19

score 0 · Answer 2 · answered Jul 09 '23 at 07:52

There are no issues on your code except when you parse the initialStartDate variabe The Date constructor in JavaScript does not directly accept date strings in the format 'dd-mm-yyyy'. To create a Date object from a custom date string, you'll need to parse the individual day, month, and year components and pass them as arguments to the constructor in the appropriate order.

so basically you could just add this

var day = parseInt(cDate.split('-')[0], 10);
var month = parseInt(cDate.split('-')[1], 10);
var year = parseInt(cDate.split('-')[2], 10);

let initialStartDate = new Date(year, month, day);

and will work just fine

here is the full code tho

var cDate = dText.match(/\d{2}-\d{2}-\d{4}/)[0];
console.log(cDate);
var day = parseInt(cDate.split('-')[0], 10);
var month = parseInt(cDate.split('-')[1], 10);
var year = parseInt(cDate.split('-')[2], 10);

let initialStartDate = new Date(year, month, day);

let initialEndDate = new Date(initialStartDate.getFullYear(), initialStartDate.getMonth() + 1, initialStartDate.getDate());

startDateString = formatDate(initialStartDate);
endDateString = formatDate(initialEndDate);
$("#startDateF").data("initialValue", startDateString);
$("#endDateF").data("initialValue", endDateString);
function formatDate(date) {
    let day = ("0" + date.getDate()).slice(-2);
    let month = ("0" + (date.getMonth() + 1)).slice(-2);
    let year = date.getFullYear();
    return day + "-" + month + "-" + year;
}

I hope it helps :D

This solution does work but it was printing the value for initialStartDate and endDate like this initialStartDate = Sun Apr 16 2023 00:00:00 GMT 5:30 (IST) {}, year=2023 , month =3, day = 16 which was causing the dates to go undefined when formatting so I used this var [day, month, year] = cDate.split('-').map(Number); — jessiepinkman, Jul 09 '23 at 10:32
So I believe after splitting the variables you parse them in a date constructor, Which was what I told you in a first place, if so please accept my answer — jasjastone, Jul 10 '23 at 12:12
my reputation is less than 15 so I am not able to cast a vote. Also I need help in this question -[link](https://stackoverflow.com/questions/76658745/numeric-values-not-displaying-in-web-page-even-though-available-in-server-respo) — jessiepinkman, Jul 11 '23 at 04:38

Issue with extracting and parsing date from a string using JavaScript

2 Answers2