CODEWITHSUNDEEP
javascriptjquerydatepicker
user3653365
user3653365

Reputation: 65

jQuery datepicker- range with 3 fields?

I'm creating a web form, and I have the following 3 input fields that I am using Date Picker for: Arrive By, Start Date, and End Date. (It's for a trade show exhibit)

The shipment needs to be there by the "Arrive By" date, and the trade show lasts from "Start Date" until "End Date".

I was able to create the range for the "Start Date" & "End Date" fields, but now the client wants to ensure that the start/end range cannot be before the "Arrive By" date, and nothing can be before the current date.

I assume if I limit the "Arrive By" date to not be able to pick earlier than the current date, and then impose the entered "Arrive By" date as the beginning of the range for "Start Date" I will achieve what they want. (Do I need to disable the start/end fields until an arrive by date is entered?)

Unfortunately, this would seem to require lots of advanced code which is a little out of my skill set. Hopefully someone can get me started in the right direction.

Upvotes: 0

Views: 352

Answers (2)

Coda17
Coda17

Reputation: 599

You have a couple of options. You could do validation on submit to make sure the user selected appropriate dates that meet the requirements or you could use the Datepicker restrict date range options to limit the available dates based on the selected value of the other Datepicker. Take a look at the Datepicker select a date range feature to see how you can set the min/max selectable date.

Here's an example JSFiddle that demonstrates this. This wasn't thoroughly tested, so you might have to play with the behavior to get it exactly how you want (for instance, you probably want to change the to min date as well when you change the arrive date).

HTML:

<label for="arrive">Arrive</label>
<input type="text" id="arrive" name="arrive">
<br />
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">

Javascript:

$("#arrive").datepicker({
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "minDate", selectedDate);
    }
});
$("#from").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
        $("#arrive").datepicker("option", "maxDate", selectedDate);
    }
});
$("#to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    }
});

Upvotes: 1

PulseLab
PulseLab

Reputation: 1579

Is the Arrive By date captured in a seperate field (another datepicker?) to the field that you're configuring with the start and end date range?

If ArriveBy is in a datepicker, you can throw an event when a date is selected, and then use that to change a property on the other date picker to make it the new minimum(/maximum?) From memory it's something like

$("#ArriveBy").datepicker({
      onClose: function(selected) {
        $("#StartEndRange").datepicker("option", "minDate", selected);
      }
});

Not 100% if that exactly answers your scenario, but hopefully is of some help.

Upvotes: 0

Related Questions