JQuery to remove the times before the selected start time
When there are 2 time time fields like start time and end time, It should not allow the end time to be selected as less than start time. Here is a JQuery code to disable the options in End time field which are earlier than the Start time. Asume below are the options we get from the database:
HTML :
<select id="start_dt" name="start_dt">
<option value=""></option>
<option value="{ts '2024-07-17 09:00:00'}">09:00 AM</option>
<option value="{ts '2024-07-17 09:30:00'}">09:30 AM</option>
<option value="{ts '2024-07-17 10:00:00'}">10:00 AM</option>
<option value="{ts '2024-07-17 10:30:00'}">10:30 AM</option>
<option value="{ts '2024-07-17 11:00:00'}">11:00 AM</option>
</select>
<select id="end_dt" name="end_dt">
<option value="" ></option>
<option value="{ts '2024-07-17 09:30:00'}" >09:30 AM</option>
<option value="{ts '2024-07-17 10:00:00'}" >10:00 AM</option>
<option value="{ts '2024-07-17 10:30:00'}" >10:30 AM</option>
<option value="{ts '2024-07-17 11:00:00'}">11:00 AM</option>
<option value="{ts '2024-07-17 11:30:00'}">11:30 AM</option>
<option value="{ts '2024-07-17 12:00:00'}">12:00 PM</option>
<option value="{ts '2024-07-17 12:30:00'}">12:30 PM</option>
</select>
JQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#start_dt').change(function() {
var selectedStartTime = $(this).val();
$('#end_dt option').removeAttr('disabled');
$('#end_dt option').each(function() {
if ($(this).val() <= selectedStartTime) {
$(this).attr('disabled', 'disabled');
}
});
$('#end_dt').val($('#end_dt option:not(:disabled):first').val());
});
});
</script>
Comments
Post a Comment