bootstrap-datepicker3 plugin

HTML引入

<link th:href="@{/ajax/libs/datapicker/datepicker3.css}" rel="stylesheet"/>

<script th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>

HTML控件

<div class="form-group has-feedback">
    <label class="col-sm-3 control-label">计划约谈月份：</label>
    <div class="col-sm-8">
        <span class="glyphicon glyphicon-calendar form-control-feedback"></span>
        <input id="planInspectDate" name="planInspectDate" type="text" class="form-control" th:readonly="true">
    </div>
</div>

JavaScript 脚本

// 计划约谈月份 日期选择器
$('#planInspectDate').datepicker({
    language: "zh-CN",
    format: "yyyy-mm", 
    startView: 1, 
    minViewMode: 1,
    maxViewMode: 2,
    autoclose: true,
    toggleActive: true
})

参数	解释	取值
startView	打开时间选择器，显示的视图	0：日，1：月，2：年
minViewMode	视图的最小单位，日，月，年取值从小到大	0：日，1：月，2：年
maxViewMode	视图的最大单位	0：日，1：月，2：年
autoclose	选择后关闭	true or false
toggleActive	点击选择，再次点击取消	true or false

最终结果

参考链接

bootstrap-datepicker3