Javascript date range slider is working in chrome but not in other browser?

Question

I have a javascript date range slider code which is working fine in Chrome browser but not working in other browser.

This is the code :

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: new Date('2012.01.01').getTime() / 1000,
      max: new Date('2019.01.01').getTime() / 1000,
      step: 86400,
      values: [ new Date('2013.01.01').getTime() / 1000, new Date('2014.01.01').getTime() / 1000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( (new Date(ui.values[ 0 ] *1000).toDateString() ) + " - " + (new Date(ui.values[ 1 ] *1000)).toDateString() );
      }
    });
    $( "#amount" ).val( (new Date($( "#slider-range" ).slider( "values", 0 )*1000).toDateString()) +
      " - " + (new Date($( "#slider-range" ).slider( "values", 1 )*1000)).toDateString());

  });


  </script>

  <p>
  <label for="amount">Date range:</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/>
</p>

<div id="slider-range"></div>

Note: I think, Date function in not supporting in other browser like Firefox, IE8+, Safari

Answer 1

Your code uses the datestring constructor, which is inconsistent between browsers. You should check the Date specification to use a standard format such as :

new Date('December 17, 1995 03:24:00');

or

new Date(1995, 11, 17, 03, 24, 0, 0); // Beware of the month param starting at 0 !

Check below your code snippet updated accordingly (tested with firefox & chrome):

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: new Date('January 01, 2012 00:0:00').getTime() / 1000,
      max: new Date('January 01, 2019 00:0:00').getTime() / 1000,
      step: 86400,
      values: [ new Date('January 01, 2013 00:0:00').getTime() / 1000, new Date('January 01, 2014 00:0:00').getTime() / 1000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( (new Date(ui.values[ 0 ] *1000).toDateString() ) + " - " + (new Date(ui.values[ 1 ] *1000)).toDateString() );
      }
    });
    $( "#amount" ).val( (new Date($( "#slider-range" ).slider( "values", 0 )*1000).toDateString()) +
      " - " + (new Date($( "#slider-range" ).slider( "values", 1 )*1000)).toDateString());

  });


  </script>

  <p>
  <label for="amount">Date range:</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/>
</p>

<div id="slider-range"></div>