bootstrap-datetimepicker插件 設置初始值爲某天

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

效果如下圖:
在這裏插入圖片描述

.


前端–bootstrap-datetimepicker 用法總結(超詳細)

https://blog.csdn.net/VIP_CR/article/details/104331580

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章