文章 - 可选择范围活动日历

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css" media="all">
    .demo-box{
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    padding: 10px 20px;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
    color: #333;
    display: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.calendar-box *{
    box-sizing: border-box;
}
.ht-rili-head{
    overflow: hidden;
}
.ht-rili-datebox{
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
}
.ht-rili-date{
    flex: 1;
    text-align: center;
}
.ht-rili-leftarr{
    display: inline-block;
    width:25px;
    height: 19px;
    background: url("../images/left-arr.png") left center no-repeat;
    background-size: contain;
    vertical-align: middle;
    cursor: pointer;
}
.ht-rili-rightarr{
    display: inline-block;
    width:25px;
    height: 19px;
    background: url("../images/right-arr.png") right center no-repeat;
    background-size: contain;
    vertical-align: middle;
    cursor: pointer;
}
.ht-rili-th{
    width: 14.25%;
    float: left;
    text-align: center;
    height: 40px;
    line-height: 40px;
    /*background: #E66B14;*/
    color: #000;
}
.ht-rili-td{
    width: 14.28%;
    float: left;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}
.ht-rili-body{
    overflow: hidden;
}
.ht-rili-day{
    font-family:Arial;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 100%;
}
.ht-rili-money{
    font-family:Arial;
    display: inline-block;
    width: 100%;
    font-size: 12px;
    color: #D4585A
}
.ht-rili-td-disabled{
    color: #BFC4CA;
}
.ht-rili-td-active{
    border-radius: 3px;
    background: #00BDFF;
    color:#fff;
}

.calendars{width: 250px; display: inline-block; font-size: 20px; position: relative;}
        .calendars input[type=text]{width: 100%; font-size: 20px; height: 50px; text-align: left; border-radius: 6px; box-sizing: border-box; padding:0 20px; color: #2b0099; background: #fff ;}
    </style>
    </head>
    <body>

}
    //是否是闰年
    function isLeapYear(){
        if( (calendarDate.year % 4 == 0) && (calendarDate.year % 100 != 0 || calendarDate.year % 400 == 0) ){
            calendarDate.isLeapYear = true;
        }else{
            calendarDate.isLeapYear = false;
        }
    }
    //日期点击事件
    function dateClick(obj){
        $(obj).addClass('ht-rili-td-active').siblings(".ht-rili-td").removeClass("ht-rili-td-active");
        $(".calendar-text").val($(obj).data("date"));
        $('.calendar-box1').hide();
    }
    //获取上个月份，本月，下个月份信息
    function getDays(){
        //上月天数
        if(  parseInt(calendarDate.month) == 1 ){
            calendarDate.lastDays = new Date(calendarDate.year-1,12, 0).getDate();
            calendarDate.lastMonth = new Date(calendarDate.year-1,12, 0).getMonth()+1;
            calendarDate.lastYear = new Date(calendarDate.year-1,12, 0).getFullYear();
        }else{
            calendarDate.lastDays = new Date(calendarDate.year,calendarDate.month-1, 0).getDate();
            calendarDate.lastMonth = new Date(calendarDate.year,calendarDate.month-1, 0).getMonth()+1;
            calendarDate.lastYear = new Date(calendarDate.year,calendarDate.month-1, 0).getFullYear();
        }
        //下个月天数
        if( parseInt(calendarDate.month) == 12 ){
            calendarDate.nextDays  = new Date(calendarDate.year+1,1, 0).getDate();
            calendarDate.nextMonth  = new Date(calendarDate.year+1,1, 0).getMonth()+1;
            calendarDate.nextYear  = new Date(calendarDate.year+1,1, 0).getFullYear();
        }else{
            calendarDate.nextDays  = new Date(calendarDate.year,calendarDate.month+1, 0).getDate();
            calendarDate.nextMonth  = new Date(calendarDate.year,calendarDate.month+1, 0).getMonth()+1;
            calendarDate.nextYear  = new Date(calendarDate.year,calendarDate.month+1, 0).getFullYear();
        }
        //本月天数
        calendarDate.days = new Date(calendarDate.year,calendarDate.month, 0).getDate();
    }
    //检测时间是否一致
    function checkDate( dateStr1, dateStr2 ){
        var date1 = dateStr1.split("-"); //[0]year,[1]month,[2]date;
        var date2 = dateStr2.split("-"); //[0]year,[1]month,[2]date;
        if( date1[1] < 10 && date1[1].length < 2){
            date1[1] = "0"+date1[1];
        }
        if( date1[2] < 10 && date1[2].length < 2){
            date1[2] = "0"+date1[2];
        }
        if( date2[1] < 10 && date2[1].length < 2){
            date2[1] = "0"+date2[1];
        }
        if( date2[2] < 10 && date2[2].length < 2){
            date2[2] = "0"+date2[2];
        }
        date1 = date1.join("-");
        date2 = date2.join("-");
        return date1 == date2;
    }

$.fn.extend({
        calendar:function(opt){
            if( (opt.beginDate != undefined && opt.endDate != undefined )||( opt.data.length > 0 ) ){
                var beginDate = opt.data[0].date;
                var endDate = opt.data[opt.data.length-1].date;
                calendarDate.beginYear = parseInt(beginDate.split('-')[0]);//起始年
                calendarDate.beginMonth = parseInt(beginDate.split('-')[1]);//起始月
                calendarDate.beginDate = parseInt(beginDate.split('-')[2]);//起始日

calendarDate.endYear = parseInt(endDate.split('-')[0]);//结束年
                calendarDate.endMonth = parseInt(endDate.split('-')[1]);//结束月
                calendarDate.endDate = parseInt(endDate.split('-')[2]);//结束日

calendarDate.year = parseInt(beginDate.split('-')[0]);//设置起始日期为当前日期
                calendarDate.month = parseInt(beginDate.split('-')[1]);//设置起始日期为当前日期
                calendarDate.date = parseInt(beginDate.split('-')[2]);//设置起始日期为当前日期
                calendarDate.opt = opt;

}
            //加载容器
            calendarDate.container = '<div class="ht-rili-querybox"><div class="ht-rili-datebox"><span class="ht-rili-leftarr"></span><span class="ht-rili-date"></span><span class="ht-rili-rightarr"></span></div></div><div class="ht-rili-head"><div class="ht-rili-th">日</div><div class="ht-rili-th">一</div><div class="ht-rili-th">二</div><div class="ht-rili-th">三</div><div class="ht-rili-th">四</div><div class="ht-rili-th">五</div><div class="ht-rili-th">六</div></div><div class="ht-rili-body"></div>'
            $(opt.ele).append(calendarDate.container);
            $('.ht-rili-date').html(calendarDate.year+'年 '+calendarDate.month+'月');

getIndexDay();
            $('.ht-rili-leftarr').on('click',function(){
                $('.ht-rili-body').html('');
                if( calendarDate.month == 1 ){
                    calendarDate.year -= 1;
                    calendarDate.month = 12;
                }else{
                    calendarDate.month -=1;
                }
                $('.ht-rili-date').html(calendarDate.year+'年 '+calendarDate.month+'月');
                getIndexDay();
            })
            $('.ht-rili-rightarr').on('click',function(){
                $('.ht-rili-body').html('');
                if( calendarDate.month == 12 ){
                    calendarDate.year += 1;
                    calendarDate.month = 1;
                }else{
                    calendarDate.month +=1;
                }
                $('.ht-rili-date').html(calendarDate.year+'年 '+calendarDate.month+'月');
                getIndexDay();
            })
        },

});
})(jQuery)

</script>
        <script type="text/javascript">
            $(function(){

$('.calendar-box1').calendar({
                    ele : '.demo-box', //依附
                    data : [
                        {date:'2018-01-15'},
                        {date:'2018-01-16'},
                        {date:'2018-01-17'},
                        {date:'2018-01-18'},
                        {date:'2018-01-19'},
                        {date:'2018-01-22'},
                        {date:'2018-01-23'},
                        {date:'2018-01-24'},
                        {date:'2018-01-25'},
                        {date:'2018-01-26'},
                        {date:'2018-01-29'},
                        {date:'2018-01-30'},
                        {date:'2018-01-31'},
                        {date:'2018-02-01'},
                        {date:'2018-02-02'},
                        {date:'2018-02-05'},
                        {date:'2018-02-06'},
                        {date:'2018-02-07'},
                        {date:'2018-02-08'},
                        {date:'2018-02-09'}
                    ]
                });
                $(".calendar-text").focus(function(){
                    $('.calendar-box1').show();
                });
            });
        </script>
    </body>
</html>

可选择范围活动日历

评论 ( 0 )

最新评论

暂无评论

可选择范围活动日历

评论 ( 0 )

最新评论

暂无评论

欢迎您回来

创建账号

找回密码