Jquery Slider Month/Year

Question

I have some code and it is currently displaying the date in the following format on the slider : Tue Jan 01 2013 - Wed Jan 01 2014, However, I am wanting it to display in the fo

Answer 1

The new Date() has invalid date time format, change it to 'yyyy-mm-ddThh:min:ss', then it should work.

Check JavaScript Date to figure out how to construct one Date object.

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: new Date('2012-01-01T00:00:00').getTime() / 1000,
      max: new Date('2019-01-01T00:00:00').getTime() / 1000,
      step: 864,
      values: [ new Date('2012-03-01T00:00:00').getTime() / 1000, new Date('2014-01-01T00:00: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());

  });

  
  
  
  
  

  date range:
  

 

Update: below is the simple month/year ranger, The primary modifications are adjust some description texts and the date format.

function formatDate(date) {
  var monthNames = [
    "January", "February", "March",
    "April", "May", "June", "July",
    "August", "September", "October",
    "November", "December"
  ];

  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return monthNames[monthIndex] + ' ' + year;
}

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: new Date('2012-01-01T00:00:00').getTime(),
      max: new Date('2019-01-01T00:00:00').getTime(),
      step: 86400000,
      values: [ new Date('2012-03-01T00:00:00').getTime(), new Date('2014-01-01T00:00:00').getTime() ],
      slide: function( event, ui ) {
        $( "#amount" ).val( formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])) );
      }
    });
    $( "#amount" ).val( formatDate((new Date($( "#slider-range" ).slider( "values", 0 )))) +
      " - " + formatDate((new Date($( "#slider-range" ).slider( "values", 1 )))));

  });

  
  
  
  
  

  month range: