jquery表格日历写入html,js+jquery原创日历插件——含html、css源文件（一）

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

使用方法：点击input框弹出日历选择插件 选中日期点击确定 鼠标滚轮滑动选择分钟；点击 < > 选择上月日期、下月日期，点击尖角号中间部分的年月 选择月份，再次点击 选择年；

支持自定义时间段、主题色改变、出现位置改变、是否只选择年月日，是否只选择年月日时，是否只选择年月日时分，自定义输出日期格式，点击确定后的回调函数返回的值是long整型的时间戳，选择框的显示、消失都可以设置回调函数。

html文件

Document

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;

}

规定日期格式；选择年月日时；中心定位；起止时间；确定、show、hide的回调函数

默认日期格式；选择年月日；输入框定位：

默认日期格式；选择年月日时分；改变颜色；中心定位

$(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();

});

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;

}