开始结束时间比较大小（实用）

第一步：引入日历calendar.css文件

<link rel="stylesheet" href="MobileRiLi/calendar.css" />

设置一下样式：

<style type="text/css">
        html {
            font: 500 14px 'roboto';
            color: #333;
            background-color: #fafafa;
        }

 

        a {
            text-decoration: none;
        }

 

        ul, ol, li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

 

        #demo {
            width: 300px;
            margin: 150px auto;
        }

 

        p {
            margin: 0;
        }

 

        #dt {
            margin: 30px auto;
            height: 28px;
            width: 200px;
            padding: 0 6px;
            border: 1px solid #ccc;
            outline: none;
        }

        #dt2 {
            margin: 30px auto;
            height: 28px;
            width: 200px;
            padding: 0 6px;
            border: 1px solid #ccc;
            outline: none;
        }
    </style>

第二步：head里面建一个调用方法

<script>
        //验证日期（判断结束日期是否大于开始日期）日期格式为YY—MM—DD
        function check() {
            var str_date = document.getElementById("dt").value;
            var end_date = document.getElementById("dt2").value;

            if (str_date.length > 0 && end_date.length > 0) {
                var startTmp = str_date.split("-");
                var endTmp = end_date.split("-");
                var sd = new Date(startTmp[0], startTmp[1], startTmp[2]);
                var ed = new Date(endTmp[0], endTmp[1], endTmp[2]);
                if (sd.getTime() > ed.getTime()) {
                    alert("开始日期不能大于结束日期");
                    return false;
                }
            }
            return true;
        }

</script>

第三步：<form runat="server"></form>里面添加div容器

      <div id="demo">
            <input type="text" id="dt" placeholder="开始日期trigger calendar" οnclick="check()" />
            <div id="dd"></div>

            <input type="text" id="dt2" placeholder="结束日期trigger calendar" οnclick="check()" />
            <div id="dd2"></div>
            <button type="button" οnclick="check();">确认 </button>
        </div>

第四步：引入jquery.js文件和calendar.js文件，自己百度下一个就好了

        <script src="MobileRiLi/js/jquery.js"></script>
        <script src="MobileRiLi/js/calendar.js"></script>
        <script>

            $('#dd').calendar({
                trigger: '#dt',
                zIndex: 999,
                format: 'yyyy-mm-dd',
                onSelected: function (view, date, data) {
                    console.log('event: onSelected')
                },
                onClose: function (view, date, data) {
                    console.log('event: onClose')
                    console.log('view:' + view)
                    console.log('date:' + date)
                    console.log('data:' + (data || 'None'));
                }
            });

            $('#dd2').calendar({
                trigger: '#dt2',
                zIndex: 999,
                format: 'yyyy-mm-dd',
                onSelected: function (view, date, data) {
                    console.log('event: onSelected')
                },
                onClose: function (view, date, data) {
                    console.log('event: onClose')
                    console.log('view:' + view)
                    console.log('date:' + date)
                    console.log('data:' + (data || 'None'));
                }
            });
        </script>

注：比较实用，自己一个一个敲出来的，功能有限，大神勿喷！