开发者

JQuery datepicker- 2 inputs/textboxes

开发者 https://www.devze.com 2022-12-07 23:56 出处:网络
Two input boxes: when I set the first one, I want the second one to be be one day after the date s开发者_如何学编程elected in the first. I am using Keith Wood\'s jquery plugin:http://keith-wood.name/d

Two input boxes: when I set the first one, I want the second one to be be one day after the date s开发者_如何学编程elected 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.


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


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);
}


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消