Question

来自http://www.w3schools.com/bootstrap/bootstrap_modal.asp：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

如何在此弹出窗口中添加日期和时间选择器？

Answer 1

在模态的主体中添加输入字段和日历图标的html，如下所示：

$('.datepicker').datepicker({
  format: 'mm/dd/yyyy',
  startDate: '-3d'
})

在你的main.js文件，母版页，甚至是页面级别，按照以下方式进行javascript调用：

int op = 2;
__asm__("vmovdqa32 %0,%%zmm0\n\t"
            "mov %1, %%eax\n\t"
            "vpbroadcastd %%eax, %%zmm1\n\t"
            "vpsravd %%zmm1,%%zmm0,%%zmm1\n\t"
            "vmovdqa32 %%zmm1,%0;"
            : "=m" (tt[0]): "m" (op));

显然还有其他选项来控制您的功能和显示，包括范围。阅读文档以探索更多选项bootstrap-datepicker

请确保在关闭

之前，在页面的头部或底部引用了JQuery.js，Bootstrap.js和bootstrap-datepicker.js。

这是demo。

Answer 2

<div class="input-append date form_datetime">

    <input size="16" type="text" value="" readonly>
    <span class="add-on"><i class="icon-th"></i></span>


</div>


<script type="text/javascript">

    $(".form_datetime").datetimepicker({

        format: "dd MM yyyy - hh:ii"
    });

</script>

以下是演示http://www.malot.fr/bootstrap-datetimepicker/demo.php

以上链接抛出下载演示zip
解压zip文件
检查Extracted zip中的演示
在您的网站中使用
删除与您的网络CSS / Javascript / jQuery冲突的不必要的jQuery / CSS / Javascript

如何添加日期和时间选择器引导程序插件？

2 个答案: