CODEWITHSUNDEEP
jquerydatepickerdatefieldhyperlink
Jason
Jason

Reputation: 363

JQuery datepicker- 2 inputs/textboxes

Two input boxes: when I set the first one, I want the second one to be be one day after the date selected in the first. I am using Keith Wood's jquery plugin: http://keith-wood.name/datepickRef.html.

Using altField: just keeps the same in the two fields, but I want to get 1 day after in the second input field.

Upvotes: 0

Views: 3321

Answers (3)

Russ Cam
Russ Cam

Reputation: 125528

Take a look at my answer here - JQuery datepicker- 2 inputs/textboxes and restricting range

One way to do it would be to use the beforeShow property to restrict value in the second datepicker. Alternatively, define an onSelect handler that updates the second input when a date is chosen in the first.

Working Demo Note: this is based on the jQuery DatePicker and not Keith Woods'.

EDIT:

As stated on the datepick plugin page -

This plugin forms the basis for the jQuery UI Datepicker. It is made available as a separate plugin since the UI team desired simplified functionality for their version.

thus the code based on the jQuery UI Datepicker will work with Keith's datepicker.

Code from demo

$(function () 
{

    $('#txtStartDate, #txtEndDate').datepicker(
    {
        showOn: "both",
        dateFormat: "dd M yy",
        onSelect: insertOtherDate,
        firstDay: 1, 
        changeFirstDay: false
    });   
});

function insertOtherDate(value, date, inst) {

     var firstDate = new Date(value);
     var datepickerInput = (date.id === 'txtStartDate') ? 'txtEndDate' : 'txtStartDate';
     var dateAdjust = (date.id === 'txtStartDate') ? 1 : -1;
     var secondDate = new Date(firstDate.getFullYear(), firstDate.getMonth(), firstDate.getDate() + dateAdjust);   

     $('#' + datepickerInput).datepicker('setDate', secondDate);
}

Upvotes: 0

kgiannakakis
kgiannakakis

Reputation: 104188

Create an onSelect event from the datepicker. In the callback read the value, convert the date to UNIX TIMESTAMP(you can use $.datepick.TIMESTAMP), add 24*60*60000 and configure the second input accordingly.

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532605

Define an onSelect handler that updates the second field with a date that is one later than the one chosen for the first field.

Upvotes: 1

Related Questions