原生js简单日期插件

所属分类:输入-日期和时间

 28251  72  查看评论 (16)
原生js简单日期插件 ie兼容9

配置参数:

var mySchedule = new Schedule({
    el: '#schedule-box', //指定包裹元素(可选)
    date: '2018-9-20', //生成指定日期日历(可选)
    clickCb: function(y, m, d) {
        //点击日期回调(可选)
    },
    nextMonthCb: function(y, m, d) {
        //点击下个月回调(可选)
    },
    nextYeayCb: function(y, m, d) {
        //点击下一年回调(可选)
    },
    prevMonthCb: function(y, m, d) {
        //点击上个月回调(可选)
    },
    prevYearCb: function(y, m, d) {
        //点击上一年月回调(可选)
    }
});

实例方法:

mySchedule.nextMonthFun(); //下一月
mySchedule.nextYearFun(); //下一年
mySchedule.nextMonthFun(); //上一月
mySchedule.prevYearFun(); //上一年
相关插件-日期和时间

仿百度日历老黄历功能,带节日

功能简单强大,代码带注释,数据接入一目了然
  日期和时间
 19753  204

漂亮的倒计时

漂亮的倒计时,带反转效果。
  日期和时间
 14303  37
  日期和时间
 20807  122

时间插件lhgcalendar

lhgcalendar是一功能强大的简单迷你并且高效的弹出日历组件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+.
  日期和时间
 24173  56

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币

    朱瑞飞 0
    2018/2/7 15:39:59
    很好,工作中用到了。顶一下。
    回复
    POLYnia 0
    2017/12/29 15:48:08

    范围时间的怎么写?比如2010-01到2013-07,选的话,只能选择这里面的,超过这个范围的都不能选!!!

    回复
    POLYnia 0
    2017/12/29 13:55:30

    哪个吊大的知道,怎样将schedule.js里面的H5样式代码,写到index.html页面中!因为我需要在单独的天数上添加点击事件!!!

    回复
    oooiuv 1
    2017/12/20 9:08:32

    有个小问题,就是本月有31号  点击下个月,最上面日期也显示31号。(其实只有30天)

    修复后的JS:

    ;(function (undefined) {
    	var _global;
    	//工具函数
    	//配置合并
    	function extend (def,opt,override) {
    		for(var k in opt){
    			if(opt.hasOwnProperty(k) && (!def.hasOwnProperty(k) || override)){
    				def[k] = opt[k]
    			}
    		}
    		return def;
    	}
    	//日期格式化
    	function formartDate (y,m,d,symbol) {
    		symbol = symbol || '-';
    		m = (m.toString())[1] ? m : '0'+m;
    		d = (d.toString())[1] ? d : '0'+d;
    		return y+symbol+m+symbol+d
    	}
    
    	function Schedule (opt) {
    		var def = {},
    			opt = extend(def,opt,true),
    			curDate = opt.date ? new Date(opt.date) : new Date(),
    			year = curDate.getFullYear(),
    			month = curDate.getMonth(),
    			day = curDate.getDate(),	
    			currentYear = curDate.getFullYear(),
    			currentMonth = curDate.getMonth(),
    			currentDay = curDate.getDate(),
    			selectedDate = '',
    			el = document.querySelector(opt.el) || document.querySelector('body'),
    			_this = this;
    		var bindEvent = function (){
    			el.addEventListener('click',function(e){
    				switch (e.target.id) {
    					case 'nextMonth': 
    						_this.nextMonthFun();
    						break;
    					case 'nextYear': 
    						_this.nextYearFun();
    						break;
    					case 'prevMonth': 
    						_this.prevMonthFun();
    						break;
    					case 'prevYear': 
    						_this.prevYearFun();
    						break;
    					default:
    						break;
    				};
    				if(e.target.className.indexOf('currentDate') > -1){
    					opt.clickCb && opt.clickCb(year, month+1, e.target.innerHTML);
    					selectedDate = e.target.title;
    					day = e.target.innerHTML;
    					render();
    				}
    			},false)
    		}
    		var init = function () {
    			var scheduleHd = '<div class="schedule-hd">'+
    								'<div>'+
    									'<span class="arrow icon iconfont icon-116leftarrowheads" id="prevYear" ></span>'+
    									'<span class="arrow icon iconfont icon-112leftarrowhead" id="prevMonth"></span>'+
    								'</div>'+
    								'<div class="today">'+formartDate(year,month+1,day,'-')+'</div>'+
    								'<div>'+
    									'<span class="arrow icon iconfont icon-111arrowheadright" id="nextMonth"></span>'+
    									'<span class="arrow icon iconfont icon-115rightarrowheads" id="nextYear"></span>'+
    								'</div>'+
    							'</div>'
    			var scheduleWeek = '<ul class="week-ul ul-box">'+
    									'<li>日</li>'+
    									'<li>一</li>'+
    									'<li>二</li>'+
    									'<li>三</li>'+
    									'<li>四</li>'+
    									'<li>五</li>'+
    									'<li>六</li>'+
    								'</ul>'
    			var scheduleBd = '<ul class="schedule-bd ul-box" ></ul>'; 
    			el.innerHTML = scheduleHd + scheduleWeek + scheduleBd;
    			bindEvent();
    			render();
    		}
    		var render = function () {
    			var fullDay = new Date(year,month+1,0).getDate(), //当月总天数
    			startWeek = new Date(year,month,1).getDay(), //当月第一天是周几
    			total = (fullDay+startWeek)%7 == 0 ? (fullDay+startWeek) : fullDay+startWeek+(7-(fullDay+startWeek)%7),//元素总个数
    			lastMonthDay = new Date(year,month,0).getDate(), //上月最后一天
    			eleTemp = [];
    			if(day > fullDay){
    				day = fullDay
    			}
    			for(var i = 0; i < total; i++){
    				if(i<startWeek){
    					eleTemp.push('<li class="other-month"><span class="dayStyle">'+(lastMonthDay-startWeek+1+i)+'</span></li>')
    				}else if(i<(startWeek+fullDay)){
    					var nowDate = formartDate(year,month+1,(i+1-startWeek),'-');
    					var addClass = '';
    					selectedDate == nowDate && (addClass = 'selected-style');
    					formartDate(currentYear,currentMonth+1,currentDay,'-') == nowDate && (addClass = 'today-flag');
    					eleTemp.push('<li class="current-month" ><span title='+nowDate+' class="currentDate dayStyle '+addClass+'">'+(i+1-startWeek)+'</span></li>')
    				}else{
    					eleTemp.push('<li class="other-month"><span class="dayStyle">'+(i+1-(startWeek+fullDay))+'</span></li>')
    				}
    			}
    			el.querySelector('.schedule-bd').innerHTML = eleTemp.join('');
    			el.querySelector('.today').innerHTML = formartDate(year,month+1,day,'-');
    		};
    		this.nextMonthFun = function () {
    			if(month+1 > 11){
    				year += 1;
    				month = 0;
    			}else{
    				month += 1;
    			}
    			render();
    			opt.nextMonthCb && opt.nextMonthCb(year,month+1,day);
    		},
    		this.nextYearFun = function () {
    			year += 1;
    			render();
    			opt.nextYeayCb && opt.nextYeayCb(year,month+1,day);
    		},
    		this.prevMonthFun = function () {
    			if(month-1 < 0){
    				year -= 1;
    				month = 11;
    			}else{
    				month -= 1;
    			}
    			render();
    			opt.prevMonthCb && opt.prevMonthCb(year,month+1,day);
    		},
    		this.prevYearFun = function () {
    			year -= 1;
    			render();
    			opt.prevYearCb && opt.prevYearCb(year,month+1,day);
    		}
    		init();
    	}
    	//将插件暴露给全局对象
    	_global = (function(){return this || (0,eval)('this')}());
    	if(typeof module !== 'undefined' && module.exports){
    		module.exports = Schedule;
    	}else if (typeof define === "function" && define.amd){
    		define(function () {
    			return Schedule;
    		})
    	}else {
    		!('Schedule' in _global) && (_global.Schedule = Schedule);
    	}
    
    }());
    回复
    香菇青菜 0
    2017/12/7 16:01:24

    你的这个不兼容ie8及ie8以下吗

    回复
    54shanshan 0
    2017/11/23 15:33:20

    我放到移动端怎么没反应

    回复
    西索小包子 0
    2017/10/18 17:15:03

    怎样使当天以前的日期不能选择

    回复
    开花结果翻江倒海i疯狗 0
    2017/10/16 10:12:51
    oooiuv 0
    2017/10/13 16:18:43

    遇到一个问题,我是一个页面要显示这个日历,不是作为一个日期选择框,但是你初始化的时候,初始了所有,我要怎么改,才可以

    回复
    大大大琳?? 0
    2017/9/28 15:49:31

    不能重复利用吗,一个页面里有很多时间需要选择,我把#h3Ele,改成了类名.h3Ele,但是只有第一个能起作用,其余的都显示空白

    回复
取消回复