控件引入

日期范围公用方法

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

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

日期控件初始化

时间显示到日

时间显示到月

时间显示到年

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

日期控件重置

控件引入

需要引入的文件：

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);

bootstrap-datepicker日期控件相关推荐

jQuery里面的datepicker日期控件默认是显示英文的，如何显示中文或其他语言呢？...
jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...
[技术分享]20171130_Kendo UI _ datePicker日期控件如何只选择年，不选择月，日？
datePicker日期控件是很常用的控件,可以使用 start , depth来控制取值的范围. start ,depth可以选择的参数有month,year,decade ,century . 如 ...
WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
原文:WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐 ...
javaFX学习之DatePicker日期控件
附送我自定义的日期格式化工具类: import java.text.DateFormat; import java.text.ParseException; import java.text.Simp ...
Datepicker日期控件“今天”按钮点击没反应
今天在测试过程中,遇到一个问题: 日期控件中的"今天"点击后没反应: 看js代码也设置了"todayBtn:true" 后来看到一篇博客(点击查看原文)上讲,原 ...
jquery给日期赋值_用js为Jquery datepicker日期控件赋值
把从数据库得到的日期值存在hidden控件中,用js取出hidden控件中的值,进行字符串处理后赋给datepicker控件 $("#").datepicker({ dateFor ...
Vue项目中使用ant-design时设置DatePicker日期控件中文显示
默认配置为 en-US,如果你需要设置其他语言,推荐在入口处使用提供的国际化组件,详见:LocaleProvider 国际化. 方式一:在组件中单独设置 import locale from 'ant ...
DatePicker 日期控件，禁止选择当前之前(之后)时间
一.直接上代码 <el-date-pickerv-model="form.endDate"type="date"value-format="yy ...
bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法
筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...
Bootstrap中datetimepicker日期控件1899年问题解决
@加粗样式TOC Bootstrap中datetimepicker日期控件1899年问题解决 Bootstrap中datetimepicker日期控件1899年问题解决最近在开发项目的过程中,遇到一 ...

bootstrap-datepicker日期控件

控件引入

日期范围公用方法

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

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

日期控件初始化

时间显示到日

时间显示到月

时间显示到年

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

日期控件重置

bootstrap-datepicker日期控件相关推荐

最新文章

热门文章