CODEWITHSUNDEEP
javascriptjquerydate-rangedaterangepicker
mastersuse
mastersuse

Reputation: 988

JQuery: How to set datepicker starting date in range

I am trying to set the start and end date of a date range of a datepicker(), where the starting date of the range is 7 days in the past and the ending date is yesterday.

Currently I have it working so that the starting date of the range is 7 days in the past however I don't know how to set the ending date to yesterday.

I have tried the following, but it doesn't work as I expect it to:

var mindate = new Date();
    mindate.setDate(mindate.getDate() - 7);
    $('#date').datepicker({
        language: 'en',
            range : true,
            minDate : mindate,
            maxDate : new Date() - 1,   //I guess the problem is here
            multipleDates: true,
            multipleDatesSeparator: " - "
    })

Upvotes: 1

Views: 2298

Answers (3)

Florian sp1rit
Florian sp1rit

Reputation: 585

In HTML5 you already have a <input type="date"> so you don't need any kind of jQuery.

Unless you need support for legacy browsers I can only recommend using HTML5 over jquery.

HTML

<input type="date" id="date">

Vanilla JS

function getHtmlDateString(date) {
  var dd = date.getDate();
  var mm = date.getMonth()+1; //January is 0!
  var yyyy = date.getFullYear();
  if(dd<10){
    dd='0'+dd
  } 
  if(mm<10){
    mm='0'+mm
  } 

  return yyyy+'-'+mm+'-'+dd;
}

var min = new Date();
min.setDate(min.getDate()-7);
document.getElementById("date").setAttribute("min", getHtmlDateString(min));
var max = new Date();
max.setDate(max.getDate()-1);
document.getElementById("date").setAttribute("max", getHtmlDateString(max));

JSFiddle: https://jsfiddle.net/hmqe4sb6/

Upvotes: 1

Dacre Denny
Dacre Denny

Reputation: 30360

One approach would be to compute a maxdate using the same technquie as you have used to compute mindate and then apply that max date value to the maxData parameter of the datepicker() instance:

var mindate = new Date();
mindate.setDate(mindate.getDate() - 7);

/* Compute max date of "yesterday" using same method as 
min date */
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() - 1);

$('#date').datepicker({
    language: 'en',
    range : true,
    minDate : mindate,
    maxDate : maxdate, /* Apply max date to date picker */
    multipleDates: true,
    multipleDatesSeparator: " - "
});

The datepicker() plugin also allows you to specify minDate and maxDate via the number of days relative to today's date. That means you can achieve the same result as shown above without needing to calculate mindate and maxdate by specifying minDate and maxDate as shown:

$('#date').datepicker({
    language: 'en',
    range : true,
    minDate : -7, /* 7 days ago */
    maxDate : -1, /* Yesterday */
    multipleDates: true,
    multipleDatesSeparator: " - "
});

Upvotes: 3

jLL
jLL

Reputation: 36

minDate and maxDate can the amount of days from today.

https://api.jqueryui.com/datepicker/#option-minDate

So all you need to do is 

minDate: -1,
maxDate: -7,

Upvotes: 1

Related Questions