jQuery Datepicker在Twitter Bootstrap 3 Modal

我一直在尝试不少解决方案来解决这个问题，但我无法让它工作。我试图让datepicker进入我的表单。表单放置在引导模式中，并且整个事件通过ajax加载。一切工作正常，除了日期选择器放在模态中时根本不显示。jQuery Datepicker在Twitter Bootstrap 3 Modal

我希望简单的解决方案，如：.datepicker {z-index：9999！important;}可以工作，但它不会。有人知道这个简单的解决方案吗？

这里是我的日期选择器：

$(function() { 
    $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
});

这里是我的形式：

<form action="" method="post"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Endre artikkel</h4> 
      </div> 
      <div class="modal-body">     
       <label for="arrived">Motatt</label> 
       <input type="text" name="arrived" class="form-control datepicker" id="arrived">          
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="submit" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</form>

的形式被加载到这个div：

<div class="modal fade" id="load_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1040;"></div>

凭借此javascript：

function edit_article(id){ 
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id); 
}

来源

2014-01-29 Twistar

的模式可能正在加载您添加后.datepicker()你应该加载表格后评估该代码。

function edit_article(id){ 
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id); 
    $("#load_modal .datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
}

来源

2014-01-29 13:32:55

您是对的！非常感谢！ – Twistar

如果您对文档准备（）

$(function() { 
    $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
    });

调用这段代码有没有表格日期选择器，因此未初始化加载表格后

调用此一次。

这shoudl解决您的问题

来源

2014-01-29 13:29:38 szpic

$(function() { 
    $("#arrived").datepicker({ dateFormat: "yyyy-mm-dd" }); 
});

我认为你这样做是错误....

亲切看看这个链接http://jsfiddle.net/TB8Yt/

来源

2014-01-29 13:36:29

这听起来像我有完全相同的问题。我在我的模式中有一个日期选择器，并且datepicker在我的屏幕第一次打开时工作正常，但第二次当您单击日期字段时没有任何反应，并且日期选择器不再工作时模式的任何进一步打开。我没有深入研究这个代码，但是看起来日期选择器代码必须查找它的datepicker ui对象，然后不再运行。

为了解决这个问题我跑这当我打开我的模态：

$("#modal").on('hidden.bs.modal', function() { 
    $('#ui-datepicker-div').remove(); 
});

我的日期选择器现在工作得很好。这款使用日期选择器的日期选择器是日期选择器在您运行时自动创建的一款$(".datepicker").datepicker();

来源

2015-11-25 05:33:46 FuzzyJulz

jQuery Datepicker在Twitter Bootstrap 3 Modal

回答

相关问题