bootstrap-datepicker日期控件

最新推荐文章于 2026-04-23 12:46:55 发布

原创最新推荐文章于 2026-04-23 12:46:55 发布 · 5.4k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap #html #javascript

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文档详细介绍了如何使用bootstrap-datepicker日期控件，包括控件的引入、日期范围的公共方法如获取当前日期前后几天和月份，以及日期控件的初始化设置，如时间显示到日、月、年的配置，还涵盖了时间点多选功能和日期控件的重置操作。

控件引入

需要引入的文件：

datepicker/bootstrap-datepicker.css

datepicker/bootstrap-datepicker.js

datepicker/locales/bootstrap-datepicker.zh-CN.js (如果需要显示中文的话引用此文件)

日期范围公用方法

通常日期范围显示近几天、近几个月或近几年，其中近几天、近几个月可以写为一个公用方法

获取当前日期的前/后几天

/**
 * 获取当前日期的前N天
 * @param addDayCount 前N天（-N） 后N天（N）
 * @returns {String} yyyy-MM-dd
 */
function getDateStr(addDayCount) {   
   var dd = new Date();  
   dd.setDate(dd.getDate()+addDayCount);//获取AddDayCount天后的日期  
   var y = dd.getFullYear();   
   var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0  
   var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();//获取当前几号，不足10补0  
   return y+"-"+m+"-"+d;   
}

获取当前月份的前/后几个月

/**
 * 获取当前月份的前N个月
 * @param addMonthCount 前N个月（-N） 后N个月（N）
 * @returns {String} yyyy-MM
 */
function getMonthStr(addMonthCount){
	var dd = new Date();  
    dd.setMonth(dd.getMonth()+addMonthCount);//获取AddDayCount天后的日期  
    var y = dd.getFullYear();   
    var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0  
    return y+"-"+m;
}

日期控件初始化

在项目中用到的比较多，我就把它提取为公用方法，只需要传入对应名称、显示格式、显示视图即可，为方便管理，我统一将HTML对应的id写为DayCalendar、MonthCalendar、YearCalendar，在传入名称时，直接传Day、Month、Year即可。

同时在项目中，也用到了datepicker时间点多选，也一同加在公用方法中，id写为multiDate_Day、multiDate_Month、multiDate_Year

/**
 * 时间格式化
 */
function dateFormatFunc(dateType) {
    let idName,format,view;
    let endTime = new Date();
    for (let i = 0; i < dateType.length; i++) {
        idName = "#" + dateType[i].name + "Calendar";
        format = dateType[i].format;
        view = dateType[i].view;
        if ($(idName +' .startTime').length > 0) {
            // 时间范围-开始时间
            $(idName +' .startTime').datepicker({
                format:format,
                language: 'zh-CN',
                weekStart: 1,
                autoclose: true,
                startView: view,
                minViewMode:view,
                endDate: endTime,
            }).on('changeDate', function(ev){
                idName = "#" + $(ev.currentTarget).parent().attr("id");
                $(idName +' .endTime').datepicker('setStartDate',ev.date);
            });
            // 时间范围-结束时间
            $(idName +' .endTime').datepicker({
                format:format,
                language: 'zh-CN',
                weekStart: 1,
                autoclose: true,
                startView: view,
                minViewMode:view,
                endDate: endTime,
            }).on('changeDate', function(ev){
                idName = "#" + $(ev.currentTarget).parent().attr("id");
                $(idName +' .startTime').datepicker('setEndDate',ev.date);
            });
        }
        // 时间点多选
        if ($("#multiDate_" + dateType[i].name).length > 0) {
            // 时间点 多选
            $("#multiDate_" + dateType[i].name).datepicker({
                format:format,
                language: 'zh-CN',
                weekStart: 1,
                startView: view,
                minViewMode:view,
                endDate: endTime,
                multidate: 5,
                multidateSeparator: ';',
            });
        }
    }
}

时间显示到日

日期范围显示近7天

<div class="input-group" id="DayCalendar">
    <input size="16" type="text" value="" readonly class="startTime form-control" >
    <span class="time-link">&nbsp;--&nbsp;</span>
    <input size="16" type="text" value="" readonly class="endTime form-control" >
</div>

设置日期控件setStartDate、setEndDate，也可以写在公用方法中，调用的时候传入即可

// 时间范围默认近7天
$("#DayCalendar .startTime").val(getDateStr(-6));
$("#DayCalendar .endTime").val(getDateStr(0));

// 调用日期控件初始化方法
let dateType = [{
    name: 'Day',
    format: "yyyy-mm-dd",
    view: 0
}];
dateFormatFunc(dateType);

// 设置控件的setStartDate、setEndDate
$("#DayCalendar .endTime").datepicker('setStartDate',getDateStr(-6));
$("#DayCalendar .startTime").datepicker('setEndDate',getDateStr(0));

时间显示到月

日期范围显示近4个月

<div class="input-group" id="MonthCalendar">
    <input size="16" type="text" value="" readonly class="startTime form-control" >
    <span class="time-link">&nbsp;--&nbsp;</span>
    <input size="16" type="text" value="" readonly class="endTime form-control" >
</div>

// 时间范围默认近4个月
$("#MonthCalendar .startTime").val(getMonthStr(-3));
$("#MonthCalendar .endTime").val(getMonthStr(0));

// 调用日期控件初始化方法
let dateType = [{
    name: 'Month',
    format: "yyyy-mm",
    view: 1
}];
dateFormatFunc(dateType);

// 设置控件的setStartDate、setEndDate
$("#MonthCalendar .endTime").datepicker('setStartDate',getMonthStr(-3));
$("#MonthCalendar .startTime").datepicker('setEndDate',getMonthStr(0));

时间显示到年

日期范围显示近3年

<div class="input-group" id="YearCalendar">
    <input size="16" type="text" value="" readonly class="startTime form-control" >
    <span class="time-link">&nbsp;--&nbsp;</span>
    <input size="16" type="text" value="" readonly class="endTime form-control" >
</div>

var date = new Date();
// 时间范围默认近3年
$("#YearCalendar .startTime").val(date.getFullYear()-2);
$("#YearCalendar .endTime").val(date.getFullYear());

// 调用日期控件初始化方法
let dateType = [{
    name: 'Year',
    format: "yyyy",
    view: 2
}];
dateFormatFunc(dateType);

// 设置控件的setStartDate、setEndDate
$("#YearCalendar .endTime").datepicker('setStartDate',(date.getFullYear()-2).toString());
$("#YearCalendar .startTime").datepicker('setEndDate',date.getFullYear().toString());

时间点多选（日、月、年）

<input size="16" type="text" value="" readonly id="multiDate_Day" class="multiDate form-control" >
<input size="16" type="text" value="" readonly id="multiDate_Month" class="multiDate form-control" >
<input size="16" type="text" value="" readonly id="multiDate_Year" class="multiDate form-control" >

let dateType = [{
    name: 'Day',
    format: "yyyy-mm-dd",
    view: 0
},{
    name: 'Month',
    format: "yyyy-mm",
    view: 1
},{
    name: 'Year',
    format: "yyyy",
    view: 2
}];
dateFormatFunc(dateType);

日期控件重置

日期重置input置空，并且需要重新设置setStartDate、setEndDate

$(".startTime, .endTime").val("");
let endTime = new Date();
endTime.setDate(endTime.getDate());
$(".startTime").datepicker('setEndDate',endTime);
$(".endTime").datepicker('setStartDate',null);