Datepicker не работает должным образом в модальном, где HTML возвращается с помощью jQuery .load () - PullRequest
Новая
       12

Datepicker не работает должным образом в модальном, где HTML возвращается с помощью jQuery .load ()

0 голосов
/ 25 октября 2018

Я работаю в VS2017 MVC (v5.2.3.0), использую Bootstrap (v3.3.7) и функцию jQuery (v2.2.4) .load () для загрузки HTML в модал начальной загрузки.После загрузки модального режима средство выбора даты не работает должным образом.Он будет работать должным образом, если я загружу модал в DOM при загрузке страницы, но не после того, как DOM создан.

В настоящее время я использую средство выбора даты для начальной загрузки v1.6.4.Я попытался обновить до последней версии: v1.8.0 - без разницы.

Фактическое поведение

Datepicker инициализируется, однако выбранная дата никогда не устанавливается в качестве входного значения- он просто остается пустым.

Пример кода 

//Modal partial html (only showing the HTML Helper for simplicity)

@Html.TextBoxFor(model => model.FollowUpDate,
new
{
    data_input = "followup-date",
    data_datepicker_short_date = "",
    data_val = "true",
    data_val_required = "Follow Up Date is required.",
    @class = "datepicker"
})


//Initialize datepicker in modal partial as followed

<script>
$(document).ready(function() {
    $('#FollowUpDate').datepicker({
        dateFormat: 'mm/dd/yy',
        autoclose: true,
        startDate: new Date('@String.Format("{0:MM/dd/yyy}", DateTime.Now.AddDays(m))'),
        endDate: new Date('@String.Format("{0:MM/dd/yyy}", DateTime.Now.AddDays(p-1))')
    });
});

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

Datepicker в модальном режиме после функции загрузки jQuery

Здесьмоя функция jQuery .load, в которой я инициализирую указатель даты, что он и делает, но когда я выбираю дату, она не отображается, или иногда дата появляется, а затем быстро исчезает. 

$(modal.modalId + ' .modal-content').load(modal.getURL, function () {
    $('#FollowUpDate').datepicker({
        dateFormat: 'mm/dd/yy',
        autoclose: true,
    });
});

1 Ответ

0 голосов
/ 31 октября 2018

Это было решено.Проблема была связана с загрузкой данных в модальное событие с помощью события show.bs.modal и загрузчиком даты начальной загрузки внутри модального режима, вызывающим то же событие.В результате было получено, что модальные данные будут обновляться каждый раз, когда вы устанавливаете фокус на указатель даты.Чтобы решить эту проблему, мне просто нужно было отменить привязку модального события после его вызова.

...