【问题标题】:Bootstrap datepicker not woking in modal引导日期选择器无法在模式下工作
【发布时间】:2015-02-25 14:26:00
【问题描述】:

当我在模式中使用日期选择器时,日期选择器不起作用。

我使用事件show.bs.modal 来修改显示的modal 的一些内容:

$(function(){
    $('#statusModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var title = button.data('title');
        var input_date = button.data('date');
        var modal = $(this);

        modal.find('.modal-title').text('Clicked: ' + title);
        modal.find('.modal-body #inputDate').val(input_date);

        $('#inputDate').datepicker();

    }).on('hidden.bs.modal', function (event) {
        $('#inputDate').datepicker('remove');
    });

    $('#inputDate2').datepicker();

})

但是当日期选择器打开时,这个事件会再次被触发。 因此,它会删除日期输入的值。而且选择日期也不起作用。

这里有一个演示问题的 jsfiddle: http://jsfiddle.net/f9de9z8x/26/

知道有什么问题吗?

【问题讨论】:

标签: twitter-bootstrap-3 bootstrap-modal bootstrap-datepicker


【解决方案1】:

尝试使用shown 事件而不是show 事件。

$('#statusModal').on('shown.bs.modal', function (event) {

http://jsfiddle.net/kp0q9s9L/

【讨论】:

  • 没有问题,尽管您会注意到您在模态框内获得了日期的“Flash”,因为在用户看到模态框之前不会执行 JavaScript。
  • 请看一下我刚刚对这个问题发表的评论。也许它也可以帮助你。
【解决方案2】:

试试这个,

$("input.date-picker").click(function(){

$("#ui-datepicker-div").css("z-index",5000);    

});

【讨论】:

    猜你喜欢
    • 2015-01-18
    • 1970-01-01
    • 2012-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多