手记

js+jquery原创日历插件——含html、css源文件（一）

DasiyOulu
2017-01-11 09:55:57浏览 4404

本插件纯原创，如有bug请指正。

使用方法：点击input框弹出日历选择插件 选中日期点击确定 鼠标滚轮滑动选择分钟；点击 < > 选择上月日期、下月日期，点击尖角号中间部分的年月 选择月份，再次点击 选择年；
支持自定义时间段、主题色改变、出现位置改变、是否只选择年月日，是否只选择年月日时，是否只选择年月日时分，自定义输出日期格式，点击确定后的回调函数返回的值是long整型的时间戳，选择框的显示、消失都可以设置回调函数。

html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link href="calendar.css" rel="stylesheet">
    <script src="jquery.min.js" language="javascript"></script>
    <script src="calendar.js" language="javascript"></script>
    <style>
        input {
            width: 300px;
            height: 30px;
            line-height: 30px;
            padding-left: 10px;
            box-sizing: border-box;
            display: block;
            margin-top:5px;
        }
        .input_box{
            width: 300px;
            height: 30px;
            margin:100px auto;  
            position: relative;     
        }
        span{
            color:#222222;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div class="input_box">
        <span>规定日期格式；选择年月日时；中心定位；起止时间；确定、show、hide的回调函数</span>
        <input type="text" placeholder="点击选择日期" id="choice_data1">
    </div>
    <div class="input_box" id="aaaaaaa">
        <span>默认日期格式；选择年月日；输入框定位：</span>
        <input type="text" placeholder="点击选择日期" id="choice_data2">
    </div>
    <div class="input_box">
        <span>默认日期格式；选择年月日时分；改变颜色；中心定位</span>
        <input type="text" placeholder="点击选择日期" id="choice_data3">
    </div>
    <script>
        $(document).ready(function(){

            var calendar1 = new Calendar({
                "inputId":"#choice_data1",//绑定的input框id
                "startTime":"2009-6-4",//初始时间，时间格式不可变，月是1-12个月
                "endTime":"2040-10-2",//截止时间，时间格式不可变，月是1-12个月
                "dataFormat":"yy/MM/dd hh:mm:ss",//传入时间格式，不传则默认"yyyy-MM-dd hh:mm:ss"
                "isHourMin":true,//false表示只选年月日，不选小时分钟;不传或者true默认选择年月日小时分钟
                "isHourOnly":false,//true表示只选小时，不选分钟;不传或者false默认选择小时、分钟             
                "showPosition":false,//是否根据input框定位，true是根据，false或不传是全屏居中
                "headColor":"#f36444",//主色调，默认为#f36444橘色
                "callback":function(_time){
                    console.log(_time);
                },//获得选择时间回调函数
                "showCallback":function(){
                    console.log("show");
                },//弹出时的回调
                "hideCallback":function(){
                    console.log("hide");
                },//弹出时的回调

            });
            calendar1.setConfig();

            var calendar2 = new Calendar({
                "inputId":"#choice_data2",//绑定的input框id
                "showPosition":true,//是否根据input框定位，true是根据，false或不传是全屏居中
                "isHourMin":false//false表示只选年月日，不选小时分钟;不传或者true默认选择年月日小时分钟
            });
            calendar2.setConfig();

            var calendar3 = new Calendar({
                "inputId":"#choice_data3",//绑定的input框id
                "headColor":"rgba(147,112,219,0.5)",//主色调，默认为#f36444橘色
                "isHourOnly":false//true表示只选小时，不选分钟;不传或者false默认选择小时、分钟              
            });
            calendar3.setConfig();
        });
    </script>

</body>
</html>

css文件

body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    color:#222222;
}
*{
    font-family: "微软雅黑";
    font-size: 12px;
    box-sizing: border-box;
}
button{
    border:none;
    background: #ffffff;
    outline:none;
}
.tr_box{
    width:100%;
    height: 24px;
    overflow: hidden;
}
.calendar_box_wrap{
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.541176);
    z-index:999;
    position:absolute;
    top:0;
    left:0;
}
.calendar_box{
    overflow: hidden;
}
.clear_float{
    clear: both;
}
.head_show{
    width: 100%;
    height: 24%;
    box-sizing: border-box;
    padding:5%;
    color:#ffffff;
    position: relative;
}
.head_year{
    width:100%;
    font-size: 14px;
    height:20px;
    line-height: 20px;
    opacity: 0.7;
}
.head_info_box{
    width:90%;
    height:40px;
    position: relative;
    overflow: hidden;
}
.head_info{
    width:90%;
    height:40px;
    line-height: 40px;
    font-size: 24px;
    position: absolute;
    top:0;
    left: 0;
    animation:mymove 0.5s forwards;
    -webkit-animation:mymove 0.5s forwards; /*Safari and Chrome*/       
}
@keyframes mymove{
    0% {top:-20px;opacity: 0;}
    100% {top:0;opacity: 1;}
}
@-webkit-keyframes mymove{
    0% {top:-20px;opacity: 0;}
    100% {top:0;opacity: 1;}
} 
.scale_box_lit{
    animation:scaleLit 0.3s forwards;
    -webkit-animation:scaleLit 0.3s forwards; /*Safari and Chrome*/ 
    overflow: hidden;       
}
@keyframes scaleLit{
    0% {transform-origin:right bottom;transform:scale(1,1);opacity:1;display: block;}
    100% {transform-origin:right bottom;transform:scale(0,0);opacity:0;display: none;}
}
@-webkit-keyframes scaleLit{
    0% {transform-origin:right bottom;transform:scale(1,1);opacity:1;display: block;}
    100% {transform-origin:right bottom;transform:scale(0,0);opacity:0;display: none;}

}
.scale_box_big{
    animation:scaleBig 0.3s forwards;
    -webkit-animation:scaleBig 0.3s forwards; /*Safari and Chrome*/ 
    overflow: hidden;       
}
@keyframes scaleBig{
    0% {transform-origin:center;transform:scale(0,0);opacity:0}
    100% {transform-origin:center;transform:scale(1,1);opacity:1}
}
@-webkit-keyframes scaleBig{
    0% {transform-origin:center;transform:scale(0,0);opacity:0}
    100% {transform-origin:center;transform:scale(1,1);opacity:1}
} 
.scale_box_big_big{
    animation:scaleBigBig 0.2s forwards;
    -webkit-animation:scaleBigBig 0.2s forwards; /*Safari and Chrome*/  
    overflow: hidden;       
}
@keyframes scaleBigBig{
    0% {transform-origin:center;transform:scale(0,0);opacity:0}
    50% {transform-origin:center;transform:scale(1,1);opacity:1}
    99% {transform-origin:center;transform:scale(1.5,1.5);opacity:1}
    100% {transform-origin:center;transform:scale(1,1);opacity:0}
}
@-webkit-keyframes scaleBigBig{
    0% {transform-origin:center;transform:scale(0,0);opacity:0}
    50% {transform-origin:center;transform:scale(1,1);opacity:1}
    99% {transform-origin:center;transform:scale(1.5,1.5);opacity:1}
    100% {transform-origin:center;transform:scale(1,1);opacity:0}
} 
.calendar_node{
    width: 100%;
    height:10% ;
    margin-top: 10px;
}
.calendar_node_wrap{
    width: 100%;
    height: 220px;
    padding:0 5px;
    position: absolute;
    top:24%;
    left: 0;
    moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;  
}
.prev_month{
    float: left;
    width: 15%;
    height:100%;
    text-align: center;
    cursor: pointer;
}
.calendar_txt{
    float: left;
    width: 70%;
    height:100%;
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.calendar_txt_move{
    width: 140px;
    position: absolute;
    top:0;
    left: 0;
    animation:moveleft 0.1s forwards;
    -webkit-animation:moveleft 0.1s forwards; /*Safari and Chrome*/ 
}
@keyframes moveleft{
    0%{left:10px;opacity: 1;}
    20%{left:-100px;opacity: 0;}
    40%{left:200px;opacity: 0;}
    100%{left:10px;opacity: 1;}
}
@-webkit-keyframes moveleft{
    0%{left:10px;opacity: 1;}
    20%{left:-100px;opacity: 0;}
    40%{left:200px;opacity: 0;}
    100%{left:10px;opacity: 1;}
} 

.next_month{
    float: left;
    width: 15%;
    height:100%;
    text-align: center;
    cursor: pointer;
}
.calendar_fl,.kong,.calendar_week,.color_bg,.calender_txt{
    float:left;
    width:28px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
}
.calendar_fl{
    position: relative;
    cursor:pointer;
    margin:0 2px;
}
.calendar_week,.kong{
    margin:0 2px;
}
.color_bg{
    position: absolute;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    margin-top:-10px;
    margin-left: -10px;
    line-height: 20px;
    moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;  
}
.calender_txt{
    position: absolute;
    top:0;
    left:0; 
    background:transparent;
}
.btn_box{
    width: 100%;
    height:35px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.cancel_btn,.make_sure_btn,.ok_btn{
    text-align: center; 
    width: 20%;
    float:right;
    cursor: pointer;
}
.make_sure_btn,.ok_btn{
    margin-right:20px;  
}
.go_back_btn{
    text-align: center;
    width: 20%;
    float:left;
    margin-left:20px;
    cursor: pointer;
}
.calenda_today{
    color:#ffffff;
}
.hide{
    display: none;
}
.foot_box{
    width: 100%;
    height:220px;
    position: absolute;
    left: 300px;
    top: 24%;
    box-sizing: border-box;
    padding:20px 10px 10px;
    moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;  
}

.data_select{
    width: 100%;
    height: 150px;
    border-radius: 3px;
    overflow: hidden;
    background:#e5e5e5;
    position:relative;
}
.data_select_left_wrap,.data_select_right_wrap{
    width: 49%;
    height: 100%;
    text-align: center;
    z-index: 99;
    overflow: hidden;
    position: relative;
}
.data_select_left_wrap{
    border-right:solid 2px #ffffff; 
}
.data_select_left,.data_select_right{
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    top:0;
    left:0;
}
.data_node{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #D3D3D3;
    text-align: center;
}
.data_node_center{
    color:#696969;
    font-size: 18px;
}
.data_node_around{
    color:#BEBEBE;
    font-size: 16px;
}
.fl{
    float:left;
}
.tip{
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size:12px;
    color: #aaaaaa;
    margin: 5px;
}
.mouseover{
    color:#ffffff !important;
}
.num_wrap{
    width: 98%;
    height:170px;
    position:absolute ;
    left:10px;
    top:30px;
    margin-left: -9px;
}
.num_wrap_move{
    animation:moveleft 0.5s forwards;
    -webkit-animation:moveleft 0.5s forwards; /*Safari and Chrome*/ 
}
.all_wrap{
    width: 230px;
    height: 190px;
    position: relative;
}
.month_box{
    width: 230px;
    height: 156px;
    position: absolute;
    left:5px;
    top: 130px;
}
.year_box{
    width: 230px;
    height: 170px;
    position: absolute;
    left:5px;
    top: 130px;
    overflow: hidden;
    padding: 0;
    -moz-box-shadow: 5px 5px 10px #ffffff inset,-5px -5px 10px #ffffff inset;
    -webkit-box-shadow: 5px 5px 10px #ffffff inset,-5px -5px 10px #ffffff inset;
    -o-box-shadow: 5px 5px 10px #ffffff inset,-5px -5px 10px #ffffff inset;
}
.month_select_node{
    width: 55px;
    height: 50px;
    color:#222222;
    background: transparent;
    text-align: center;
    line-height: 50px;
    float:left;
    margin:1px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}
.year_select_node{
    width: 55px;
    height: 50px;
    color:#222222;
    background: transparent;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    margin:1px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative; 
}
.month_select_node_txt,.month_select_node_wrap,.year_select_node_txt,.year_select_node_wrap{
    width: 55px;
    height: 50px;
    position: absolute;
    top:0;
    left:0;
}
.year_info_wrap{
    position: absolute;
    left:0;
    top:0;
}
.visibility_class{
    visibility:hidden;
}
.gray_class{
    -webkit-filter: grayscale(1) !important;/* Webkit */ 
    filter:gray !important;/* IE6-9 */ 
    filter: grayscale(1) !important;/* W3C */   
    color:#aaaaaa !important;
    cursor: default;
}
.default_color{
    background: #ffffff;
    color:#222222;
}
相关标签
JQuery
JavaScript
0人推荐
随时随地看视频
慕课网APP

相关阅读

初学js 自制表盘时钟很简单
造一个属于自己的 UI 库
太阳系八大行星(带月亮)//因为自己也是个初学者,希望大家能多给建议
改版后前端购物车系统
html+css+js扫雷原代码，可以直接试玩了