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 < d