<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>
效果如下圖:
.