基于jquery.ui的datepicker用法。

最新推荐文章于 2018-12-26 17:18:12 发布

han_hanker

最新推荐文章于 2018-12-26 17:18:12 发布

阅读量346

点赞数

分类专栏： jquery 文章标签： datepicker 日历

本文链接：https://blog.csdn.net/u012258564/article/details/61209659

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这个是一个网页中常见的日历选择器

一、要求

1.不能选择今天之前和30天以后的日期
2.结束日期不能小于开始日期。如果选择了结束日期小于开始日期，则开始日期为结束日期-1。

二、代码

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="jq/jquery-ui.min.css" />
    </head>
    <style type="text/css">

    </style>

    <body>
        <!--time -->
        <div id="time" class="box">
            <h3>time</h3>
            <div id="demo">
            </div>
        </div>
        <!-- calendar -->
        <div id="calendar" class="box">
            <h3>calendar</h3>
            <p>开始时间：<input type="text" id="enter" />
            结束时间：<input type="text" id="leave" /></p>
        </div>
    </body>

</html>
<script type="text/javascript" src="jq/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jq/jquery-ui.min.js"></script>
<script type="text/javascript" src="jq/ui-CH.js"></script>
<script>
    $(function() {
        //显示今天的时间函数
        function getT() {
            var date = new Date();
            document.getElementById('demo').innerHTML = showTime(date);
        }

        function showTime(date) {
            var yy = date.getFullYear();
            var mm = date.getMonth() + 1;
            var dd = date.getDate();
            var hh = date.getHours();
            var ii = date.getMinutes();
            var ss = date.getSeconds();
            var ww = date.getDay();
            if(ww == 0) ww = '星期日';
            if(ww == 1) ww = '星期1';
            if(ww == 2) ww = '星期2';
            if(ww == 3) ww = '星期3';
            if(ww == 4) ww = '星期4';
            if(ww == 5) ww = '星期5';
            if(ww == 6) ww = '星期6';

            mm = getFormatDate(mm);
            dd = getFormatDate(dd);
            hh = getFormatDate(hh);
            ii = getFormatDate(ii);
            ss = getFormatDate(ss);
            //return yy + '-' + mm + '-' + dd;
            return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + ii + ':' + ss + ' ' + ww;
        }
        // 日期月份/天的显示，如果是1位数，则在前面加上'0'
        function getFormatDate(arg) {
            if (arg == undefined || arg == '') {
                return '';
            }

            var re = arg + '';
              if (re.length < 2) {
                  re = '0' + re;
              }

            return re;
        }
        function tick() {
            getT();
            setInterval(getT, 1000);
        }
        tick();



        //日历控件
        // 
        $('#enter').datepicker({
            minDate: 0, //不能选择今天以前的日期
            maxDate: +30 //不能选择30天后的日期

        });
        $('#leave').datepicker({
            minDate: 1,
            maxDate: +30
        });

        $('#enter').val( getD() ); //获得今天的时间
        $('#leave').val( addDate( getD(), 1) ); //获得明天的日期
        //当开始结束日期改变式触发
        $('#enter').on('change',function() {
            if( compareDateTime( $(this), $('#leave') ) ){
                //这里通过addDate函数 把日期加1，然后赋值个结束时间
                $('#leave').val( addDate($(this).val(), 1));
            }
        });

        $('#leave').on('change',function() {
            if( compareDateTime( $('#enter'), $(this) ) ){
                $('#enter').val( addDate($(this).val(), -1));
            }
        });

        //获取今天的日期
        function getD(){
            //Date用法获得年月日
            var date = new Date();
            var yy = date.getFullYear();
            var mm = date.getMonth() + 1;
            var dd = date.getDate();

            //优化样式
            if(mm < 10) {
                mm = '0' + mm;
            }
            if(dd < 10) {
                dd = '0' + dd;
            }

            return yy +'-'+ mm +'-'+ dd;
        }
        //日期比较
        function compareDateTime(CheckInDate, CheckOutDate) {
            //这里直接传递的是jquery对象，可以直接使用。 
            //replace 用法 第一个参数是正则表达式，把 日期中- 改为/ 便于用Date.parse

            var inDate = new Date( CheckInDate.val().replace(/-/g, "/") ); //开始日期
            var outDate = new Date( CheckOutDate.val().replace(/-/g, "/") ); //结束日期
            //转为距离1970年的毫秒数。 其实这里可以不用replace转化。 2008-07-48也能转化
            //考虑兼容问题。
            startDate = Date.parse(inDate);
            endDate = Date.parse(outDate);

            //开始时间大于结束时间则返回true.
            if( startDate >= endDate ){
                return true;
            }
            return false
        }
        //日期加减
         function addDate(date, days) {
            //默认加一天
            if (days == undefined || days == '') {
                days = 1;
            }
            var date = new Date( date.replace(/-/g, "/") );
            //通过Date的setDate方法给日期加一天
            date.setDate(date.getDate() + days);

            var month = date.getMonth() + 1;       
            var day = date.getDate();

            return date.getFullYear() + '-' + getFormatDate(month) + '-' + getFormatDate(day);
        }
    });
</script>