Перейти к содержанию
Официальный форум поддержки Simpla

Логика Селектов Для Выбора Даты И Времени Доставки


Рекомендуемые сообщения

Здравствуйте, господа!

 

У меня два простых вопроса. Помогите разобраться.

 

1. Есть селект с такой логикой:

<select name="delivery_date">
    <option value="">{'+0 day'|date_format:'%d %m %y'}</option>
    <option value="">{'+1 day'|date_format:'%d %m %y'}</option>
    <option value="">{'+2 day'|date_format:'%d %m %y'}</option>
    <option value="">{'+3 day'|date_format:'%d %m %y'}</option>
    <option value="">{'+4 day'|date_format:'%d %m %y'}</option>
    …
    <option value="">{'+30 day'|date_format:'%d %m %y'}</option>
</select>

Вопрос: как запихнуть это в цикл?

 

2. Есть второй селект:

<select name="delivery_time">
    <option value="">10:00–14:00</option>
    <option value="">14:00–18:00</option>
    <option value="">18:00–22:00</option>
</select>

Вопрос: как сделать проверку, чтобы если в первом селекте выбран первый вариант, то во втором селекте первый вариант скрывался или становился неактивным? (Чтобы сегодня доставка с 10 до 14 была недоступна.)

 
Ссылка на сообщение
Поделиться на другие сайты

 

1. Есть селект с такой логикой:

Вопрос: как запихнуть это в цикл?

<select name="delivery_date">
{for $i = 0 to 30}
<option value="">{"+{$i} day"|date_format:'%d %m %y'}</option>
{/for}
</select>

<select name="delivery_time">
<option value="" disabled>10:00–14:00</option>
<option value="">14:00–18:00</option>
<option value="">18:00–22:00</option>
</select>

2. Я бы сделал через JS (написал на скорую руку).

$(document).on('change', '[name="delivery_date"]', function () {
        var delivery_time = $('[name="delivery_time"]'),
            date_index = $(this).find(":selected").index();

        if(date_index == 0)
            delivery_time.find('*').eq(0).prop( "disabled", true );
        else
            delivery_time.find(":disabled").prop( "disabled", false );

    });
Ссылка на сообщение
Поделиться на другие сайты

Absorber, супер, спасибо.

 

Как сделать, чтобы скрипт срабатывал и при загрузке страницы, а не только при изменении?

Ссылка на сообщение
Поделиться на другие сайты

Absorber, супер, спасибо.

 

Как сделать, чтобы скрипт срабатывал и при загрузке страницы, а не только при изменении?

Так ведь по дефолту в списках первый элемент всегда активный.
Ссылка на сообщение
Поделиться на другие сайты

Noxter, это замечание не связано с моей задачей.

Не правильно понял, сделайте во втором списке первый элемент с параметром disabled, а уже при переключении убирайте этот параметр, тогда при загрузке страницы у вас в первом списке будет выбран первый элемент, а во втором первый элемент будет недоступен.
Ссылка на сообщение
Поделиться на другие сайты

Noxter, мне так не подойдет — у меня данные формы восстанавливаются автоматически из локал-стораджа. И это событие не будет засчитано как on change. Может быть ситуация, что в первом селекте восстановится не первое значение, а у второго селекта останется disabled.

 

Ну ладно, дальше разберусь, всем спасибо.

Ссылка на сообщение
Поделиться на другие сайты

в конце добавить .change()

$(document).on('change', '[name="delivery_date"]', function () {
        var delivery_time = $('[name="delivery_time"]'),
            date_index = $(this).find(":selected").index();

        if(date_index == 0)
            delivery_time.find('*').eq(0).prop( "disabled", true );
        else
            delivery_time.find(":disabled").prop( "disabled", false );

    }).change();

 



а вообще я бы лучше реализовал через какой нибудь плагин

http://xdsoft.net/jqplugins/datetimepicker/

или 

http://trentrichardson.com/examples/timepicker/

Ссылка на сообщение
Поделиться на другие сайты

аа точно) 
немного не досмотрел как у вас реализовано. 
 
некогда не понимал такого подхода: 

$(document).on('change', '[name="delivery_date"]', function (){

ведь разработчики jquery не тупые...
Они не зря удалили метод live который работал точно так же как и эта строка.
Данный подход делает отлов кликов по всей страницы. Что совсем не нужно...  
 
если область не динамична (не подгружается аяксом и тд) делаем просто:
 

$('[name="delivery_date"]').change(function(){

и change() в конце заработает.
 
 
Если же область динамическая то:
 

$(тут пишем селектор динамичной области).on('change', '[name="delivery_date"]', function (){

и для вызова change() в месте где загружается область делаем

 

$('селектор динамичной области [name="delivery_date"]').change()
Изменено пользователем yr4ik
Ссылка на сообщение
Поделиться на другие сайты

Yr4ik, примерно понял. А как здесь сделать дополнительно проверку на время?

if(date_index == 0)

 

Например, если выбран первый вариант и время меньше 18:00?

Ссылка на сообщение
Поделиться на другие сайты

конкретика замысла мне не совсем понятна да и кода маловато. Но думаю так:

 

$('[name="delivery_date"]').change(function(){
    var today = new Date().getHours();
    $('[name="delivery_time"] option:first').prop('disabled', ($(this).find(':selected').is(':first') || (today >= 7 && today <= 19)));
}).change();

если в delivery_date выбрана 1я опция ИЛИ сейчас >=7:00 И <= 19:00  = то отключить 1ю опцию в delivery_time

Ссылка на сообщение
Поделиться на другие сайты

<select name="delivery_date">
{for $i = 0 to 30}
<option value="">{"+{$i} day"|date_format:'%d %m %y'}</option>
{/for}
</select>
 

Интересует один момент, подскажите пожалуйста.

Как вывести формат даты не "22 03 17", а "сегодня", "завтра" и после уже "24 03 17"

Ссылка на сообщение
Поделиться на другие сайты

Интересует один момент, подскажите пожалуйста.

Как вывести формат даты не "22 03 17", а "сегодня", "завтра" и после уже "24 03 17"

 

<select name="delivery_date">
{for $i = 0 to 30}
{if $i == 0}
<option value="">Сегодня</option>
{elseif $i == 1}
<option value="">Завтра</option>
{else}
<option value="">{"+{$i} day"|date_format:'%d %m %y'}</option>
{/if}
{/for}
</select> 
Ссылка на сообщение
Поделиться на другие сайты

Чуть попроще:

<select name="delivery_date">
<option value="">Сегодня</option>
<option value="">Завтра</option>
{for $i = 2 to 30}
<option value="">{"+{$i} day"|date_format:'%d %m %y'}</option>
{/for}
</select> 
Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...