Question

71

How to validate the date time in datepicker?

rated 0 times [ 74] [ 3] / answers: 1 / hits: 19839 / 12 Years ago, fri, march 23, 2012, 12:00:00

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 compare 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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

angelr

Add To Favorites

Follow

Total Points: 399

Total Questions: 96

Total Answers: 101

Location: Finland

Member since Sun, May 21, 2023

1 Year ago

answered 12 Years ago brandt · Accepted Answer

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.net/j82JJ/31/

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

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

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

Steps- I have commented 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 uncomment out the line I have commented 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.com/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!