2016-10-21 3 views
-1

У меня есть 2 действительно очень больших блока выбора, которые, я думаю, не лучший подход для выбора времени. Я должен запретить пользователю выбирать время начала меньше времени окончания. Я имею в виду часы работы, в течение которых мой отель открыт. Вот что я сделал с помощью select.Как проверить время начала и окончания времени, используя 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> 

Теперь я должен ограничить пользователю выбрать время окончания больше времени начала, предположим, что пользователь выбирает 10 утра, то необходимо выбрать более 10 часов или в терминах часов, как реального времени. используя jquery. ЗДЕСЬ ЧТО ВЫ ВИДИТЕ FIDDLE

+1

Вы должны узнать о петлях, чтобы избежать повторения кода. – C2486

+1

Вам нужно использовать 'for ($ i = 1; $ i <= 12; $ i ++)' в функции для получения параметров. Это не читаемый код. – vaso123

+0

Вы получаете метку времени в 'getWeekdayEndTime()'? Если в любом случае вы получите штамп времени, тогда будет легко узнать, какой из них больше. – Samir

ответ

0

Чтобы отключить EndTime option с JQuery вы можете использовать это:

$(".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); 
}); 
+0

Я хочу проверить не отключить –

+0

@SudarshanKalebere Вы написали: _Now я должен ограничить пользователя, чтобы выбрать время окончания больше, чем время начала_ – vaso123

+0

@SudarshanKalebere вы можете объяснить «подтвердите», пожалуйста? Быстрое сообщение с сообщением «Время окончания должно быть больше {startTime}»? – Kamae

1
$(function(){ 
    $("#checkin").on("change",function(){ 
    var chkIn = getValue($(this).val()), chkout = getValue($("#checkout").val()) 
    if(chkIn>=chkout) { 
     alert("Checkin should be lesser than checkout"); 
     resetSelectedOptions(); 
    } 

    }) 

    $("#checkout").on("change",function(){ 
    var chkout = getValue($(this).val()), chkIn = getValue($("#checkin").val()) 
    if(chkIn>=chkout) { 
     alert("Checkin should be lesser than checkout"); 
     resetSelectedOptions() 
    } 

    }) 
}) 



function getValue(str){ 
    return str.indexOf("am")>-1?parseInt(str):parseInt(str)+12; 
} 

function resetSelectedOptions(){ 
    $("#checkout").val("1am"); 
    $("#checkin").val("1am") 

} 
Смежные вопросы