[英]How to add date and time picker bootstrap plugin?
從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">×</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>
如何在此彈出框上添加日期和時間選擇器?
<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
在模式的主體中,為輸入字段和日歷圖標添加html,如下所示:
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
在您的main.js文件,母版頁甚至頁面級中,進行如下所示的javascript調用:
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
})
顯然還有其他選項可控制您的功能和顯示,包括范圍。 通讀文檔以探索更多選項bootstrap-datepicker
並且請確保在關閉頁面之前,在頁面的頂部或底部引用了該順序的JQuery.js,Bootstrap.js和bootstrap-datepicker.js。
這是一個演示 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.