bootstrap日歷控件datetimepicker基本用法

 

1.情景展示

　　使用boostrap時間插件可以實現這樣的效果

2.具體操作

　　第一步：引入對應的js和css

<link type="text/css" rel="stylesheet" href="bootstrap/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="bootstrap/bootstrap-datetimepicker.min.css" />
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap-datetimepicker.min.js"></script>

　　一個也不能少！！！

　　第二步：input標簽

<!-- id或者class都行，和js保持一致 -->
<input class="form_datetime" name="C201" readonly>　

　　第三步：初始化設置

$(function() {
    //中文設置
    $.fn.datetimepicker.dates['zh-CN'] = {
        days : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ],
        daysShort : [ "周日", "周一", "周二", "周三", "周四", "周五", "周六" ],
        daysMin : [ "日", "一", "二", "三", "四", "五", "六" ],
        months : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月",
                "十月", "十一月", "十二月" ],
        monthsShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
                "九月", "十月", "十一月", "十二月" ],
        today : "今天",
        suffix : [],
        meridiem : [ "上午", "下午" ]
    };
    // 初始化，設置具體的屬性
    $(".form_datetime").datetimepicker({
        format : 'yyyy-mm-dd',// 日期格式化
        startView : 'month',// 初始化視圖（進行日期選擇時，彈出來的頁面）
        maxView : 'decade',// 最大視圖：十年
        minView : 'month',// 最小視圖：月
        pickerPosition : "bottom-left",// 設置日期選擇器位置
        language : 'zh-CN',// 語言
        autoclose : true,// 選擇完畢，自動關閉
        todayBtn : true,// 顯示當天按鈕
    });
    // 添加默認時間
    //$('.form_datetime').datetimepicker('setDate', new Date());
});　　

　　20200610說明：

　　startView，maxView，minView的值都有兩種選擇

　　只不過用字符串能明顯知道是啥意思，建議用后者，省得忘了

3.時間限制

　　情形一：限制開始時間和結束時間

　　如上圖所示，需要限制：開始日期的最大值不能大於結束日期，結束日期的最小值不能小於開始日期，如何實現？

  開始日期：<input class="form_datetime" style="width:120px;" name="BIRTH_DATE" id="startDate" readonly>
  結束日期：<input class="form_datetime" style="width:120px;" name="BIRTH_DATE" id="endDate" readonly>
<input id="SearchImage" type="button" class="Button" value=" 查 詢 "
    onclick="javascript:report.search()"
    onmouseover="this.className='ButtonOver'" onmouseout="this.className='Button'" />

// 日期控件屬性設置（相當於初始化）
$(".form_datetime").datetimepicker({
    format:'yyyy-mm-dd',
    startView:'month',
    maxView:'year',
    minView:'month',
    pickerPosition: "bottom-left",
    language:'zh-CN',
    autoclose: true,
    todayBtn:true
});

// 設置endDate的最小值， 不能小於startDate
$("#startDate").datetimepicker().on('changeDate', function (e) { 
    $('#endDate').datetimepicker('setStartDate',e.date);
});
// 設置startDate的最大值， 不能大於endDate
$("#endDate").datetimepicker().on('changeDate', function (e) { 
    $('#startDate').datetimepicker('setEndDate',e.date);
});　　

　　情形二：單獨限制開始時間或結束時間

　　直接設置datetimepicker的setStartDate和setEndDate屬性即可，不過一般情況下，情形二最為常見。

　　限制日期控件的開始時間（可選最小值）

　　方式一：

$(".form_datetime").datetimepicker({
    startDate:new Date()
});

　　方式二：　　

$('#startDate').datetimepicker('setStartDate',e.date);

　　限制日期控件的結束時間（可選最大值）

$(".form_datetime").datetimepicker({
    endDate:new Date()
});　　

$('#startDate').datetimepicker('setEndDate',e.date);

　　需要注意的是：以上兩種方式，可接受的值必須為date類型才行！！！

　　情形三：設置默認值

　　方式一

　　還以開始時間和結束時間為例，設置開始時間為系統當前月的第一天，結束時間為系統當前時間，如何實現？

// 頁面加載完畢后需要執行的代碼
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = (month <= 9) ? "0" + month : month;
var day = date.getDate();
day = (day <= 9) ? "0" + day : day;

// 設置默認值
$("#startDate")[0].value = year + "-" + month + "-01";
$("#endDate")[0].value = year + "-" + month + "-" + day;

　　方式二

$("#startDate").datetimepicker("setDate", new Date());

 

寫在最后

　　哪位大佬如若發現文章存在紕漏之處或需要補充更多內容，歡迎留言！！！

 相關推薦：

• 個人主頁
• 參考鏈接
• 官網鏈接
• http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
• bootstrap-datetimepicker雙日歷動態設置日期可選范圍（可切換成月、日）
• 另一日期插件：myDate97