Javascript Date.parse() returns null in Firefox

Question

I am trying to convert a dates string to milliseconds using Date.parse().

According the web docs :

Only the ISO 8601 format (YYYY-MM-DDTHH:mm:ss.sssZ) is explicitly specified to be supported. Other formats are implementation-defined and may not work across all browsers.

I have this date string which is created with datepicker() and timepicker() but Date.parse() returns null in Firefox but works fine in Chrome and it seems to work here in the snippet below. How can I make this cross browsers?

$(document).ready(function(){

var minDate = new Date();

//datepicker
$( ".datepicker" ).datepicker({minDate: minDate,dateFormat:'yy-mm-dd'});

$('.timepicker').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    minTime: '00',
    maxTime: '11:30pm',
    startTime: '00:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
});

});

/*

ONCLICK
CONVERT 

*/
$(document).on('click','.convert',function(){

//grab date
var date = $('.datepicker').val();

//grab time
var time = $('.timepicker').val();

//convert datetime to miliseconds
var datetime =date + 'T' + time + ':00.000Z';//YYYY-MM-DDTHH:mm:ss.sssZ
var milliseconds = Date.parse(datetime);//2023-02-28T04:00:00.000Z

console.log('datetime : ' + datetime);
console.log('miliseconds : ' + milliseconds);


});

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<!--TIMEP[PICKER JS]-->
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="js/jquery.timepicker.min.js"></script>

<!--TIMEPICKER CSS-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<link rel="stylesheet" href="css/jquery.timepicker.min.css">


<h3>Convert date string to milliseconds</h3>

<label>Select date</label>
<input class="datepicker" type="text" placeholder="Date">

<label>Select time</label>
<input  class="timepicker" type="text" placeholder="Universal Military Time (24H)">

<button class="convert">Convert time</button>

I suspect that the issue may be in you trying to create your own datetime string and passing that directly to the parse function. It's possible that something is happening there. I'd look at maybe utilizing `date.toISOString()` in your approach, rather than passing your own string. The SO example works for me in FireFox. — Josh, Feb 28 '23 at 20:54
@Josh: Would you suggest to add one more step to the conversion? date.toISOString() or datetime.toISOString()? What are we passing to Date.parse()? — Grogu, Feb 28 '23 at 21:05

score 0 · Answer 1 · answered Feb 28 '23 at 22:09

I did find the answer to my question. As suggested by Josh, do not create your own date string or else it will cause Date.parse() to break in certain browsers as explained here. Write a function like below :

//convert datetime to miliseconds
var datetime = date + 'T' + time + ':00.000Z';//2023-02-28T04:00:00.000Z
var milliseconds = parseDateTime(datetime) / 1000;//YYYY-MM-DDTHH:mm:ss.sssZ

console.log('datetime : ' + datetime);
console.log('milliseconds : ' + milliseconds);

/**
 * 
 * 
 * 
 * parseDateTime
 * 
 * 
 * 
 */
function parseDateTime(s) {
  var b = s.split(/\D/);
  return new Date(b[0],b[1]-1,b[2],b[3],b[4],b[5])
}

Javascript Date.parse() returns null in Firefox

1 Answers1