Jquery date time validation in sharepoint designer

try:

$(document).ready(function() {
    $('#st, #et').change(function() {
        var sd = Date.parse("01/01/01 " + $('#st').val());
        var ed = Date.parse("01/01/01 " + $('#et').val());
        if (isNaN(sd)) {
            alert('end time not a time');
        } else if (isNaN(ed)) {
            alert('end time not a time');
        } else if (sd >= ed) {
            alert('end time always greater then start time');
        }
    });
});

Select allOpen in new window

http://jsfiddle.net/JonNorman/WbucA/

You will also need to check for fields being blank, I have also checked when et is changed.

Thanks for the reply.
The #st, #et are not number, datetimecontrol time drop down list shows 12AM to 12PM.
the default for both st and et is 12AM.
I implement your code and the alert got fired no mater what time I selected.
The validation is not working with am/pm format.

 $(document).ready(function(){      $("#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff3_new_ff3_newDateHours,#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff2_new_ff2_newDateHours").change(function() {        
      var st = Date.parse("01/01/01 " + $('#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff2_new_ff2_newDateHours').val());
    var et = Date.parse("01/01/01 " + $('#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff3_new_ff3_newDateHours').val());
       if (st >= et) {
            alert('end time always greater then start time');
        }

     var sd =  $("#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff2_new_ff2_newDate").val();
 //set enddate = startdate, always same date      
 $("#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff3_new_ff3_newDate").val(sd);
 //hide enddate calendar and field      $("#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff3_new_ff3_newDateDatePickerImage").hide();
 $("#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff3_new_ff3_newDate").hide();
       
          });
         
         });
         
   </script>
What i am doing is to remove the date section of the end date in sharepoint datetimecontrol and force the end date to HAVE TO BE the same DATE as start date, only allowing for a different time. so the user can only pick an end TIME. end time must be greater than start time.  Thanks in advance.

In that case can you have 0 as the value for 12AM, 1 for 1AM, 2 for 2AM... 12 for 12PM, 13 for 1PM etc?

<select>
  <option value="0">12AM</option>
  <option value="1">1AM</option>
  <option value="2">2AM</option>
  <option value="3">3AM</option>
  <option value="4">4AM</option>
  <option value="5">5AM</option>
  <option value="6">6AM</option>
  ...
  <option value="23">11PM</option>
</select>

Select allOpen in new window

And then you can simply check parseInt($("#st").val())>=parseInt($("#et").val());

If you can't then can you give an example of what $("#st").val() is so I can write some sort of regular expression to get to the comparison you need. The easiest way of doing this would be to paste in the source as viewed by a web browser for the two dropdowns (<select>s).

For the hours
<select name="ctl00$m$g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85$ff3_new$ff3_newDateHours" id="ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff3_new_ff3_newDateHours" dir="ltr">
                              <option selected="selected" value="12 AM">12 AM</option>
                              <option value="1 AM">1 AM</option>
                              <option value="2 AM">2 AM</option>
                              <option value="3 AM">3 AM</option>
                              <option value="4 AM">4 AM</option>
                              <option value="5 AM">5 AM</option>
                              <option value="6 AM">6 AM</option>
                              <option value="7 AM">7 AM</option>
                              <option value="8 AM">8 AM</option>
                              <option value="9 AM">9 AM</option>
                              <option value="10 AM">10 AM</option>
                              <option value="11 AM">11 AM</option>
                              <option value="12 PM">12 PM</option>
                              <option value="1 PM">1 PM</option>
                              <option value="2 PM">2 PM</option>
                              <option value="3 PM">3 PM</option>
                              <option value="4 PM">4 PM</option>
                              <option value="5 PM">5 PM</option>
                              <option value="6 PM">6 PM</option>
                              <option value="7 PM">7 PM</option>
                              <option value="8 PM">8 PM</option>
                              <option value="9 PM">9 PM</option>
                              <option value="10 PM">10 PM</option>
                              <option value="11 PM">11 PM</option>


minutes
<select name="ctl00$m$g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85$ff3_new$ff3_newDateMinutes" id="ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff3_new_ff3_newDateMinutes" dir="ltr">
                              <option selected="selected" value="00">00</option>
                              <option value="05">05</option>
                              <option value="10">10</option>
                              <option value="15">15</option>
                              <option value="20">20</option>
                              <option value="25">25</option>
                              <option value="30">30</option>
                              <option value="35">35</option>
                              <option value="40">40</option>
                              <option value="45">45</option>
                              <option value="50">50</option>
                              <option value="55">55</option>

                        </select>

Thank you!

$(document).ready(function() {
    var baseDateId = "#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_";
    $(baseDateId+"ff3_new_ff3_newDateHours, "+baseDateId+"ff2_new_ff2_newDateHours, "+baseDateId+"ff2_new_ff2_newDateMinutes, "+baseDateId+"ff3_new_ff3_newDateMinutes")).change(function() {
        var sdHours = $(baseDateId+""ff2_new_ff2_newDateHours").val().split(" ");
        var sdMins = $(baseDateId+"ff2_new_ff2_newDateMinutes").val();
        var sd = new Date("01/01/01 " + sdHours[0] + ":" + sdMins + " " + sdHours[1]);
        var edHours = $(baseDateId+""ff3_new_ff3_newDateHours").val().split(" ");
        var edMins = $(baseDateId+"ff3_new_ff3_newDateMinutes").val();
        var ed = new Date("01/01/01 " + edHours[0] + ":" + edMins + " " + edHours[1]);
        if (isNaN(sd)) {
            alert('end time not a time');
        } else if (isNaN(ed)) {
            alert('end time not a time');
        } else if (sd >= ed) {
            alert('end time always greater then start time');
        }
    });
});

Select allOpen in new window

I have assumed that ff2 is startdate and ff3 is enddate, I might have got some of the ids wrong, I have set up a string baseDateID as all the elements seem to start with that string. What it is doing is creating an array in sdHours and edHours which has 12 for first element and AM for last element if the value was "12 AM", then it creates a date (1st Jan 2001 at the time selected). This means that you can compare the two times. The compare checks greater than or equal, if you are happy to accept equal dates change line 14 to } else if (sd > ed) {.

Good Luck, I think you are nearly there!

It works just the way I want.  Except the syntax might be not right .   $(baseDateId+"ff3_new_ff3_newDateHours, "+baseDateId+"ff2_new_ff2_newDateHours, "+baseDateId+"ff2_new_ff2_newDateMinutes, "+baseDateId+"ff3_new_ff3_newDateMinutes")).change(function() {
it doesn't fire if using $(baseDateId+"ff3_new_ff3_newDateHours, " ... multiple selectors.

If I use $("#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff3_new_ff3_newDateHours,#ctl00_m_g_8de45819_92eb_4eea_a5d0_4bf3d2b38a85_ff2_new_ff2_newDateHours").change(function() {    

It works but a little bit long...  Thanks a lot.

Everything works now.  It had an extra ')' in previous change event.

I appreciated your guidance.

ah yes, I can see that now, it was my fault, sorry.