分享個時間插件datetimepicker

使用方法如下，html裏面加上日期輸入框，需要引入jquery跟bootstrap的相關js，大概代碼如下

<form class="form">
    <div class="floor date-floor clearfix">
        <br/><br/><br/>
        <div class="fl-title  pull-left">日期：</div>
        <div class="date-box pull-left">
            <input id="start" class="date-input form_date" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd" type="text" placeholder="開始日期">&nbsp;&nbsp;-&nbsp;&nbsp;
            <input id="end" class="date-input form_date" data-date-format="yyyy-mm-dd" data-link-format="yyyyy-mm-dd" type="text" placeholder="結束日期">
        </div>
    </div>
</form>

$(function () {
    /*日期插件*/

        $('.form_date').datetimepicker({
            language: 'zh-CN',//語言,
            weekStart: 1,
            todayBtn:  1,
            //todayBtn: "linked",
            autoclose: true,//日期選擇完成後是否關閉選擇框
            todayHighlight: 1,
            startView: 2,//1爲日視圖 2爲月份視圖 3爲12個月的概述
            minView:3,//表示日期選擇的最小範圍，默認是hour */
            forceParse: 0,
            format: 'yyyy-mm-dd',//日期的格式
            bootcssVer:3,//顯示向左向右的箭頭
            endDate:new Date() //控制最大可選時間爲今天，去掉就是不限制時間選擇範圍
        });
    
    /*自定義時間*/
    $(".date-input").on('changeDate',function(){
        if($("#start").val()!=''&&$("#end").val()!=''){
            if($("#start").val()>$("#end").val()){
                alert('搜索開始時間不能大於結束時間');
                $("#start").val('');
            }else{
                $('.date-list li').removeClass('active');
            }
        }

    });
});

頁面看到的效果如下，使用還不錯，比較簡潔

整個演示的demo我已經上傳CSDN，下載需要5積分，下載地址