<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <script src="js/bootstrap-datetimepicker.js" type="text/javascript"></script> <script type="text/javascript" src="js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> </head> <body> <form action="" class="form-horizontal" role="form"> <fieldset> <legend style="text-align: center;">YYYY</legend> <div class="form-group"> <label for="dtp_input1" class="col-md-2 control-label">選擇年份</label> <div class="input-group date form_year col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"> <input class="form-control" size="16" type="text" value="2019" id="datetime" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value="" /><br/> </div> </fieldset> </form> <form action="" class="form-horizontal" role="form"> <fieldset> <legend style="text-align: center;">YYYY-MM</legend> <div class="form-group"> <label for="dtp_input1" class="col-md-2 control-label">選擇年月</label> <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"> <input class="form-control" size="16" type="text" value="" id="datetime" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value="" /><br/> </div> </fieldset> </form> <!--實現 js --> <script type="text/javascript"> $(function () { $('.form_year').datetimepicker({ startView: 4,//日期時間選擇器打開之后首先顯示的視圖。 可接受的值：0 - 小時 視圖，1 - 天 視圖，2 - 月 視圖，3 - 年 視圖，4 - 十年 視圖 minView: 4,//Number, String. 默認值：0, ‘hour’，日期時間選擇器所能夠提供的最精確的時間選擇視圖 autoclose: true,//當選擇一個日期之后是否立即關閉此日期時間選擇器 todayBtn: true,//在日期時間選擇器組件的底部顯示一個 “Today” 按鈕用以選擇當前日期 format: 'yyyy'//日期顯示格式 }); $('.form_datetime').datetimepicker({ format: 'yyyy-mm', autoclose: true, todayBtn: true, startView: 'year', minView:'year', maxView:'decade',//Number, String. 默認值：4, ‘decade’，日期時間選擇器最高能展示的選擇范圍視圖 language: 'zh-CN',//漢化 }); }); </script> </body> </html>
效果圖：
源碼地址：https://gitee.com/yangliyuan96/bootstrapdatetimepicker.git
一定要引入：
