Блог

Главная - Вопросы по программированию - Как мне проверить время начала и окончания с помощью select

Как мне проверить время начала и окончания с помощью select

#javascript #php #jquery #html

#javascript #php #jquery #HTML

Вопрос:

У меня есть 2 действительно очень больших поля выбора, которые, я думаю, не лучший подход для выбора времени. Я должен запретить пользователю выбирать время начала меньше времени окончания. Я имею в виду часы работы, в течение которых открыт мой отель. Вот что я сделал с помощью 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.
ВОТ ЧТО ВЫ МОЖЕТЕ УВИДЕТЬ В СКРИПТЕ

Комментарии:

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

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

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

4. У меня есть только am и pm

Ответ №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")

}

Ответ №2:

Чтобы отключить время окончания 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);
});

Комментарии:

1. Я хочу проверить, а не отключить

2. @SudarshanKalebere Вы написали это: Теперь я должен ограничить пользователя в выборе времени окончания, превышающего время начала

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

4. Да, пожалуйста, проверьте этот подход здесь jsfiddle.net/Lpyk1fzu когда я выбираю 10 утра, я согласен, что он отключается все время ниже 10 утра, но опять же, если я выберу 2 часа ночи, то все равно он отключается только до 10 утра, пожалуйста, проверьте jsfiddle.net/Lpyk1fzu

5. Да, извините, я сделал это в спешке. Обновил его, вам просто нужно было удалить отключенное свойство раньше.