Ad
Dropdown Fromtime Select Previous Time Disable In Totime
I have 2 select box from time and to time.
If am select 1.00 AM in from time, 12.00 AM and 12.30 AM option disable in to time.
I tired some code but i am not get correct result.
$('#fromtime').on('change', function(){
var totimeValues = [];
var fromTime = $(this).val();
$('#totime option').filter(function() {
return $(this).val() <= fromTime;
}).prop('disabled', true);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<label for="fromtime">From Time</label>
<select class="form-control" id="fromtime" (change)="changeFromTime($event.target.value)">
<option value="">Select from time</option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="1:00 AM">1:00 AM</option>
<option value="1:30 AM">1:30 AM</option>
<option value="2:00 AM">2:00 AM</option>
<option value="2:30 AM">2:30 AM</option>
<option value="3:00 AM">3:00 AM</option>
<option value="3:30 AM">3:30 AM</option>
<option value="4:00 AM">4:00 AM</option>
<option value="4:30 AM">4:30 AM</option>
<option value="5:00 AM">5:00 AM</option>
<option value="5:30 AM">5:30 AM</option>
<option value="6:00 AM">6:00 AM</option>
<option value="6:30 AM">6:30 AM</option>
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="totime">To Time:</label>
<select class="form-control" id="totime">
<option value="">Select to time</option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="1:00 AM">1:00 AM</option>
<option value="1:30 AM">1:30 AM</option>
<option value="2:00 AM">2:00 AM</option>
<option value="2:30 AM">2:30 AM</option>
<option value="3:00 AM">3:00 AM</option>
<option value="3:30 AM">3:30 AM</option>
<option value="4:00 AM">4:00 AM</option>
<option value="4:30 AM">4:30 AM</option>
<option value="5:00 AM">5:00 AM</option>
<option value="5:30 AM">5:30 AM</option>
<option value="6:00 AM">6:00 AM</option>
<option value="6:30 AM">6:30 AM</option>
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:30 PM">11:30 PM</option>
</select>
</div>If am select
1.00 AMinfrom timemy code disable10.00 PM,10.30 PM,11.00 PM, and11.30 PMinto time. But i need to disable only12.00 AMand12.30 AM
Ad
Answer
You can first create a date with the time as select in fromTime and then do that same for each option in totime and then you can compare the dates and that should work.
Check here
$('#fromtime').on('change', function(){
var fromTime = $(this).val();
var today = new Date("11/24/1993 " + $(this).val());
$('#totime option').filter(function() {
var tempDate = new Date("11/24/1993 "+$(this).val());
return tempDate <= today;
}).prop('disabled', true);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group col-md-6">
<label for="fromtime">From Time</label>
<select class="form-control" id="fromtime" (change)="changeFromTime($event.target.value)">
<option value="">Select from time</option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="1:00 AM">1:00 AM</option>
<option value="1:30 AM">1:30 AM</option>
<option value="2:00 AM">2:00 AM</option>
<option value="2:30 AM">2:30 AM</option>
<option value="3:00 AM">3:00 AM</option>
<option value="3:30 AM">3:30 AM</option>
<option value="4:00 AM">4:00 AM</option>
<option value="4:30 AM">4:30 AM</option>
<option value="5:00 AM">5:00 AM</option>
<option value="5:30 AM">5:30 AM</option>
<option value="6:00 AM">6:00 AM</option>
<option value="6:30 AM">6:30 AM</option>
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="totime">To Time:</label>
<select class="form-control" id="totime">
<option value="">Select to time</option>
<option value="12:00 AM">12:00 AM</option>
<option value="12:30 AM">12:30 AM</option>
<option value="1:00 AM">1:00 AM</option>
<option value="1:30 AM">1:30 AM</option>
<option value="2:00 AM">2:00 AM</option>
<option value="2:30 AM">2:30 AM</option>
<option value="3:00 AM">3:00 AM</option>
<option value="3:30 AM">3:30 AM</option>
<option value="4:00 AM">4:00 AM</option>
<option value="4:30 AM">4:30 AM</option>
<option value="5:00 AM">5:00 AM</option>
<option value="5:30 AM">5:30 AM</option>
<option value="6:00 AM">6:00 AM</option>
<option value="6:30 AM">6:30 AM</option>
<option value="7:00 AM">7:00 AM</option>
<option value="7:30 AM">7:30 AM</option>
<option value="8:00 AM">8:00 AM</option>
<option value="8:30 AM">8:30 AM</option>
<option value="9:00 AM">9:00 AM</option>
<option value="9:30 AM">9:30 AM</option>
<option value="10:00 AM">10:00 AM</option>
<option value="10:30 AM">10:30 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="11:30 AM">11:30 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="12:30 PM">12:30 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="1:30 PM">1:30 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="2:30 PM">2:30 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="3:30 PM">3:30 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="4:30 PM">4:30 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="5:30 PM">5:30 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="6:30 PM">6:30 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="7:30 PM">7:30 PM</option>
<option value="8:00 PM">8:00 PM</option>
<option value="8:30 PM">8:30 PM</option>
<option value="9:00 PM">9:00 PM</option>
<option value="9:30 PM">9:30 PM</option>
<option value="10:00 PM">10:00 PM</option>
<option value="10:30 PM">10:30 PM</option>
<option value="11:00 PM">11:00 PM</option>
<option value="11:30 PM">11:30 PM</option>
</select>
</div>Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad