<script type="text/javascript">
//页面初始化时，设置日期选择器的时间
$(document).ready(function () {
var d = new Date(); //日期方法
var yearDate = d.getFullYear(); //今年
var monthDate = yearDate + '-' + Appendzero(d.getMonth() + 1); //本月
//当天日期，相当于c# 里的 DateTime.Now
var nowDate = monthDate + '-' + Appendzero(d.getDate()); //当天
var nowAllDate = nowDate + ' ' + d.getHours(); //当前小时
var firstMonthZero = monthDate + '-01 00'; //本月1号0点
var firstMonth = d.getFullYear() + '-' + (d.getMonth() + 1) + '-01'; //本月1号
var fiveYearAgo = getBeforeDate(1825); //5年前 365*5=1825
var fiveYears = (yearDate - 6) + '-12' + '-30'; //6年前,因为必须设置6年前，五年前的年份才能选中
////日期选择控件--时间段查询 ，开始时间
$("#datetimepicker_start").datetimepicker({
todayBtn: "linked", //日期选择器底部今天按钮，为链接的方式，点击直接跳转到今天
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true, //选择一个日期之后是否立即关闭日期选择器
format: "yyyy-mm-dd",
startDate: new Date(fiveYearAgo.replace(/-/, "/")), //设置开始时间：5年前的今天
endDate: new Date(), //默认值：结束时间 (大于本月的月份不能选)
//startView: 2, //日期时间选择器打开之后首先显示的视图（分0 时1 日2 月3 年4）
language: 'zh-CN',
minView: 2, //精确到月3（分0 时1 日2 月3 年4）
initialDate: firstMonth //设置初始值为当月1号，也可以直接使用字符串 '2020-03-01'
});
////日期选择控件--时间段查询 ，结束时间
$("#datetimepicker_end").datetimepicker({
todayBtn: "linked", //日期选择器底部今天按钮，为链接的方式，点击直接跳转到今天
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true, //选择一个日期之后是否立即关闭日期选择器
format: "yyyy-mm-dd",
startDate: new Date(fiveYearAgo.replace(/-/, "/")), //设置开始时间：5年前的今天
endDate: new Date(), //默认值：结束时间 (大于本月的月份不能选)
//startView: 2, //日期时间选择器打开之后首先显示的视图（分0 时1 日2 月3 年4）
language: 'zh-CN',
minView: 2, //精确到月3（分0 时1 日2 月3 年4）
initialDate: new Date() //设置初始值为当天
});
//时间段查询-文本框赋值 开始时间
$("#txt_datetimepicker_start").val(firstMonth);
//时间段查询-文本框赋值 结束时间
$("#txt_datetimepicker_end").val(nowDate);
////日期选择控件--月查询 ，这个月以后的月份不能选择
$("#datetimepicker_tab2").datetimepicker({
//todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true, //选择一个日期之后是否立即关闭日期选择器
format: "yyyy-mm",
startDate: new Date(fiveYearAgo.replace(/-/, "/")), //设置开始时间：5年前的今天
endDate: new Date(), //默认值：结束时间 (大于本月的月份不能选)
startView: 3, //日期时间选择器打开之后首先显示的视图（分0 时1 日2 月3 年4）
language: 'zh-CN',
minView: 3, //精确到月3（分0 时1 日2 月3 年4）
initialDate: new Date()
});
//月查询-文本框赋值
$("#txt_datetimepicker_tab2").val(monthDate);
////日期选择控件--年查询 ，今年以后的年份不能选择
$("#datetimepicker_tab4").datetimepicker({
//todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true, //选择一个日期之后是否立即关闭日期选择器
format: "yyyy",
startDate: new Date(fiveYears.replace(/-/, "/")), //设置开始时间：5年前的今天
endDate: new Date(), //默认值：结束时间 (大于本月的月份不能选)
startView: 4, //日期时间选择器打开之后首先显示的视图（分0 时1 日2 月3 年4）
language: 'zh-CN',
minView: 4, //精确到年4（分0 时1 日2 月3 年4）
initialDate: new Date()
});
//年查询-文本框赋值
$("#txt_datetimepicker_tab4").val(yearDate);
////日期选择控件--时间段查询 ，开始时间
$("#datetimepicker_tab5start").datetimepicker({
//todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true, //选择一个日期之后是否立即关闭日期选择器
format: "yyyy-mm-dd hh",
startDate: new Date(fiveYearAgo.replace(/-/, "/")), //设置开始时间：5年前的今天
endDate: new Date(), //默认值：结束时间 (大于本月的月份不能选)
//startView: 2, //日期时间选择器打开之后首先显示的视图（分0 时1 日2 月3 年4）
language: 'zh-CN',
minView: 1, //精确到月3（分0 时1 日2 月3 年4）
initialDate: firstMonthZero //设置初始化日期为 本月1号0点
});
////日期选择控件--时间段查询 ，开始时间
$("#datetimepicker_tab5end").datetimepicker({
//todayBtn: "linked",
keyboardNavigation: false,
forceParse: false,
calendarWeeks: true,
autoclose: true, //选择一个日期之后是否立即关闭日期选择器
format: "yyyy-mm-dd hh",
startDate: new Date(fiveYearAgo.replace(/-/, "/")), //设置开始时间：5年前的今天
endDate: new Date(), //默认值：结束时间 (大于本月的月份不能选)
//startView: 2, //日期时间选择器打开之后首先显示的视图（分0 时1 日2 月3 年4）
language: 'zh-CN',
minView: 1, //精确到月3（分0 时1 日2 月3 年4）
initialDate: new Date()
});
//时间段查询-文本框赋值 开始时间
$("#txt_datetimepicker_tab5start").val(firstMonthZero);
//时间段查询-文本框赋值 结束时间
$("#txt_datetimepicker_tab5end").val(nowAllDate);
});
//小于10补一个0，解决一个页面有开始时间和结束时间进行时间比较时，因为缺少0导致比较结果有误
function Appendzero(obj) { if (obj < 10) return "0" + obj; else return obj; }
//获取当前日期几天前的日期（如时间的前七天的日期 getBeforeDate(7)）
function getBeforeDate(n) {
var n = n;
var d = new Date();
var year = d.getFullYear();
var mon = d.getMonth() + 1;
var day = d.getDate();
if (day <= n) {
if (mon > 1) {
mon = mon - 1;
}
else {
year = year - 1;
mon = 12;
}
}
d.setDate(d.getDate() - n);
year = d.getFullYear();
mon = d.getMonth() + 1;
day = d.getDate();
s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
return s;
}
</script>
效果如下图：
.