这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了利用 JS 实现简单的日期选择插件,文中实现两种效果的日期选择,一种是默认参数,点击日期后直接选择该日期,另一种是显示按钮来设置时间,有需要的朋友可以参考借鉴,下面来一起看看吧。
首先是调用方法如下
- //调用方法,后面回调函数返回的是当前选择的日期
- calender('#calend').init(function(date){
- this.innerHTML = date
- });
- //具体参数说明
- //如果需要传入参数,第一个为json,第二个为回调函数
- //下面是format格式化显示格式类型,有如下几种:
- //yyyy为年数
- //大写M为月数
- //d为几号
- //h为小时
- //小写m为分钟
- //s为秒数
- //q为季度
- //小写e,为数字星期格式
- //大写E,为中文星期格式
- //举例:'yyyy年MM月dd日','yyyy-MM-dd','yyyy','MM','e','dd E'
- //注意:以上获取时间如果是个位数则返回个位数,比如7月,则返回7,如果需要返回07,参数可以写成这样"MM",其它同理,由于时分秒功能还没有添加,默认获取当前时分秒
- calender('#calend').init({
- date: [2015, 12, 12],
- //设置默认显示年月日,默认当前年月日
- format: 'yyyy-MM-dd',
- //设置显示格式
- button: false //是否显示按钮
- left: 0,
- //追加left,默认0
- top: 0,
- //追加top,默认0
- onload: function() {} //初始化完成执行,this为当前创建的日历对象
- },
- function(date) {
- //回调函数
- this.innerHTML = date
- });
主要 css 样式
- .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
- }
- } .calend {
- display: block;
- width: 180px;
- line-height: 28px;
- background: #222;
- color: #fff;
- padding: 5px 12px;
- margin:20px 20px 20px 0;
- font-size: 14px;
- }
效果图一(默认参数)
效果图二(显示按钮,设置时间)
完整实例
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <style>
- .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
- }
- } .calend {
- display: block;
- width: 180px;
- line-height: 28px;
- background: #222;
- color: #fff;
- padding: 5px 12px;
- margin:20px 20px 20px 0;
- font-size: 14px;
- }
- </style>
- </head>
- <body>
- <div id="calend" class="calend">选择日期</div>
- <div id="calend1" class="calend">选择日期</div>
- <script>
- window.calender = (function(win,doc){
- function C(str){
- this.dom = doc.querySelector(str);
- this.s = {
- date : [ new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate()],
- button : false,
- format : 'yyyy年MM月dd日',
- left : 0,
- top: 0,
- onload : function(){}
- }
- };
- C.prototype = {
- init : function(){
- var t = this;
- if( typeof arguments[0] == 'function'){
- t.cb = arguments[0];
- }else{
- t.newS = arguments[0];
- t.cb = arguments[1] || function(){}
- };
- t.yoff = false;
- t.moff = false;
- t.extend(t.s,t.newS);
- t.nt = new Date();
- t.nt.setFullYear(t.s.date[0]);
- t.nt.setMonth(t.s.date[1]-1);
- var len = this.getDateLength(t.nt.getFullYear(),t.nt.getMonth() )
- t.nt.setDate(t.s.date[2]>len ? len : t.s.date[2]);
- t.day = t.nt.getDate();
- t.dom.onclick = function(ev){
- var e = ev || event;
- t.create();
- t.bind();
- t.s.onload.call(this)
- e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
- };
- },
- hide : function(){
- var t = this;
- t.cb.call(t.dom,t.format( t.nt.getFullYear()+'/'+ (t.nt.getMonth()+1)+'/'+ t.day+' '+new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds(),t.s.format));
- if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
- },
- bind : function(){
- var t = this;
- var Content = g('.calender-content');
- t.createDay();
- var Prev = g('#calender-prev'),
- Next = g('#calender-next'),
- Year = g('#calender-year'),
- Mon = g('#calender-mon');
- if(t.s.button){
- var today = g('.calender-today');
- var enter = g('.calender-ent');
- today.onclick = function(){
- t.nt.setFullYear(new Date().getFullYear());
- t.nt.setMonth(new Date().getMonth());
- t.nt.setDate( new Date().getDate());
- t.s.date[2] = t.day = new Date().getDate()
- t.createYear()
- t.createDay()
- t.createMon()
- };
- enter.onclick = function(){
- t.hide();
- }
- }
- Content.onclick = function(ev){
- var ev = ev || event;
- var _target = ev.target || ev.srcElement;
- if(!t.has(_target,'calender-cell-dark') ){
- var chl = this.children;
- for(var i = 0;i<chl.length;i++){
- t.del(chl[i],'active');
- };
- t.add(_target,'active');
- t.nt.setDate(_target.getAttribute('data-n'));
- t.s.date[2] = t.day = _target.getAttribute('data-n')
- if(!t.s.button){
- t.hide();
- }
- }
- }
- Prev.onclick = Next.onclick = function(){
- var y = t.nt.getFullYear(),m = t.nt.getMonth();
- if(t.moff) return
- if(t.yoff){
- t.nt.setFullYear( this.id=="calender-prev" ? y -= 9 : y += 9)
- t.createYear()
- }else{
- this.id=="calender-prev" ? m-- : m++;
- t.nt.setDate(1);
- t.nt.setMonth( m );
- t.createDay()
- }
- }
- Year.onclick = function(){
- t.createYear();
- t.yoff = true;
- t.moff = false;
- t.del(g('.calender-wrap'),'month');
- t.add(g('.calender-wrap'),'year');
- };
- Mon.onclick = function(){
- t.createMon();
- t.moff = true;
- t.yoff = false;
- t.del(g('.calender-wrap'),'year');
- t.add(g('.calender-wrap'),'month');
- };
- },
- getDateLength : function(year,month){
- //获取某一月有多少天, month为实际月份,一月即为1
- return new Date(year,month,0).getDate();
- },
- getFirstDay : function(year,month){
- //获取某一月第一天是周几,month为实际月份,一月即为1,返回0即为周日
- return new Date(year,month-1,0).getDay();
- },
- createMon : function(){
- var t= this,html='';
- var m = t.nt.getMonth()+1;
- m = m == 0 ? 12 : m;
- for(var i = 1;i<=12;i++){
- html+='<div class="calender-mon-cell '+( m == i ? 'active' : '') +' ">'+ (i) +'</div>';
- };
- g('.calender-list3').innerHTML = html;
- var cells = doc.querySelectorAll('.calender-mon-cell');
- for(var i2 = 0;i2<cells.length;i2++){
- cells[i2].onclick = function(){
- t.moff = false
- t.del(g('.calender-wrap'),'month');
- t.nt.setDate(1)
- t.nt.setMonth(+this.innerHTML-1);
- t.createDay();
- }
- }
- },
- createYear : function(){
- var t= this,html='',y = (t.nt.getFullYear());
- var Year = g('#calender-year');
- for(var i = 0;i<9;i++){
- html+='<div class="calender-year-cell '+( (y-(4-i)) == y ? 'active' :'') +' ">'+ (y-(4-i)) +'</div>';
- }
- Year.innerHTML = y
- g('.calender-list2').innerHTML = html;
- var cells = doc.querySelectorAll('.calender-year-cell');
- for(var i2 = 0;i2<cells.length;i2++){
- cells[i2].onclick = function(){
- t.yoff = false;
- t.del(g('.calender-wrap'),'year');
- t.nt.setFullYear(+this.innerHTML);
- t.createDay();
- }
- }
- },
- createDay : function(n){
- var t = this,
- y = t.nt.getFullYear(),
- m = (t.nt.getMonth())+1;
- g('#calender-year').innerHTML = m===0 ? y-1 : y;
- g('#calender-mon').innerHTML = m === 0 ? 12 : two(m);
- // if(t.nt.getMonth()+1 == t.s.date[1] && t.nt.getFullYear()==t.s.date[0] ){
- // t.nt.setDate(t.s.date[2]);
- // };
- var firstDay = this.getFirstDay(y,m),
- length = this.getDateLength(y,m),
- lastMonthLength = this.getDateLength(y,m-1),
- i,html = '';
- t.day = t.s.date[2] > length ? length : t.s.date[2];
- //循环输出月前空格
- if(firstDay ===0) firstDay = 7;
- for(i=1;i<firstDay+1;i++){
- html += '<div class="calender-cell calender-cell-dark">' + (lastMonthLength - firstDay + i) + '</div>';
- }
- //循环输出当前月所有天
- for(i=1;i<length+1;i++){
- html += '<div data-n='+i+' class="calender-cell '+ (i == t.day ? 'active' :'') +'">' + i + '</div>';
- }
- //if(8-(length+firstDay)%7 !=8){
- for(i=1;i<= (41-(length+(firstDay==0 ? 7 : firstDay)-1));i++){
- html+= '<div class="calender-cell calender-cell-dark">' + i + '</div>';
- };
- doc.querySelector('.calender-content').innerHTML = html
- },
- create : function(){
- var t= this;
- if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
- var private_Day_title=['一','二','三','四','五','六','日'];
- //内容
- var html = '<div class="calender-wrap">';
- html +='<div id="calender-header" class="calender-header none-btn "><a id="calender-prev" href="javascript:;"><</a><a id="calender-next" href="javascript:;">></a> <span id="calender-year">2016</span>年<span id="calender-mon">10</span>月</div>'
- //星期
- html += '<div class="calender-list"><div class="calender-caption">';
- for(i=0;i<7;i++){
- html += '<div class="calender-cell">' + private_Day_title[i] + '</div>';
- };
- html += '</div><div class="calender-content"></div>';
- if(this.s.button){
- html+='<div class="calender-button"><a href="javascript:;" class="calender-ent">确定</a><a href="javascript:;" class="calender-today">今天</a></div>';
- };
- html += '</div><div class="calender-list calender-list2"></div><div class="calender-list calender-list3"></div>'
- doc.body.insertAdjacentHTML("beforeend", html);
- var wrap = g('.calender-wrap');
- function setPosi(){
- var _top = doc.documentElement.scrollTop || doc.body.scrollTop;
- wrap.style.left = t.dom.getBoundingClientRect().left +t.s.left +'px';;
- wrap.style.top = t.dom.getBoundingClientRect().top + _top + t.dom.offsetHeight+t.s.top + 15 +'px';
- };
- setPosi();
- addEvent(window,'resize',function(){setPosi()})
- wrap.onclick = function(ev){
- var e = ev || event;
- e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
- }
- },
- format : function(da,format){
- var _newDate = new Date(da);
- var WeekArr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
- var o = {
- 'M+' : _newDate.getMonth()+1, //month
- 'd+' : _newDate.getDate(), //day
- 'h+' : _newDate.getHours(), //hour
- 'm+' : _newDate.getMinutes(), //minute
- 's+' : _newDate.getSeconds(), //second
- 'q+' : Math.floor((_newDate.getMonth()+3)/3), //quarter
- 'S': _newDate.getMilliseconds(), //millisecond
- 'E': WeekArr[_newDate.getDay()],
- 'e+' : _newDate.getDay()
- };
- if (/(y+)/.test(format)){
- format = format.replace(RegExp.$1, (_newDate.getFullYear()+"").substr(4 - RegExp.$1.length));
- };
- for(var k in o) {
- if(new RegExp('('+ k +')').test(format)) {
- format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ('00'+ o[k]).substr((''+ o[k]).length));
- };
- };
- return format;
- },
- extend : function(n,n1){
- for(var i in n1){n[i] = n1[i]};
- },
- has : function(o,n){
- return new RegExp('\\b'+n+'\\b').test(o.className);
- },
- add : function(o,n){
- if(!this.has(o, n)) o.className+=' '+n;
- },
- del : function(o,n){
- if(this.has(o, n)){
- o.className = o.className.replace(new RegExp('(?:^|\\s)'+n+'(?=\\s|$)'), '').replace(/^\s*|\s*$/g, '');
- };
- }
- };
- function g(str){return doc.querySelector(str)};
- function addEvent(obj,name,fn){obj.addEventListener? obj.addEventListener(name, fn, false):obj.attachEvent('on'+name,fn);};
- function two(num){return num<10 ? ('0'+num) : (''+num)};
- addEvent(doc,'click',function(){
- if( g('.calender-wrap')) doc.body.removeChild( g('.calender-wrap') )
- });
- function c(o){return new C(o)};return c;
- })(window,document);
- ;(function(){
- calender('#calend').init(function(date){
- this.innerHTML = date
- });
- calender('#calend1').init({format : 'yyyy-MM-dd',
- date : [2020,5,12],
- button : true
- },function(date){
- this.innerHTML = date
- });
- })();
- </script>
- </body>
- </html>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/328190.html