DatePicker不适用于Ajax加载内容

时间:2013-05-27 12:06:57

标签: jquery-ui jquery-ui-datepicker

我一直坚持这个问题。 datepicker在静态内容上运行良好。

但是当通过Ajax加载内容时失败。

我试过了: -

jQuery.noConflict();
jQuery(function($) {
    $(document).ready(function(){
        $( ".datepickerRange" ).datepicker({
            dateFormat: 'dd-mm-yy',
            prevText:'',
            nextText:'',
            minDate: 0,
            maxDate: "+1M",
            showOn: "button",
            buttonImage: divadatepicker.image_url+"/calendar.jpeg",
            buttonImageOnly: true
        });
        $( ".datepicker" ).datepicker({
            dateFormat: 'dd-mm-yy',
            prevText:'',
            nextText:'',
            showOn: "button",
            buttonImage: divadatepicker.image_url+"/calendar.jpeg",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true,
            yearRange: "1960:2015"
        });

            });

$(document).live(function(){
        $( ".datepickerRange" ).datepicker({
            dateFormat: 'dd-mm-yy',
            prevText:'',
            nextText:'',
            minDate: 0,
            maxDate: "+1M",
            showOn: "button",
            buttonImage: divadatepicker.image_url+"/calendar.jpeg",
            buttonImageOnly: true
        });
        $( ".datepicker" ).datepicker({
            dateFormat: 'dd-mm-yy',
            prevText:'',
            nextText:'',
            showOn: "button",
            buttonImage: divadatepicker.image_url+"/calendar.jpeg",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true,
            yearRange: "1960:2015"
        });

            });

});

在通过ajax加载内容后,它没有显示偶数日历小图像。

2 个答案:

答案 0 :(得分:9)

在您的ajax调用上的.datepicker回调函数中调用success,而不是使用已弃用的.live。例如:

function initdatepicker(){
    $( ".datepickerRange" ).datepicker({
        dateFormat: 'dd-mm-yy',
        prevText:'',
        nextText:'',
        minDate: 0,
        maxDate: "+1M",
        showOn: "button",
        buttonImage: divadatepicker.image_url+"/calendar.jpeg",
        buttonImageOnly: true
    });
    $( ".datepicker" ).datepicker({
        dateFormat: 'dd-mm-yy',
        prevText:'',
        nextText:'',
        showOn: "button",
        buttonImage: divadatepicker.image_url+"/calendar.jpeg",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        yearRange: "1960:2015"
    });
}
$(document).ready(function(){
    initdatepicker();
});

并将其添加到您的$.ajax success

initdatepicker();

答案 1 :(得分:-1)

使用此

<script type="text/javascript">
    $(function(){
        $('input.calendarSelectDate').live('click', function() {
           $(this).datepicker({showOn:'focus'}).focus();
        });
     });
</script>