Question

我正在使用模型加载另一个页面。在页面上应该是一个日期选择器，但它没有显示。如果我只是在不使用模型的情况下加载页面，则日期选择器工作正常。

我意识到因为我试图绑定的元素不存在但是我需要一些额外的Jquery来将.datetimepicker绑定到元素一旦加载。

         $("#EditContentLog1bt").live("click", function () {
                alert("test1");
            $("#datepick").ready(function () {
                alert("test2");
                $("#datepick").datetimepicker({
                    pickTime: false,
                       format: "dd/MM/yyyy",
                });
            });
        });

我尝试使用.load而不是.ready但是使用.load我没有进入第二个警报。使用.ready我会进入第二个警报，但是日期选择器仍无法正常工作。

HTML：

  <div class="control-group">
    <label for="followup" class="control-label">Date</label>
    <div class="controls">
        <div id="datepick" class="input-append date">
            <input type="text" name="date" value="<?php echo date('d-m-Y', strtotime($contactLog->follow_up_date)); ?>">
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>
    </div>
</div>
<div class="control-group">
    <label for="followup" class="control-label">Time</label>
    <div class="controls">
        <div id="timepick" class="input-append date">
            <input type="text" name="time" value="<?php echo date('H:i', strtotime($contactLog->follow_up_date)); ?>">
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>
    </div>
</div>

这似乎不是一个z-index问题，因为我已经在另一个模型中使用了datepicker，但只使用了.click而不是.load / .ready。

现在这个模型被调用：

<a data-toggle="modal" data-target="#myModal" id="EditContentLog1bt" href="<?php echo site_url('manager/editContactLog/' . base64_encode($this->encrypt->encode($log->id))); ?>" class="btn btn-primary contactLog">Edit</a>

这是模型的html：

<div id="myModalform" style="width:700px; margin-left:-380px;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-body">
   <p>One fine body…</p>
 </div>
 <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
 </div>

Answer 1

试试这个

$(function() {

$("#open_popup").click(function(){
$("#date").datepicker();
    $( "#dialog" ).dialog({
      height:300,
        width:400 ,
        modal: true});
})

 });

working example

Answer 2

我已经解决了这个问题：

$('#myModal').on('shown', function () {
    $("#datepick").datetimepicker({
        pickTime: false,
        format: 'dd/MM/yyyy',
    });
});

在加载时将.datepicker添加到输入框

2 个答案: