Jquery UI 日期选择器在注销和登录后不显示

Jquery UI Datepicker not displaying after logout and login

本文关键字：登录 显示 注销 UI 日期 选择器 Jquery      更新时间：2023-09-26

我有一个非常奇怪的问题。我有一个使用 jquery-ui 日期选择器的输入：

$("#newDate", $container).datepicker();

此输入位于 SPI（单页接口）应用程序中，需要登录才能使用它。每个内容都通过 AJAX 加载。

该组件

工作正常，但如果我注销并登录到我的应用程序并单击我的日期选择器，则不会显示该组件。我的意思是，该操作不显示任何日历。

我尝试了很多这样的事情都没有成功：Jquery UI 日期选取器不显示

我注意到，当一切正常时，在"正文"中添加了这个容器：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">

但是当它不起作用时，不会加载此容器。

下面显示了我使用此组件的三个代码示例：

第一：

$("#fecha", $contenedor).datepicker();
$("#fecha", $contenedor).click(function(){
    if($("#fecha", $contenedor).val() == ''){
        $("#fecha", $contenedor).datepicker('setDate', (new Date()) );
    }
});

在此示例中，日期加载到输入中，但不显示日期选取器组件。我尝试使用 show（） 函数，但我得到了相同的结果。

第二：

$("#fechaFinEventoDate", $dialogEditarEvento)
.datepicker({
    onClose: function (selectedDate) {                              
        $("#fechaInicioEventoDate", $dialogEditarEvento)
        .datepicker("option", "maxDate", selectedDate);
    }
}).val($.datepicker.formatDate('dd/mm/yy', fechaFin)); 
$("#fechaFinEventoDate", $dialogEditarEvento)
.datepicker(
    "option", "minDate", $.datepicker.formatDate('dd/mm/yy', fechaInicio)
);

第三：

$("#fechaInicioEventoTime", $dialogEditarEvento).timepicker({
    timeFormat: 'HH:mm',
    showSecond: false
}).val(getFormatTime(fechaInicio));

我已经使用了这个库，并按显示的顺序加载它们：

jquery-1.10.2.min.js,
jquery-ui-1.9.2.custom.js,
jquery.ui.datetimepicker.js (http://trentrichardson.com/examples/timepicker/)

我尝试在没有日期时间选择器库的情况下工作，但我有同样的问题。

提前谢谢。

您正在重新更新您的 HTML，因此基本上每次您使用单屏应用程序登录/注销时都会有一个新的 DOM。 jQuery 只会使用当前选择器找到 DOM 的第一个加载实例。调整它们以每次查找新附加的（容器）DOM 元素。

将.datepicker()应用于动态分配的<div> 

var $datePickerEl = $(document).find('#fecha', $contenedor );
$(document).on('click', "#fecha", function(){
    if( $datePickerEl.val() == ''){
        $datePickerEl.datepicker('setDate', (new Date()));
    }
});

将.datepicker()重新分配给同一动态创建的 DOM 元素

按照您在小提琴中提供的示例，该示例使用一页信息重新加载了 DOM 的内容，这带来了一个问题，即它没有按预期重新启动.datepicker()初始化。

这是因为新的.html()重新加载清除了所有.datepicker()辅助程序CSS和<div> s，但为元素分配了新的ID。只需将内容追加到容器（而不是整个文档），并删除保留在datepicker()的上一个实例中的 ID 和类的任何实例，下面的示例代码即可根据需要成功创建新.datepicker()。

<div id="content"></div>
<script>
    function loadLogin() {
          $('#content').html('<div id="pp">'+ 
                                '<button id="login">Free login</button>'+
                             '</div>').trigger("create");
          loadEvents();
    }
    function loadEvents() {
        $div = $('<h1>Hi!!</h1>' +
            '<input type="text" class="datepick" />' +
            '<button id="logout" style="margin-top: 100px;">Good bye!</button>');
        $("#pp").html($div).trigger("create");
        /** 
         *  Find the newly appended .datepick
         *  && begin the .datepicker init.
        **/
        $datepicker = $(document).find('.datepick');
        $datepicker.datepicker();
        $('#logout').click(function () {
            //Remove the attached id && class.
            $datepicker.removeAttr('id').removeClass('hasDatepicker');
            loadLogin();
        });
    }
</script>

演示小提琴：http://jsfiddle.net/zP9L6/1/

相关文章：