Bootstrap中時間（時間控件）的設計

運用bootstrap的時間控件，生成時間選擇器。

1.截圖：有以下這些樣式

10年視圖        年視圖         月視圖         日視圖         小時視圖

2.視圖設計：

1).年視圖代碼:

<div class="container">
    <input class="form_datetime form-control" type="text" value="" size="16">
</div>

/*樣式頭*/
<link rel="stylesheet" href="../../css/bootstrap.min.css" media="screen">
    <link href="../../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
/*js代碼*/

<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
    $(".form_datetime").datetimepicker({ format: "yyyy-mm", autoclose: true, todayBtn: true, todayHighlight: true, showMeridian: true, pickerPosition: "bottom-left", language: 'zh-CN',//中文，需要引用zh-CN.js包 startView: 3,//月視圖 minView: 4//日期時間選擇器所能夠提供的最精確的時間選擇視圖 });

3.附加幾個自己測試過的筆友的分享：

Bootstrap日期/日歷插件Datepicker 時間加標記：http://www.cnblogs.com/chenche/archive/2013/09/27/3342155.html

 

bootstrap datepicker只選擇年份： https://zhidao.baidu.com/question/433308979477858884.html

Bootstrap日期和時間表單組件：http://www.bootcss.com/p/bootstrap-datetimepicker/

手冊地址：http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate

4.PS：文章寫的潦草，如有需要交流請加qq:2318645572