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>