CODEWITHSUNDEEP
jqueryjquery-uidatepicker
dvlden
dvlden

Reputation: 2462

Set restrictions of two datepickers on same page

I am trying to arrange some restrictions of two datepickers that are on the same page, but I don't have any clues at all what are my choices. So any hint if possible ?

var datepickerFrom = $("#stats-datepicker-from");

datepickerFrom.datepicker({
  showOtherMonths: true,
  selectOtherMonths: true,
  dateFormat: "d MM, yy",
  yearRange: "-1:+1",
  maxDate: new Date()
}).parent().find(".btn").on("click", function (e) {
  e && e.preventDefault();
  datepickerFrom.focus();
});

datepickerFrom.datepicker("setDate", "-1");
datepickerFrom.datepicker("widget").css({ "margin-left": -datepickerFrom.parent().find(".btn").outerWidth() });


var datepickerTo = $("#stats-datepicker-to");

datepickerTo.datepicker({
  showOtherMonths: true,
  selectOtherMonths: true,
  dateFormat: "d MM, yy",
  yearRange: "-1:+1",
  maxDate: new Date()
}).parent().find(".btn").on("click", function (e) {
  e && e.preventDefault();
  datepickerTo.focus();
});

datepickerTo.datepicker("setDate", "0");
datepickerTo.datepicker("widget").css({ "margin-left": -datepickerTo.parent().find(".btn").outerWidth() });

The only restriction set so far is that date can't be selected if it's after today, as per maxDate: new Date().

What restrictions do I need exactly ? Well only common ones that are crossing my mind.

Example:

1) If date of datepickerFrom is "1 August, 2014", date of datepickerTo can't be selected as same date or past times of datepickerFrom (e.g. 8 July, 2014).

2) If user go and select at first datepickerTo, then opposite of 1)

Is this even possible ?

Upvotes: 0

Views: 116

Answers (1)

Callebe
Callebe

Reputation: 1097

you can change maxDate and minDate of datepicker when one of them is selected.

datepickerFrom.datepicker({
  showOtherMonths: true,
  selectOtherMonths: true,
  dateFormat: "d MM, yy",
  yearRange: "-1:+1",
  maxDate: new Date(),
  onSelect: function () {
      datepickerTo.datepicker('option', 'minDate', datepickerFrom.datepicker('getDate'));
  }
})

datepickerTo.datepicker({
  showOtherMonths: true,
  selectOtherMonths: true,
  dateFormat: "d MM, yy",
  yearRange: "-1:+1",
  maxDate: new Date(),
  onSelect: function () {
      datepickerFrom.datepicker('option', 'maxDate', datepickerTo.datepicker('getDate'));
  }
})

Upvotes: 2

Related Questions