BootStrap 时间控件

最新推荐文章于 2025-07-22 13:59:36 发布

milkhq

最新推荐文章于 2025-07-22 13:59:36 发布

阅读量938

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap datepicker

本文链接：https://blog.youkuaiyun.com/milkhq/article/details/79616339

本文介绍了BootStrap时间控件的配置，包括选择年、月、日的选项。在遇到已初始化的时间控件需要根据用户选择动态调整显示内容的问题时，提供了解决方案：先通过$('#datepicker').datepicker('remove')移除原有实例，再重新初始化。

概述：BootStrap 时间控件可配置为只选择年、选择年月、选择年月日

1）起始范围startView可以自定，相关属性如下：
$('#datepicker').datepicker({
format: 'yyyymm',
weekStart: 1, //一周从哪一天开始
autoclose: true, //选择完日期后，弹出框自动关闭
startView: 2, //起始选择范围:0为天，1为月，2为年
maxViewMode: 1, //最大选择范围
minViewMode:1, //最小选择范围
forceParse: false, //强制解析
language: 'zh-CN' //语言选择
});

2）需引入js（注意：不是bootstrap-datetimepicker.js）
<script src="../plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

3）举例说明
[年格式]
$('#datepicker').datepicker({
language: 'zh-CN',
autoclose: true,
startView: 2, //2为年
maxViewMode: 1,
minViewMode:1,
format: 'yyyy'
});
[月格式]
$('#datepicker').datepicker({
language: 'zh-CN',
autoclose: true,
startView: 1, //1为月
maxViewMode: 2,
minViewMode:1,
format: 'yyyy-mm'
});
[日格式]
$('#datepicker').datepicker({
language: 'zh-CN',
autoclose: true,
startView: 0, //0为日
maxViewMode: 2,
minViewMode:0,
format: 'yyyy-mm-dd'

});

4）遇到的问题
$('#datepicker').datepicker（...）初始化生成实例后，想要在页面根据用户选择“按年”、“按月”、“按天”查询，灵活改变时间控件显示的内容，直接在js里再执行一遍$('#datepicker').datepicker（...）是不起任何作用的，因为实例已生成，这时，只需要在前面加一句：$('#datepicker').datepicker("remove")即可。

附：
1 format 格式
2 weekStart 一周从哪一天开始
3 startDate 开始时间
4 endDate 结束时间
5 daysOfWeekDisabled 一周的周几不能选
6 autoclose 选完时间后是否自动关闭
7 startView 选完时间首先显示的视图
8 minView 最精确的时间
9 maxView 最高能展示的时间
10 todayBtn 当天日期按钮
11 todayHighlight 当天日期高亮
12 keyboardNavigation 方向键改变日期
13 language 语言
14 forceParse 强制解析
15 minuteStep 步进值
16 pickerPosition 选择框位置
17 showMeridian 是否显示上下午
18 initialDate 初始化日期时间