datetime控件

Bootstrap的日期時間控件，使用非常的簡單。

首先，添加日期時間控件的引用

@*datetime控件*@<link href="~/Content/BootStrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /><script src="~/Content/BootStrap/js/moment-with-locales.js"></script><script src="~/Content/BootStrap/js/bootstrap-datetimepicker.min.js"></script><script src="~/Content/BootStrap/js/bootstrap-datetimepicker.zh-CN.js"></script>

鏈接：http://pan.baidu.com/s/1sl56aw1 密碼：jc2y
頁面代碼

<a class='input-group date' id='datetimepicker1' style="float: left; left: 320px;"><input type='text' class="form-control" id='nowdate' style="width: 150px; height: 30px;" /><span class="input-group-addon" style="float: left; width: 50px; height: 30px;"><span class="glyphicon glyphicon-calendar"></span></span></a>

JavaScript代碼

//設(shè)置日期時間控件 function Datetime() {$('#datetimepicker1').datetimepicker({language: 'zh-CN',//顯示中文format: 'yyyy-mm-dd',//顯示格式minView: "month",//設(shè)置只顯示到月份initialDate: new Date(),autoclose: true,//選中自動關(guān)閉todayBtn: true,//顯示今日按鈕locale: moment.locale('zh-cn')});//默認獲取當(dāng)前日期var today = new Date();var nowdate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();//對日期格式進行處理var date = new Date(nowdate);var mon = date.getMonth() + 1;var day = date.getDate();var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);document.getElementById("nowdate").value = mydate; }

日期時間控件默認值的設(shè)置，需要注意的是，在JS中使用的ID是input標(biāo)簽的ID。

document.getElementById("nowdate").value = mydate;

此外，設(shè)置默認的日期還有一個格式的問題，頁面加載之后的日期時間，月份和天數(shù)為1~9的話，它的前面沒有0。

但是，通過日期時間控件選擇之后的日期時間，它的前面是有0的。

解決方法，首先獲取當(dāng)前的日期時間，然后通過格式化處理一下即可。

//默認獲取當(dāng)前日期var today = new Date();var nowdate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();//對日期格式進行處理var date = new Date(nowdate);var mon = date.getMonth() + 1;var day = date.getDate();var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);document.getElementById("nowdate").value = mydate; 《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的bootstrap日期时间控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。