datetimepicker庫運用

前端開始時間–結束時間：

時間段：
<input size="24" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="24" type="text" id="datetimeEnd" readonly class="form_datetime">&nbsp;&nbsp;
<button type="button" class="btn btn-info btn-sm" id="findData">搜索</button>

<table id="smoke" style="width: 100%;" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>projectname</th>
            <th>buildname</th>
            <th>starttime</th>
            <th>endTime</th>
            <th>totalcases</th>
            <th>totaltime</th>
            <th>failcases</th>
            <th>skipcases</th>
            <th>passrate</th>
            <th>downtime</th>
            <th>flashtime</th>
        </tr>
    </thead>
    <tbody id="smoke_tbody">

    </tbody>
</table>

<script type="text/javascript">
    $(function () {
    	
        $(".form_datetime").datetimepicker({
            todayBtn: true,
            language: 'zh-CN',
            autoclose: true,    //當選擇一個日期之後是否立即關閉此日期時間選擇器
            todayHighlight: true,
            startView:2,    //點開插件後顯示的界面。0、小時1、天2、月3、年4、十年，默認值2
            minView : 0,//插件可以精確到那個時間，比如1的話就只能選擇到天，不能選擇小時了
            maxView: 4,//同理
            forceParse: true,
            format: "yyyy-mm-dd hh:ii:ss",//設置時間格式，默認值: 'mm/dd/yyyy'
            todayBtn : true,//是否在底部顯示“今天”按鈕
            todayHighlight : true,//是否高亮當前時間
            keyboardNavigation : true,//是否允許鍵盤選擇時間
            language : 'zh-CN',//選擇語言，前提是該語言已導入
            pickerPosition : "bottom-right",//顯示的位置，還支持bottom-left
            initialDate : new Date(),//初始化當前日期

        });

        //日期時間選擇器
        $("#datetimeStart").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true,
            minView: "month",
            maxView: "decade",
            todayBtn: true,
            pickerPosition: "bottom-left",
            language: 'zh-CN',
            startDate:new Date(),
            initialDate : new Date(),//初始化當前日期
        }).on("click",function(ev){
            $("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
        });
        $("#datetimeEnd").datetimepicker({
            format: "yyyy-mm-dd hh:ii:ss",
            autoclose: true,
            minView: "month",
            maxView: "decade",
            todayBtn: true,
            pickerPosition: "bottom-left",
            language: 'zh-CN',
            startDate:new Date(),
            initialDate : new Date(),//初始化當前日期
        }).on("click",function(ev) {
            $("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
        });

		$.ajax({
            type: "get",
            url: "/findSmokeDataByDate",
            data: {
                "startTime": moment().format("YYYY-MM-DD"),	// 當天時間
                "endTime": moment().add(1, "days").format("YYYY-MM-DD")// 明天時間
            },
            success: function (data) {
                console.log(data);
                updateSmokeTable(data);
            },
            error:function (msg) {
                alert("網絡延遲，請待會加載！");
            },
            dataType: "json"
        });
        
    	$("#findData").click(function () {
            var startTime = $("#datetimeStart").val();
            var endTime = $("#datetimeEnd").val();
            $.ajax({
                type: "get",
                url: "/findSmokeDataByDate",
                data: {
                    "startTime": startTime,
                    "endTime": endTime
                },
                success: function (data) {
                    console.log(data);
                    updateSmokeTable(data);
                },
                error:function (msg) {
                    alert("網絡延遲，請待會加載！");
                },
                dataType: "json"
            });
        });
		
		$("#smoke").DataTable({
            scrollY: 1460,
            "scrollX": true,     //啓動水平滾動
            "pageLength": 80,
            // lengthChange: false,    //每頁可顯示的數據記錄數
            // buttons:  ['copy', 'excel', 'pdf']
            // "pagingType":"full_numbers",
            // "order": [[ 3, "desc" ]]    //默認排序
        });
    });


function updateSmokeTable(data) {
    // 3.動態修改smokeBrief的數據
    // 動態生成table中的tbody
    $("#smoke").dataTable().fnClearTable();     //清空一下table
    $("#smoke").dataTable().fnDestroy();        //還原初始化了的datatable
    // $("#smoke_tbody").empty();
    // $("#build").append("<option value = '' disabled selected>請選擇版本</option>")
    for(var i=0;i<data.length;i++){
        var $tr = $("<tr></tr>");
        $tr.append("<td>"+data[i].prj_name+"</td>");
        $tr.append("<td>"+data[i].build_name+"</td>");
        $tr.append("<td>"+data[i].start_time+"</td>");
        $tr.append("<td>"+data[i].end_time+"</td>");
        $tr.append("<td>"+data[i].total_cases+"</td>");
        $tr.append("<td>"+data[i].total_time+"</td>");
        $tr.append("<td>"+data[i].fail_cases+"</td>");
        $tr.append("<td>"+data[i].skip_cases+"</td>");
        $tr.append("<td>"+data[i].pass_rate+"</td>");
        $tr.append("<td>"+data[i].downtime+"</td>");
        $tr.append("<td>"+data[i].flashtime+"</td>");
        $("#smoke_tbody").append($tr);
    }
    //dataTable重新渲染
    $("#smoke").dataTable({
        scrollY: 1460,
        "scrollX": true,     //啓動水平滾動
        "pageLength": 80,
    });
}

</script>