Средство выбора диапазона дат Bootstrap для мобильных устройств выделяет предыдущую дату при изменении даты

Я использую bootstrap выбор диапазона дат с двумя календарями, чтобы люди могли выбирать даты start и end. Что-то новое, что я сделал, это то, что когда пользователь выбирает дату НАЧАЛА, я фокусируюсь на дате ОКОНЧАНИЯ, поэтому календарь появляется автоматически.

СКРИПКА?

Я пытался настроить скрипку, но она просто не работает на скрипке, но вы всегда можете протестировать на веб-сайте плагина, как это происходит и с исходным плагином. См. сайт выбора диапазона дат здесь.

ПРОБЛЕМА

На iPhone, когда я выбираю дату начала, автоматически появляется календарь конечной даты, и это здорово. Но проблема в том, что он висит на ховере там, где у меня был палец. Итак, если вы посмотрите на скриншот, я выбрал 8th в календаре START, и когда он фокусируется на календаре END, он также автоматически наводит курсор на 6th, потому что я провел пальцем по той же области, когда выбрал 8th.

Как это можно исправить? Я перепробовал все плагины и решения для исправления ios hover issue, но, похоже, ничего не исправило это.

введите здесь описание изображения


jquery bootstrap-datepicker
person nasty    schedule 24.03.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Это сделает веб-сайт немного медленным, когда пользователь выберет дату. У меня нет айфона, поэтому я не могу воспроизвести, так что это просто предположение.

person Anand    schedule 31.03.2016

arrow_upward
1
arrow_downward

Я бы установил autoclose: true, чтобы средство выбора даты автоматически закрывалось при выборе даты. Затем вы можете использовать событие hide, чтобы узнать, когда показывать «конец» Datepicker, но здесь вы устанавливаете небольшой тайм-аут, например 100-200 мс.

$('#datepicker-start').datepicker({
    autoclose: true
}).on( 'hide', function(e) {
    window.setTimeout(function(){
        $('#datepicker-end').datepicker('show');
    }, 100)
});
$('#datepicker-end').datepicker();

Проверьте Fiddle.

person Yuri    schedule 04.04.2016