Search code examples
javascriptfilterslideruisliderunix-timestamp

How to create a Javascript date filter as slider (not calendar)?


I am creating a Javascript based date filter to filter files, which has date_created metadata. I wish to create that date filter as a range slider with max/min (are static) and current selection. For this going to use jQuery UI slider component. Visible output has to be always in a format dd/mm/yyyy and I will show it for min/max and from/to range selectors.

While developing, I came to a question, which format I have to use on a hidden part to make steps inside the slider. Each step has to be 1 day. I decided to try with unix on hidden side. So I can easily convert unix into dd/mm/yyyy with my Javascript function:

function unixToDate(timestamp){
  var date = new Date(timestamp * 1000);
  var d = date.getDate(),
      m = date.getMonth() + 1,
      y = date.getFullYear();
  return d + "/" + m + "/" + y;
}

And this function works well for me, however if step == 1day, I need 1 day value in unix to make addition (+) and subtraction (-) when user moves slider. So which is that value of 1 day in unix, which I can add or subtract to when changing range?

Or any other alternatives to make date filter as slider…


Solution

  • One day is equal to currentTimeInUnixTime+(60*60*24) That is because Unix time is simply the seconds since the beginning of epoch. 60 seconds make one minute. 60 minutes make an hour. And 24 hours make a day. Multiply them all, and add them to the current Unix time you have to get the Unix time for the next day.