引入css和js

<link rel="stylesheet" href="/${appName}/commons/css/datapicker/datepicker3.css" type="text/css"></link> <script type="text/javascript" src="/${appName}/commons/js/datapicker/bootstrap-datepicker.js"></script>

Html及Js

<span style="position: relative; z-index: 9999;"> <!--當在model彈框中需要加此span--><input type="text" value="" class="form-control" name="time" id="time_add" tabindex="4" /> </span>/*顯示改為中文*/ $.fn.datepicker.dates['cn'] = { //切換為中文顯示days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],today: "今天",clear: "清除" }; /*初始化時間控件*/ $('#time_add').datepicker({autoclose: true, //自動關閉beforeShowDay: $.noop, //在顯示日期之前調用的函數calendarWeeks: false, //是否顯示今年是第幾周clearBtn: false, //顯示清除按鈕daysOfWeekDisabled: [], //星期幾不可選endDate: Infinity, //日歷結束日期forceParse: true, //是否強制轉換不符合格式的字符串format: 'yyyy-mm-dd', //日期格式keyboardNavigation: true, //是否顯示箭頭導航language: 'cn', //語言orientation: "auto", //方向rtl: false,startDate: -Infinity, //日歷開始日期startView: 0, //開始顯示todayBtn: false, //今天按鈕todayHighlight: false, //今天高亮weekStart: 0 //星期幾是開始
　　 startView: 'months', //開始視圖 視圖類 1代表years 2代表months 默認值0代表day
　　 maxViewMode:'years', //最大視圖
　　 minViewMode:'months', //最小視圖 });

?視圖部分源碼

?

轉載于:https://www.cnblogs.com/aeolian/p/9214152.html

總結

以上是生活随笔為你收集整理的使用Bootstrap插件datapicker获取时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。