Сброс ограничений диапазона дат

Question

Я использую jQueryUI и datepicker в довольно сложной форме.У меня есть группа из 4 сборщиков дат, которые все зависят друг от друга.Например, выбор даты в Datepicker A приводит к изменению действительного диапазона дат Datepicker B aso

Это легко достигается с помощью опции onSelect DatePicker:

onSelect: function(selectedDate){
       //find datepicker B;
       //edit the valid date range of datapicker B.
}

Nowвозникает проблемный вариант использования: так как эти поля не обязательны, пользователю разрешено предпринять следующие шаги:

1) Выбор даты в средстве выбора даты A. Это вызовет onSelect и ограничит диапазон дат датой.средство выбора B. 2) Передумает и хочет очистить дату в окне выбора даты A.

Шаг 2) проблематично: во-первых, по какой-то неясной причине, jQueryUI> 1.7 не имеет кнопки очистки.Таким образом, поле ввода средства выбора даты должно быть редактируемым, чтобы пользователь даже мог удалить (с помощью кнопки возврата назад) свою ранее выбранную дату.Может быть, я могу принять это.

Но тут возникает реальная проблема: после того, как пользователь вручную удалил свою дату из поля ввода, у меня нет ловушки для моего логика «сброса», то есть снятия ограничений, ранее примененных к средству выбора даты B. OnSelectне срабатывает, но, насколько я вижу, ничего другого тоже нет.

Это единственный способ сбросить мою логику, поместить слушатель размытия в поле ввода datepicker, которое каждый раз проверяет, является ли значение пустым?Если это так, то я действительно рассматриваю упущение прозрачного механизма в виджете DatePicker как серьезную ошибку.Если виджет позволяет мне ограничивать даты других виджетов для выбора даты, то он также должен позволять мне снять эти ограничения.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Этот пост частично дублирует этот вопрос , ноединственное предупреждение указывает на «хак» js, который работает некорректно (кнопка очистки исчезает при смене месяца).Я также просмотрел Ticket # 3999 из управления проблемами jQuery.Он закрывается как "wontfix": /

Спасибо за любую помощь.

Answer 1

Я не знал, что средство выбора даты потеряло кнопку «Очистить»! Я начал смотреть на это и попытался найти решение, которое не основывалось бы на добавлении другого элемента или предположении, что пользователи будут знать, что нажатие Esc закрывает виджет. Хотя вы могли бы просто дать пользователям объяснение этой функциональности, которая может решить вашу проблему; -)

Итак Я сделал демо , в котором я заменил текст кнопки «Закрыть» на «Очистить». Я добавил одно дополнительное jQuery mouseup делегированное событие на мою новую кнопку «Очистить», которая очистит ввод до того, как сработают события стандартного средства выбора даты.

Так что, нажав «Очистить» или используя backspace , чтобы удалить дату, а затем Esc , чтобы закрыть средство выбора даты, вернет второй ввод обратно в состояние выбора даты по умолчанию.

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

Надеюсь, это то, что вы ищете: -)

Редактировать: Обновленная демоверсия Ах, да, это несколько усложняет ситуацию! Я переработал решение, чтобы оно стало более общим, и Я думаю, У меня оно работает. Новая демонстрация создает все объекты DatePicker за один раз. Было несколько хитрых частей, а именно общая очистка «следующих» <input> элементов и правильное определение того, какой <input> очистить при нажатии кнопки «очистить». Я не знал, что есть только один сборщик дат. Так что это немного хакерство, так как он просто устанавливает свойство jQuery .data () на входе, в котором виден указатель даты, а затем использует его для сброса правильного значения позже. Обратите внимание, что в этой демонстрации он по-прежнему сбрасывает все последующие входные данные, если один очищен, то есть «очистка» первого очищает 2 и 3, но очистка второго очищает только 3-й.

Answer 2

Задумывались ли вы о наблюдении события onClose на указателе даты A?

onClose: function(dateText, inst) {
  if(dateText == '') {
    //find datepicker B;
    //reverse the valid date range of datepicker B.
  }
},

Answer 3

Следующее было проверено и работает

<html>
<head>
    <link rel="stylesheet" href="ui/css/ui-lightness/jquery-ui-1.8.11.custom.css">
    <script src="ui/js/jquery-1.5.1.min.js"></script>
    <script src="ui/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script>
        $(document).ready(function() {
           var myClone = $("#foo").clone();

           $("#foo").datepicker();

            $("#resetMe").click(function(e) {
                e.preventDefault();

                $("#foo").remove();

                var localClone = $(myClone).clone();
                $("#fooContainer").append(localClone);
                $(localClone).attr("id", "foo").datepicker();      


            });

        }); 
    </script>

</head>
<body>
    <span id="fooContainer">
        <input id="foo"/>
    </span>
    <a id="resetMe" href="">Changed your mind? - Clear Date</a>
</body>
</html>

Answer 4

Это что-то вроде хака, но, возможно, он может делать то, что вы хотите:

У вас может быть скрытый ввод с надписью «Дата выбрана», которая является логическим значением. Когда пользователь выбирает дату, вы устанавливаете скрытый ввод на true.

Вы отключаете ввод даты. Вы добавляете «очистить» кнопку, которая установит вход на false и сбросит ограничения даты на B.

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