jQuery日期选择器插件DCalendar js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery日期选择器插件DCalendar js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery日期选择器插件DCalendar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/dcalendar.picker.css"/>

</head>
<body>
<div class="zzsc-container">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h3>日历-calendar</h3>
				<table id='mycalendar' class='calendar'></table>
			</div>
			<div class="col-md-6">
				<h3>日期选择器-datepicker</h3>
				<input id='mydatepicker' type='text'/>
				<h3>格式化日期</h3>
				<input id='mydatepicker2' type='text'/>
			</div>
		</div>
	</div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/dcalendar.picker.js"></script>
<script type="text/javascript">
	$('#mydatepicker').dcalendarpicker(); 
	$('#mydatepicker2').dcalendarpicker({
		format:'yyyy-mm-dd'
	}); 
	$('#mycalendar').dcalendar();
</script>
</body>
</html>

JS代码(dcalendar.picker.js):

/* -- DO NOT REMOVE -- * jQuery DCalendar 1.1 and DCalendar Picker 1.3 plugin * * Author:Dionlee Uy * Email:dionleeuy@gmail.com * * Date:Sat Mar 2 2013 * * @requires jQuery * -- DO NOT REMOVE -- */
if (typeof jQuery === 'undefined'){
	throw new Error('DCalendar.Picker:This plugin requires jQuery');
}
+function ($){
	Date.prototype.getDays = function(){
	return new Date(this.getFullYear(),this.getMonth() + 1,0).getDate();
}
;
	var months = ['January','February','March','April','May','June','July','August','September','October','November','December'],short_months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],daysofweek = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],DCalendar = function(elem,options){
	this.calendar = $(elem);
	this.today = new Date();
	//system date//current selected date,default is today if no value givenif(this.calendar.prev().val() === ''){
	this.date = new Date();
}
else{
	var dateObj = this.reformatDate(this.calendar.prev().val());
	this.date = isNaN(parseInt(dateObj.m)) ? new Date(dateObj.m + " " + dateObj.d + "," + dateObj.y):new Date(dateObj.y,dateObj.m - 1,dateObj.d);
}
this.viewMode = 'days';
	this.options = options;
	this.selected = (this.date.getMonth() + 1) + "/" + this.date.getDate() + "/" + this.date.getFullYear();
	this.minDate = this.calendar.prev().data('mindate');
	this.maxDate = this.calendar.prev().data('maxdate');
	if(options.mode === 'calendar')this.tHead = $('<thead><tr><th id="prev">&lsaquo;
	</th><th colspan="5" id="currM"></th><th id="next">&rsaquo;
	</th></tr><tr><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr></thead>');
	else if (options.mode === 'datepicker')this.tHead = $('<thead><tr><th id="prev">&lsaquo;
	</th><th colspan="5" id="currM"></th><th id="next">&rsaquo;
	</th></tr><tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr></thead>');
	this.tHead.find('#currM').text(months[this.today.getMonth()] +" " + this.today.getFullYear());
	this.calendar.prepend(this.tHead);
	var that = this;
	this.calendar.on('click','#next',function(){
	initCreate('next');
}
).on('click','#prev',function(){
	initCreate('prev');
}
).on('click','#today',function(){
	that.viewMode = 'days';
	var curr = new Date(that.date),sys = new Date(that.today);
	if(curr.toString() != sys.toString()){
	that.date = sys;
}
that.create('days');
}
).on('click','.date,.pMDate,.nMDate',function(){
	var isPrev = $(this).hasClass('pMDate'),isNext = $(this).hasClass('nMDate'),sdate = $(this).text(),cmonth = that.date.getMonth(),cyear = that.date.getFullYear(),min = that.minDate === "today" ? new Date(that.today.getFullYear(),that.today.getMonth(),that.today.getDate()):new Date(that.minDate),max = that.maxDate === "today" ? new Date(that.today.getFullYear(),that.today.getMonth(),that.today.getDate()):new Date(that.maxDate);
	/* Calculate year */
if(isPrev){
	cyear = (cmonth === 0 ? cyear - 1:cyear);
}
else if(isNext){
	cyear = (cmonth + 2 === 13 ? cyear + 1:cyear);
}
/* Calculate month */
if(isPrev){
	cmonth = (cmonth === 0 ? '12':cmonth);
}
else if (isNext){
	cmonth = (cmonth + 2 === 13 ? '1':cmonth + 2);
}
else{
	cmonth = cmonth + 1;
}
// Selected datevar selected = new Date(cyear,cmonth - 1,sdate);
	// console.log(cmonth);
	// console.log(selected);
	if ((that.minDate && selected < min) || (that.maxDate && selected > max)) return;
	that.selected = cmonth + '/' + sdate + '/' + cyear;
	if(that.options.mode === 'datepicker'){
	that.calendar.find('td').removeClass('selected');
	$(this).addClass('selected');
}
that.selectDate();
	return true;
}
).on('click','#currM',function(){
	that.viewMode = 'months';
	that.create(that.viewMode);
}
).on('click','.month',function(e){
	that.viewMode = 'days';
	var curr = new Date(that.date),y = that.calendar.find('#currM').text();
	curr.setMonth($(e.currentTarget).attr('num'));
	that.date = curr;
	that.create(that.viewMode);
}
);
	function initCreate(o){
	var curr = new Date(that.date),currMonth = curr.getMonth(),currYear = curr.getFullYear();
	curr.setDate(1);
	if(that.viewMode === 'days'){
	curr.setMonth(currMonth + (o === 'next' ? 1:-1));
}
else{
	curr.setFullYear(currYear + (o === 'next' ? 1:- 1));
}
that.date = curr;
	that.create(that.viewMode);
}
this.create(this.viewMode);
}
DCalendar.prototype ={
	constructor:DCalendar,setDate:function(){
	var that = this,dateObj = that.reformatDate(that.calendar.prev().val()),value = isNaN(parseInt(dateObj.m)) ? new Date(dateObj.m + " " + dateObj.d + "," + dateObj.y):new Date(dateObj.y,dateObj.m - 1,dateObj.d);
	that.selected = (value.getMonth() + 1) + "/" + value.getDate() + "/" + value.getFullYear();
	that.selectDate();
	that.date = value;
	that.create(that.viewMode);
}
,selectDate:function (){
	var that = this,newDate = that.formatDate(that.options.format),e = $.Event('selectdate',{
	date:newDate}
);
	that.calendar.trigger(e);
}
,reformatDate:function (date){
	var that = this,format = that.options.format;
	return{
	m:date.substring(format.indexOf('m'),format.lastIndexOf('m') + 1),d:date.substring(format.indexOf('d'),format.lastIndexOf('d') + 1),y:date.substring(format.indexOf('y'),format.lastIndexOf('y') + 1)}
;
}
,formatDate:function (format){
	var that = this;
	var d = new Date(that.selected),day = d.getDate(),m = d.getMonth(),y = d.getFullYear();
	return format.replace(/(yyyy|yy|mmmm|mmm|mm|m|dd|d)/gi,function (e){
	switch(e.toLowerCase()){
	case 'd':return day;
	case 'dd':return (day < 10 ? "0"+day:day);
	case 'm':return m+1;
	case 'mm':return (m+1 < 10 ? "0"+(m+1):(m+1));
	case 'mmm':return short_months[m];
	case 'mmmm':return months[m];
	case 'yy':return y.toString().substr(2,2);
	case 'yyyy':return y;
}
}
);
}
,create:function(mode){
	var that = this,cal = [],tBody = $('<tbody></tbody>'),d = new Date(that.date.getFullYear(),that.date.getMonth(),that.date.getDate()),days = that.date.getDays(),day = 1,nStartDate = 1,selDate = that.selected.split('/'),selected = new Date(selDate[2],selDate[0] -1,selDate[1]),today = new Date(that.today.getFullYear(),that.today.getMonth(),that.today.getDate()),min = that.minDate === "today" ? today:new Date(that.minDate),max = that.maxDate === "today" ? today:new Date(that.maxDate);
	that.calendar.empty();
	if(mode === "days"){
	if(that.options.mode === 'calendar'){
	that.tHead = $('<thead><tr><th id="prev">&lsaquo;
	</th><th colspan="5" id="currM"></th><th id="next">&rsaquo;
	</th></tr><tr><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr></thead>');
}
else if (that.options.mode === 'datepicker'){
	that.tHead = $('<thead><tr><th id="prev">&lsaquo;
	</th><th colspan="5" id="currM"></th><th id="next">&rsaquo;
	</th></tr><tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr></thead>');
}
that.tHead.find('#currM').text(months[that.date.getMonth()] +" " + that.date.getFullYear());
	that.calendar.append(that.tHead);
	for(var i = 1;
	i <= 6;
	i++){
	var temp = [$('<td></td>'),$('<td></td>'),$('<td></td>'),$('<td></td>'),$('<td></td>'),$('<td></td>'),$('<td></td>')];
	while(day <= days){
	d.setDate(day);
	var dayOfWeek = d.getDay();
	if(d.getTime() == today.getTime()) temp[dayOfWeek].attr('id','currDay');
	if ((that.minDate && d < min) || (that.maxDate && d > max)) temp[dayOfWeek].addClass('disabled');
	if(that.options.mode === 'datepicker' && d.getTime() == selected.getTime()) temp[dayOfWeek].addClass('selected');
	if(i === 1 && dayOfWeek === 0) break;
	else if(dayOfWeek < 6) temp[dayOfWeek].html('<span>'+(day++)+'</span>').addClass('date');
	else{
	temp[dayOfWeek].html('<span>'+(day++)+'</span>').addClass('date');
	break;
}
}
/* For days of previous and next month */
if (i === 1 || i > 4){
	// First weekif (i === 1){
	var p = new Date(that.date.getFullYear(),that.date.getMonth() - 1,1),pMonth = p.getMonth(),pDays = p.getDays();
	for (var a = 6;
	a >= 0;
	a--){
	if (temp[a].text() === ''){
	p.setDate(pDays);
	temp[a].html('<span>' + (pDays--) + '</span>').addClass('pMDate');
	if ((that.minDate && p < min) || (that.maxDate && p > max)) temp[a].addClass('disabled');
	if (that.options.mode === 'datepicker' && p.getTime() == selected.getTime()) temp[a].addClass('selected');
}
}
}
// Last weekelse if (i > 4){
	var nextMonth = new Date(that.date.getFullYear(),that.date.getMonth() + 1,1);
	for (var a = 0;
	a <= 6;
	a++){
	if (temp[a].text() === ''){
	nextMonth.setDate(nStartDate);
	temp[a].html('<span>' + (nStartDate++) + '</span>').addClass('nMDate');
	if ((that.minDate && nextMonth < min) || (that.maxDate && nextMonth > max)) temp[a].addClass('disabled');
	if (that.options.mode === 'datepicker' && nextMonth.getTime() == selected.getTime()) temp[a].addClass('selected');
}
}
}
}
cal.push(temp);
}
$.each(cal,function(i,v){
	var row = $('<tr></tr>'),l = v.length;
	for(var i = 0;
	i < l;
	i++){
	row.append(v[i]);
}
tBody.append(row);
}
);
	var sysDate = "Today:" + daysofweek[that.today.getDay()] + "," + months[that.today.getMonth()] + " " + that.today.getDate() + "," + that.today.getFullYear();
	tBody.append('<tr><td colspan="7" id="today">' + sysDate + '</td></tr>').appendTo(that.calendar);
}
else{
	this.tHead = $('<thead><tr><th id="prev">&lsaquo;
	</th><th colspan="2" id="currM"></th><th id="next">&rsaquo;
	</th></tr>');
	that.tHead.find('#currM').text(that.date.getFullYear());
	that.tHead.appendTo(that.calendar);
	var currI = 0;
	for (var i = 0;
	i < 3;
	i++){
	var row = $('<tr></tr>');
	for (var x = 0;
	x < 4;
	x++){
	var col = $('<td align="center"></td>');
	var m = $('<span class="month" num="' + currI + '">' + short_months[currI] + '</span>');
	col.append(m).appendTo(row);
	currI++;
}
tBody.append(row);
}
var sysDate = "Today:" + daysofweek[that.today.getDay()] + ","+ months[that.today.getMonth()] + " " + that.today.getDate() + "," + that.today.getFullYear();
	tBody.append('<tr><td colspan="4" id="today">' + sysDate + '</td></tr>').appendTo(that.calendar);
}
}
}
/* DEFINITION FOR DCALENDAR */
$.fn.dcalendar = function(opts){
	return $(this).each(function(index,elem){
	var that = this;
	var $this = $(that),data = $(that).data('dcalendar'),options = $.extend({
}
,$.fn.dcalendar.defaults,$this.data(),typeof opts === 'object' && opts);
	if(!data){
	$this.data('dcalendar',(data = new DCalendar(this,options)));
}
if(typeof opts === 'string') data[opts]();
}
);
}
$.fn.dcalendar.defaults ={
	mode:'calendar',format:'mm/dd/yyyy',}
;
	$.fn.dcalendar.Constructor = DCalendar;
	/* DEFINITION FOR DCALENDAR PICKER */
$.fn.dcalendarpicker = function(opts){
	return $(this).each(function(){
	var that = $(this),hovered = false,selectedDate = false,cal = null;
	if(typeof opts === 'string'){
	var data = that.next('.calendar').data('dcalendar');
	data[opts]();
}
else{
	cal = $('<table class="calendar"></table>');
	that.wrap($('<div class="datepicker" style="display:inline-block;
	position:relative;
	"></div>'));
	cal.css({
	position:'absolute',left:0,display:'none','box-shadow':'0 4px 6px 1px rgba(0,0,0,0.14)',width:'230px',}
).appendTo(that.parent());
	if(opts){
	opts.mode = 'datepicker';
	cal.dcalendar(opts);
}
else{
	cal.dcalendar({
	mode:'datepicker'}
);
}
cal.hover(function(){
	hovered = true;
}
,function(){
	hovered = false;
}
).on('click',function(){
	if(!selectedDate)that.focus();
	else{
	selectedDate = false;
	$(this).hide();
}
}
).on('selectdate',function(e){
	that.val(e.date).trigger('onchange');
	that.trigger($.Event('dateselected',{
	date:e.date,elem:that}
));
	selectedDate = true;
}
);
	that.on('keydown',function(e){
	if(e.which) return false;
}
).on('focus',function(){
	$('.datepicker').find('.calendar').not(cal).hide();
	cal.show();
}
).on('blur',function(){
	if(!hovered) cal.hide();
}
);
}
}
);
}
}
(jQuery);

CSS代码(zzsc.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.zzsc-container{margin:0 auto;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.zzsc-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;background:#66677c;}
.zzsc-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.zzsc-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.zzsc-demo a{color:#fff;text-decoration:none;}
.zzsc-demo{width:100%;padding-bottom:1.2em;}
.zzsc-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.zzsc-demo a:hover{opacity:0.6;}
.zzsc-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.zzsc-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.zzsc-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.zzsc-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.zzsc-icon span{display:none;}
.zzsc-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.zzsc-footer{width:100%;padding-top:10px;}
.zzsc-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;font-size:1.2em}
.related a h3{font-size:0.85em;font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-zzsc-home-outline:before{content:"\e5000";}
.icon-zzsc-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:1024px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1.4em;}
.zzsc-links{font-size:1.4em}
}
@media screen and (max-width:960px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1.2em;}
.zzsc-links{font-size:1.2em}
.related h3{font-size:1em;}
.related a h3{font-size:0.8em;}
}
@media screen and (max-width:766px){.zzsc-header h1{font-size:1.3em;}
.zzsc-links{font-size:1.3em}
}
@media screen and (max-width:640px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1em;}
.zzsc-links{font-size:1em}
.related h3{font-size:0.8em;}
.related a h3{font-size:0.6em;}
}

附件:下载该文件资源,减少时间成本(增值服务)