前端开发原生js日历插件

永州招聘web前端开发|前端开发面试视频教程|计算机前端开发视频教程下载

源码点击这里查看 http://itakeo.com/blog/2015/10/24/swiperdate/

html 代码

<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }
    body {
        background: #fff;
    }
    input {
        margin: 30px;
        padding: 8px 12px;
    }
    .containter {
        width: 320px;
        margin: auto
    }
    .calender-wrap {
        -webkit-animation: clafade .3s ease;
        -moz-animation: clafade .3s ease;
        animation: clafade .3s ease;
        padding: 5px;
        background: #fff;
        width: 240px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        position: relative;
        font-family: “Microsoft yahei”;
        position: absolute;
        z-index: 1000
    }
    .calender-wrap {
        border: 1px solid #e2e2e2
    }
    .calender-wrap:after {
        content: ”;
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #eee;
        border-top: 0;
        border-bottom-color: #d7d7d7;
        position: absolute;
        left: 9px;
        top: -7px
    }
    .calender-wrap:before {
        content: ”;
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        border-top: 0;
        position: absolute;
        left: 10px;
        top: -6px;
        z-index: 10
    }
    .calender-caption {
        height: 35px;
        border-bottom: 1px solid #ddd;
        z-index: 2;
        background: #eee
    }
    .calender-content {
        position: relative;
        overflow: hidden
    }
    .calender-content:after {
        content: ”;
        display: block;
        clear: both
    }
    .calender-cell {
        cursor: pointer;
        float: left;
        width: 14.28571428%;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-size: 12px;
        color: #000;
        z-index: 1;
        border-bottom: 1px solid #eee
    }
    .calender-cell:hover {
        background: #eee
    }
    .calender-caption .calender-cell:hover {
        background: none
    }
    .calender-cell-dark {
        cursor: no-drop;
        color: #b9b9b9
    }
    .calender-caption .calender-cell {
        height: 35px;
        line-height: 35px;
        font-size: 13px;
        color: #111;
        font-weight: bold
    }
    .calender-header {
        text-align: center;
        line-height: 35px;
        text-align: center;
        color: #888;
        padding-bottom: 4px;
        margin-bottom: 1px;
        background: #fff;
        position: relative;
        border-bottom: 1px solid #e6e6e6;
        font-size: 14px
    }
    #calender-prev,
    #calender-next {
        text-decoration: none;
        display: block;
        width: 14.2857%;
        height: 35px;
        background: #fff;
        position: absolute;
        left: 0%;
        top: 0px;
        font-family: ‘宋体’;
        font-size: 14px;
        color: #555
    }
    #calender-prev,
    #calender-next {
        color: #999;
        font-size: 16px
    }
    #calender-prev:hover,
    #calender-next:hover {
        background: #eee;
        border-radius: 5px;
        color: #222
    }
    #calender-next {
        left: auto;
        right: 0%
    }
    #calender-year,
    #calender-mon {
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 3px;
        margin: 0 3px;
    }
    #calender-year:hover,
    #calender-mon:hover {
        background: #eee
    }
    .calender-list {
        overflow: hidden
    }
    .calender-list2,
    .calender-list3 {
        display: none
    }
    .calender-year-cell,
    .calender-mon-cell {
        width: 32.41%;
        float: left;
        border-radius: 4px;
        text-align: center;
        font-size: 12px;
        padding: 15px 0;
        border: 1px solid #fff
    }
    .calender-year-cell:hover,
    .calender-mon-cell:hover {
        background: #eee;
        cursor: pointer
    }
    .calender-cell.active,
    .calender-year-cell.active,
    .calender-mon-cell.active {
        background: #23acf1;
        color: #fff
    }
    .calender-cell.active:hover,
    .calender-year-cell.active:hover,
    .calender-mon-cell.active:hover {
        background: #23acf1;
        color: #fff
    }
    .calender-button {
        border-top: 1px solid #eee;
        width: 100%;
        margin-top: -1px;
        padding: 7px 0px 2px 0;
        overflow: hidden
    }
    .calender-button a {
        display: block;
        text-align: center;
        padding: 0px 15px;
        height: 25px;
        line-height: 25px;
        float: right;
        background: #23acf1;
        color: #fff;
        margin-right: 5px;
        cursor: pointer;
        margin-left: 5px;
        font-size: 12px;
        text-decoration: none
    }
    .calender-button a:hover {
        background: #0084c9
    }
    .calender-wrap.year .calender-list,
    .calender-wrap.month .calender-list {
        display: none
    }
    .calender-wrap.year .calender-list2 {
        display: block
    }
    .calender-wrap.month .calender-list3 {
        display: block
    }
    @keyframes clafade {
        0% {
            transform: scale(0.95);
            opacity: 0
        }
        100% {
            transform: scale(1);
            opacity: 1
        }
    }
    @-webkit-keyframes clafade {
        0% {
            -webkit-transform: scale(0.95);
            opacity: 0
        }
        100% {
            -webkit-transform: scale(1);
            opacity: 1
        }
    }
</style>
<input type=”text” id=”inp” placeholder=”选择日期”>
<input type=”text” id=”inp2″ placeholder=”选择日期”>
<script src=”http://www.itakeo.com/down/calender2.js”></script>
<script>
    ; (function () {
        calender(‘#inp’).init(function (date) {
            this.value = date
        });
        calender(‘#inp2’).init({
            format: ‘yyyy-MM-dd’,
            date: [2020, 5, 12],
            button: true
        }, function (date) {
            this.value = date
        });
    })();
</script>

前端要会移动开发吗|web前端开发面试视频教程|前端开发手机调试

» 本文来自:前端开发者 » 《前端开发原生js日历插件》
» 本文链接地址:https://www.rokub.com/4953.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!