I have two datetimepickers in a form to enter the start time and end time.
The ID of the start time is "startTime" and that of end time is "endTime".

var startTime = document.getElementById("startTime");
var endTime = document.getElementById("endTime");

if (new Date(startTime.value).getTime() > new Date(endTime.value).getTime()) {
     alert("End Time should be greater than Start Time");
     return false;
}

I tried to pare the start time and end time and validated that the start time should not be greater than the end time.
Now, I want to write a validation, so that the end time should aleast be greater than the start time by 1 hour.
sampleLink: DateTimePicker Example

$('#startTime').datetimepicker({
    onClose: function(dateText, inst) {
        var endDateTextBox = $('#endTime');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var start = $(this).datetimepicker('getDate');
        $('#endTime').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
});
$('#endTime').datetimepicker({
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#startTime');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var end = $(this).datetimepicker('getDate');
        $('#startTime').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
    }
});

I tried with this and got the start time and end time to be the same. But I'm not sure how to increase the end time by 1 hour.

For example, if the starttime value is 03-23-2012 10:00 AM i want the endtime as 03-23-2012 11:00 AM Can any one help me on this please?

Thanks

I have two datetimepickers in a form to enter the start time and end time.
The ID of the start time is "startTime" and that of end time is "endTime".

var startTime = document.getElementById("startTime");
var endTime = document.getElementById("endTime");

if (new Date(startTime.value).getTime() > new Date(endTime.value).getTime()) {
     alert("End Time should be greater than Start Time");
     return false;
}

I tried to pare the start time and end time and validated that the start time should not be greater than the end time.
Now, I want to write a validation, so that the end time should aleast be greater than the start time by 1 hour.
sampleLink: DateTimePicker Example

$('#startTime').datetimepicker({
    onClose: function(dateText, inst) {
        var endDateTextBox = $('#endTime');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var start = $(this).datetimepicker('getDate');
        $('#endTime').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
});
$('#endTime').datetimepicker({
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#startTime');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        var end = $(this).datetimepicker('getDate');
        $('#startTime').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
    }
});

I tried with this and got the start time and end time to be the same. But I'm not sure how to increase the end time by 1 hour.

For example, if the starttime value is 03-23-2012 10:00 AM i want the endtime as 03-23-2012 11:00 AM Can any one help me on this please?

Thanks

• javascript
• jquery
• jquery-ui
• jquery-plugins
• jquery-ui-datepicker

• You're using a datepicker that allows times? What widget are you using? – Andrew Whitaker Commented Mar 23, 2012 at 12:04
• OOps! I forget to mention that, it's a datetimepicker. – saran Commented Mar 23, 2012 at 12:06
• Can you provide a link to that plugin? – Andrew Whitaker Commented Mar 23, 2012 at 12:07
• Hi Andrew, I have included in the question now. – saran Commented Mar 23, 2012 at 12:11
• What are you using for validation? – Dave Commented Mar 23, 2012 at 13:05

1 Answer 1

Alrighty here it is 1st one is the version you want and rest all you can use to debug.

**Final Solution adds + 1 ** http://jsfiddle/j82JJ/31/

simple date validation demo http://jsfiddle/j82JJ/5/

Time Validation http://jsfiddle/j82JJ/18/

Also if you un-ment out the code I have mented to generate the validation then you will never e into a situation where you need validation. :)

Steps- I have mented out one line so now you can select start date and then on the second text box select end date but smaller then the start date and the alert will appear.

'Also note:' if you unment out the line I have mented out in jsfiddle datetimepicker will never allow you to select date lesser then start date on this setting.

HTML

<div style="margin: 15px;">
    <input id="example16_start" type="text" value="" name="test">
    <input id="example16_end" type="text" value="" name="test">
</div>
​

Jquery Code Details http://trentrichardson./examples/timepicker/ (All 3 js fiddle have Jquery code in it) 1st one should be reveland to you:

All you need is that 'OnSelect' event of start date you want to do this:

onSelect: function (selectedDateTime){

  var startDate = $('#example16_start').datetimepicker('getDate');
   var endDate = new Date(parseFloat(startDate.setHours(startDate.getHours()+1)));

   //Get the ending date datepart
   var endDateDatePart = endDate.getFullYear() + '/' + endDate.getMonth() + '/' + endDate.getDate();

   //calculate the ending date time part including AM/PM
   var endDateTimePart;
   if (endDate.getHours() > 12) { endDateTimePart = endDate.getHours()-12 + ':' + endDate.getMinutes() + ' PM';} else {endDateTimePart = endDate.getHours() + ':' + endDate.getMinutes() + ' AM';}
   $('#example16_end').datetimepicker('setDate', endDateDatePart + ' ' + endDateTimePart );


}

Phew and this might help you as well Found way after understanding this new datetimepicker : Jquery datetimepicker - Advance time by 1 hour

** (I name few vars in jsfiddle as your name srry)

this will help, if you want I can cut down some code but you can do that as well, good link though, cheers!