Sudarshan Kalebere Sudarshan Kalebere - 1 month ago 9
Javascript Question

How do I validate start time and end time using select

I have 2 really very big select boxes which I think is not the best approach for selecting the time.
I have to restrict user from selecting start time lesser than end time. I mean the hours of operation during which my hotel is open. Here is what I have done using select.

<div class="weekends">
<label for="">Weekdays</label>
<select class="startTimeWeekDays" name="" id="">
<option value="1am" <?php if( '1am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>1am</option>
<option value="2am" <?php if( '2am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>2am</option>
<option value="3am" <?php if( '3am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>3am</option>
<option value="4am" <?php if( '4am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>4am</option>
<option value="5am" <?php if( '5am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>5am</option>
<option value="6am" <?php if( '6am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>6am</option>
<option value="7am" <?php if( '7am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>7am</option>
<option value="8am" <?php if( '8am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>8am</option>
<option value="9am" <?php if( '9am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>9am</option>
<option value="10am" <?php if( '10am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>10am</option>
<option value="11am" <?php if( '11am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>11am</option>
<option value="12am" <?php if( '12am'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>12am</option>
<option value="1pm" <?php if( '1pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>1pm</option>
<option value="2pm" <?php if( '2pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>2pm</option>
<option value="3pm" <?php if( '3pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>3pm</option>
<option value="4pm" <?php if( '4pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>4pm</option>
<option value="5pm" <?php if( '5pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>5pm</option>
<option value="6pm" <?php if( '6pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>6pm</option>
<option value="7pm" <?php if( '7pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>7pm</option>
<option value="8pm" <?php if( '8pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>8pm</option>
<option value="9pm" <?php if( '9pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>9pm</option>
<option value="10pm" <?php if( '10pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>10pm</option>
<option value="11pm" <?php if( '11pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>11pm</option>
<option value="12pm" <?php if( '12pm'== $this->user->getConcept()->getWeekdayStartTime()): ?>selected<?php endif ?>>12pm</option>
</select>
<select class="endTimeWeekDays" name="" id="">
<option value="1am" <?php if( '1am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>1am</option>
<option value="2am" <?php if( '2am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>2am</option>
<option value="3am" <?php if( '3am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>3am</option>
<option value="4am" <?php if( '4am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>4am</option>
<option value="5am" <?php if( '5am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>5am</option>
<option value="6am" <?php if( '6am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>6am</option>
<option value="7am" <?php if( '7am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>7am</option>
<option value="8am" <?php if( '8am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>8am</option>
<option value="9am" <?php if( '9am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>9am</option>
<option value="10am" <?php if( '10am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>10am</option>
<option value="11am" <?php if( '11am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>11am</option>
<option value="12am" <?php if( '12am' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>12am</option>
<option value="1pm" <?php if( '1pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>1pm</option>
<option value="2pm" <?php if( '2pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>2pm</option>
<option value="3pm" <?php if( '3pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>3pm</option>
<option value="4pm" <?php if( '4pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>4pm</option>
<option value="5pm" <?php if( '5pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>5pm</option>
<option value="6pm" <?php if( '6pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>6pm</option>
<option value="7pm" <?php if( '7pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>7pm</option>
<option value="8pm" <?php if( '8pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>8pm</option>
<option value="9pm" <?php if( '9pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>9pm</option>
<option value="10pm" <?php if( '10pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>10pm</option>
<option value="11pm" <?php if( '11pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>11pm</option>
<option value="12pm" <?php if( '12pm' == $this->user->getConcept()->getWeekdayEndTime()): ?>selected<?php endif ?>>12pm</option>
</select>
</div>


Now I have to restrict user to choose end time greater than start time, lets say user selects 10am then must select greater than 10am or in terms of pm like real time. using jquery.
HERE IS WHAT YOU CAN SEE FIDDLE

Answer

To disable the endTime option with jQuery you can use this:

$(".startTimeWeekDays").change(function(){
   var startTime = $(this).val(); // Get the starting time

   // Reset disabled status
   $(".endTimeWeekDays option").prop("disabled", false);

   // Disable the end time options equal or less than selected time
   $(".endTimeWeekDays option[value='"+startTime+"']").next().prevAll().prop("disabled", true);
});