下载地址:https://github.com/uxsolutions/bootstrap-datepicker
1、引入相关css/js
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/locales/bootstrap-datepicker.zh-CN.js"></script>
2、输入框
<input type="text" id="input_date" class="datepicker form-control" />
3、js
//显示年月日
$('.datepicker').datepicker({
minView: "day", // 选择时间时,最小可以选择到那层;默认是‘hour’也可用0表示
language: 'zh-CN', // 语言
autoclose: true, // true:选择时间后窗口自动关闭
format: 'yyyy-mm-dd', // 文本框时间格式,设置为0,最后时间格式为2017-03-23 17:00:00
//todayBtn: true, // 如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。
defaultViewDate: true,
/*todayBtn:'linked',
todayHighlight: 1*/
});
//显示年月
$('.datepicker').datepicker({
autoclose: true, //自动关闭
clearBtn: true, //显示清除按钮
forceParse: true, //是否强制转换不符合格式的字符串
format: 'yyyy-mm', //日期格式
language: 'zh-CN', //语言
minViewMode: 1, // 最小精度选择
startView: 1, //开始显示
});
4、date-range
html:
<div class="input-group input-daterange datepicker">
<input type="text" class="form-control" value="">
<div class="input-group-addon">到</div>
<input type="text" class="form-control" value="">
</div>
js:
$(".datepicker").datepicker({
language: "zh-CN",
autoclose: true
});