Search code examples
javascriptjqueryjquery-uijquery-slider

How can I make date increase with jquery slider


I have a jquery slider with a minimum value of 1 and maximum value of 41. when I drag the slider i want to be able show corresponding date based on the value of the slider displayed in the textbox. this is my slider code /*slider2 begin */

$("#slider2").slider("value",1);
$("#slider2").slider({
    max:41,
    min:1,
     /*
    change:function(event,ui){
        $("input#days").val(ui.value)
    }
    */
    slide: function(event, ui) {   $("#days").val(ui.value) }
});

$("#days").val($("#slider2").slider("value"));

$("#days").change(function(event) {
  var data = $("#days").val();
  if (data.length > 0)
  {
     if (parseInt(data) >= 0 && parseInt(data) <= 41)
     {
         $("#slider2").slider("option", "value", data);
     }
     else
     {
        if (parseInt(data) < 1)
        {
            $("#days").val("1");
            $("#slider2").slider("option", "value", "1");
        }
        if (parseInt(data) > 41)
        {
            $("#days").val("41");
            $("#slider2").slider("option", "value", "41");
        }
     }
  }
  else
  {
    $("#slider2").slider("option", "value", "1");
  } 
});

Solution

  • If you want to simply add the number of days to the current date, you could use a function like this:

    function addDaysToDate(days) {
      var d = new Date();
      d.setHours(d.getHours() + (24 * days));
      return d;
    }
    

    You would just pass in the numeric days argument (which in the example would be the value from #days) and you would get back a date that many days in the future.