jQuery实现移动端手机选择日期日历插件

效果图

calendar.css

html,
body {color: #333;margin: 0;height: 100%;font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: normal;
}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}a {text-decoration: none;color: #000;
}a,
label,
button,
input,
select {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}img {border: 0;
}body {background: #fff;color: #666;
}html,
body,
div,
dl,
dt,
dd,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
button,
fieldset,
form,
input,
legend,
textarea,
th,
td {margin: 0;padding: 0;
}a {text-decoration: none;color: #08acee;
}button {outline: 0;
}img {border: 0;
}button,
input,
optgroup,
select,
textarea {margin: 0;font: inherit;color: inherit;outline: none;
}input::-webkit-input-placeholder {color: #ccc;
}input::-moz-placeholder {/* Mozilla Firefox 19+ */color: #ccc;
}input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #ccc;
}input:-ms-input-placeholder {/* Internet Explorer 10-11 */color: #ccc;
}li {list-style: none;
}a {color: #666;
}.clearfix::after {clear: both;content: ".";display: block;height: 0;visibility: hidden;
}.aui-mask {background-color: #000;position: fixed;z-index: 99;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.3;filter: alpha(opacity=30);-moz-opacity: 0.3;display: none;
}.aui-calendar {z-index: 999;width: 90%;position: absolute;left: 5%;top: 50%;border-radius: 10px;overflow: hidden;text-align: center;transform: translate(0%, -50%);background-color: #fff;display: none;
}.aui-calendar li {float: left;
}.aui-head {background-color: #449eef;text-align: left;padding: 15px;margin: 10px;
}.aui-head-dt {font-size: 20px;color: #ddd;
}.aui-head-dd {font-size: 24px;color: #fff;
}.aui-date {height: 44px;position: relative;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;z-index: 1002;margin: 10px 0;
}.aui-date a {height: 44px;min-width: 25%;-webkit-box-flex: 0;-webkit-flex: 0 0 25%;-ms-flex: 0 0 25%;flex: 0 0 25%;padding: 0 0.9rem;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;font-size: 0.7rem;white-space: nowrap;overflow: hidden;color: #fff;position: relative;
}.aui-date a:first-child {-webkit-box-ordinal-group: 2;-webkit-order: 1;-ms-flex-order: 1;order: 1;margin-right: -25%;font-size: 0.9rem;font-weight: bold;
}.aui-date a:last-child {-webkit-box-ordinal-group: 4;-webkit-order: 3;-ms-flex-order: 3;order: 3;-webkit-box-pack: end;-webkit-justify-content: flex-end;-ms-flex-pack: end;justify-content: flex-end;
}.aui-date .tomon {-webkit-box-ordinal-group: 3;-webkit-order: 2;-ms-flex-order: 2;order: 2;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;height: 44px;width: 50%;margin-left: 25%;
}.aui-date .tomon span {padding: 0 5px;
}.aui-date .icon {width: 20px;height: 20px;display: block;border: none;float: left;background-size: 20px;background-repeat: no-repeat;
}.icon-prev {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA3CAIAAAAnuUURAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzVERkJGMDAyQjdFMTFFOTlGREE4MzQ0NzQ1MjE1NDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzVERkJGMDEyQjdFMTFFOTlGREE4MzQ0NzQ1MjE1NDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NDBGRDA1NTJCNzkxMUU5OUZEQTgzNDQ3NDUyMTU0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NDBGRDA1NjJCNzkxMUU5OUZEQTgzNDQ3NDUyMTU0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrK9EZYAAASvSURBVHja7JnbKzxhGMetXWdCDq2QXYdaKYVyIZEruXAsh0hCDn+AP4BSKMJ/QGmTKwk3QsnmvM4XLqy1ISTnM7t+X556m+xuvxmZnVX7Xkyz0zCf+b7P832e9x3Zx8eHm9MPd7e/MFyULkpnHAqhf8DHE3CPTCZjP3H+9PRkMpkuLy/DwsJUKpVCoRCXks9giDixWCxvb28bGxtarXZ7ezsnJ6epqUmpVArWRtCw8B642Ww2A1Gv1+fn5/v6+uJxubm5c3NzQh+qECmSoCLFhsFgaGlp0el0r6+vPj4+arVao9G4/SDORNLy/f3daDRmZmZCRUAjFmtqajY3N3Fd6ENFocREA2VnZ4chenh4NDQ0rK6uvry8UDBIT/n8/LyysoIQ9Pb2JkRkzPLyMjKdhawElBCPpQtQ5ufnCwsLEYWIKEJcXFxkiNJQgoxdf3x8nJ2dLS0t9fPzIxXr6+uXlpaASG8iASV7MIECcXp6uqKighBxrK6uXltbQyxyESXQkq7gCLVmZmYqKyv9/f2BGBQUBFwkEKWL9V9JEJdIF3h1eXk5IYaEhGDSt7a2vkkoJSXUWlhYKCkpIcTg4OCysjL4Issn6SlRUaBZXl4e+WJAQAAmGvWaIdp8MUdnDwpgVlYWmY6np2dVVRUh/rfEO4gSbcT+/j63utTV1a2vr0NdZ6FEuiDysrOzoSKrLqg3uM6zXRKdEiioJYhFLy8vQmxubsaVh4cH/k2duJRkOsXFxTBtKoCNjY2oLrB0Qa2nuJSoLjAaqi7Qsra2FhMNRHvpLA0llCNfhOmg0mCpAHUJ0Z6HS0CZmpr6ufR0d4+KipqammL9In/EH1AKXulGRETAF3ECPqT5xcUFPZW7aPz9IfS1hoaGkpOT5XI5sGBDfX19R0dH6Mxtdpz2rog+43d3dyMjIwkJCSQedO3v7z85OSEIe/Pu6M4N4/7+fnx8PDIyktaKWDZ0d3cfHx9Tjn8D4vagjqM0f43r6+vJyUmAIo0AGh4e3tHRYTKZbHafEuQ4E+zm5gaKxsfHw9gBGh0d3dbWdnh4KEaOy1tbWwVlG54h+xqISJiRSqXa3d29uroCNLQEfWxsbGBgIEWtvcQXagiCKbl7QFAREoaGhkLC8/NzsFK+EyiffyIWJbRELDIXQ5EEEwrm6ekpQGGfSCPcwwW1dlPRKa03gwAaFxeHI0DPzs4AajQa8SYIWVRRm0wOpfysXV+6EihMHsYJUEz93t4efgIUR5QA6x1NCXazyAuRQAMDA2lpaZT1WKb19PQgUtHVW+8ySLNPRKC3t7darTYpKUmhUJDhUwnl9nWOpmTP415BZRodHVWr1ZhoCobe3l6kFLeEOlpLm10Fav3ExASrTEj2rq4uhKzEexvfdMIJph4lFG4KRcGqVCrb29uphP6g2v3OPpFNboCOjY1pNBokE1hjYmLgJzApZ9llJQ4UIawqh4eHU1JSAEoO2tnZCZ9yFkomMxQdHBxMT09H3QdoQUGBXq93lm8U7PsVimdRURECAL3zwcEBGhT6pCKsyAn9Ps7zfvoeBfHoftiTTqczGAyJiYkZGRmwJ3EpXV9LXZQuyj9F+U+AAQC9h5AC1DsqpQAAAABJRU5ErkJggg==');
}.icon-next {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA3CAIAAAAnuUURAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzBFMjU2MUE1QzJFMTFFOUFCQTlFRjEyQzRBRTlGOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzBFMjU2MTk1QzJFMTFFOUFCQTlFRjEyQzRBRTlGOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNURGQkYwMDJCN0UxMUU5OUZEQTgzNDQ3NDUyMTU0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNURGQkYwMTJCN0UxMUU5OUZEQTgzNDQ3NDUyMTU0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pl5veZEAAASuSURBVHja7JnZK/RtGMcfZmyDbJF9spXSKES2KCdyQFKWOFDK8ldYolCEc4ksSQ4knCjKAUJjLSlkJ2Tfl3fez/Pc9Wsar/cxHrO8b+6DabrNuD++93V9r+vys9BoND/Mfln++C+sb8pvSnNccn2/8PLysrW1dXJy4urq6u/vb2dnp+0SvLewsPjtL/nIZ/6I8vT0tLu7e3x8XKVS5efnR0VFyeVyS0tLwarv8R9dGj3XxMREamoqX1QoFOnp6Wq1+vn5+fX1lR/99eGl76F6Ux4fH5eVlXHRyGZjY5OSkrK2tgalONtcKInLxcXFwsJCLhpQFE1MTCRS2TcjLTnj8fFxbm6uuLjYyspKAl1ZWQFUiGoWlKz7+/uZmZnS0lIBamtrS7DOzs4+PDwYglJWWVn5GQOTy93c3Ly8vEAkAJ6eng4ODvb39wMCAjw8PGQyGVn/L8akrxV8kvLnN2Uyd3d3b29vLprrBnR3d/fs7Ax0T09P/oyfNeOXQ71lMh4lJwGKckql8ubmZn19/e7ujjS6vr5mE1aCgcsVQDqsetvq5+JSe5FMaJmXl+fs7MzxDg4OuP3Y2BixKz7/9ltGyh6dRWovLS1lZ2cTrAI0NzcX/38vmUxAKRUe0ignJ8fFxUWAZmVlTU1NobRZULIpgS4vL3P1jo6OwkfT0tLQmMQyixvXXoAWFBRYW1sT9BTSpKSkzc1NHbc3PSXKzc/PFxUVaVemjY0NmhIzomSRNNQhqTKhaHJyMlErJZNZULJub2+np6fpngQo3RMxyo4ANVKF/O0CDleiMnGGSKDDw8OjoyPae6kyGaP2fKQyAern54cZra6uouLOzs7FxQWViXJv7Nrzns8LhwJuYWGBaiTsCR8tKSkxl7jUdnu0HB0d9fX1FY1SZGSkvocacNJFOUHJQEeCw8omPkojYvDpTFuqt+Lp7NDU7e3tNTc3izmJSA0PD+/q6jLqjb83P4h9XmmNW1paRB2CMiQkpK+vj9bOeJQSog6rNE/Sujc0NDBsiG7Sx8dnaGiITlSj//qa7Hm7j+nU1tZiOiCSNCCOjIxgQ6+/llnk+Pb2dlVVFU4JIvYeHByMipeXl5LMptRSvDJUVFRUBAUFISERqVKp+vv7uWjtCDGxliCWl5eTJaQzKkZHR3d2dl5dXf1J2/YFlNqpw0VTb0FERZImLi6ura1NIEofk1pm02iJL1ZXV1OgQaQDio+Pb21tJRb/0bCM7Zfs0N7S79TV1ZHIIhZjY2NRkYzW1s+olDrngYiKjY2NYigjFqOiotrb299T0diU4r0ogMK66RrDwsJ6enp0YtE0M6RUAKkuTU1NRKH4hwxBOTAwoG06EpDJpjNqdH19vZOTk1RdhoeHqdEf6UIMTilAKYA1NTXMBvChImWGAshFSz2lpLfJbhzrxheVSqWw7tDQ0MHBQYH4wSpvcMrz83NMh9KMiiBGRET09vYyMdJKmtH/1dVqdUZGhvDFmJiYjo4OkdEGfUah9/MehULBBEMZJKNzcnIyMzPt7e1Fz2/A4UTf3874Mjk5yeQaGBiYkJDATCj6cBSSnk19+bMzC833U/xvym/K/zPl3wIMACDKCSeu84zXAAAAAElFTkSuQmCC');
}.aui-week ol {display: -webkit-flex;display: flex;padding: 10px;
}.aui-week li {flex-grow: 1;color: #999;
}.aui-content {display: flex;width: 300%;margin-left: -100%;
}.aui-day {flex: 1;width: 100%;display: block;overflow: hidden;padding: 0 10px;
}.aui-day li {display: block;width: 14.2857%;text-align: center;font-size: 14px;background: #fff;position: relative;color: #000;
}.aui-day li span {display: block;width: 2.5rem;height: 2.5rem;line-height: 2.5rem;margin: 0 auto;text-align: center;
}.aui-day li.active span {background-color: #08acee;color: #fff;border-radius: 50%;
}.aui-day li.gray {color: #ccc;
}.aui-month,
.aui-year {flex: 1;width: 100%;box-sizing: border-box;overflow: hidden;border: 1px solid #ccc;margin: 0 10px;
}.aui-month li,
.aui-year li {float: left;width: 25%;color: #909090;font-size: 16px;cursor: pointer;border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;box-sizing: border-box;margin-left: -1px;margin-bottom: -1px;
}.aui-month li.selected span {color: #449eef;font-weight: bold;
}.aui-year li.current span {color: #449eef;font-weight: bold;
}.aui-month li span,
.aui-year li span {display: block;width: 2.5rem;height: 5rem;line-height: 5rem;margin: 0 auto;text-align: center;
}.aui-foot {text-align: right;padding: 20px 30px;
}.aui-foot a {margin-left: 20px;color: #449eef;
}

calendar.js

/**** 时间插件***/
(function ($) {//工具var Util = {// 格式化时间formateToDate: function (dateStr) {if (dateStr) {return new Date(dateStr);} else {return null;}},getMonthData: function (year, month) {var ret = [];if (!year || !month) {var today = new Date();year = today.getFullYear();month = today.getMonth() + 1;}var firstDay = new Date(year, month - 1, 1);var firstDayWeekDay = firstDay.getDay();firstDayWeekDay = firstDayWeekDay + 1;var lastDayOfLastMonth = new Date(year, month - 1, 0);var lastDateOfLastMonth = lastDayOfLastMonth.getDate();var preMonthDayCount = firstDayWeekDay - 1;if (preMonthDayCount == 0) {preMonthDayCount = 7}var lastDay = new Date(year, month, 0);var lastDate = lastDay.getDate();for (var i = 0; i < 7 * 6; i++) {var date = i + 1 - preMonthDayCount;var showDate = date;var thisMonth = month;if (date <= 0) {//上月thisMonth = month - 1;showDate = lastDateOfLastMonth + date;} else if (date > lastDate) {//下月thisMonth = month + 1;showDate = showDate - lastDate;}if (thisMonth == 0) thisMonth = 12;if (thisMonth == 13) thisMonth = 1;var thisYear = year;if (date <= 0 && thisMonth == 12) {thisYear = year - 1;} else if (date > lastDate && thisMonth == 1) {thisYear = year + 1;}ret.push({month: thisMonth,date: date,showDate: showDate,year: thisYear})}return ret;},// 获取当天是周几getWeekDate: function (year, month, day) {var week = new Date(year, month - 1, day).getDay();return week;},// 星期0转换星期日weekChange: function (week) {var arr = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");var week = arr[week];return week;}}//UIfunction UI(opts) {this.opts = opts;//年this.year = null;//月this.month = null;//日this.date = null;//开始时间this.startDate = null;this.showYearStart = 2009;}UI.prototype = {buildHeaderText: function ($datePicker) {var $headerText = $('<div class="aui-head">\<div class="aui-head-dt" id="head-year">2020</div>\<div class="aui-head-dd">\<span id="head-month">13</span>月\<span id="head-day">11</span>日\<span id="head-week">周五</span>\</div>\</div>');this.headerText = $headerText;$datePicker.append($headerText);},buildHeader: function ($datePicker) {var $header = $('<div class="aui-date">\<a href="javascript:;" class="prev" id="prev-month"><i class="icon icon-prev"></i></a>\<div class="tomon">\<span class="year" id="year">2020</span>年<span class="month" id="month">12</span>月\</div>\<a href="javascript:;" class="next" id="next-month"><i class="icon icon-next"></i></a>\</div>');this.header = $header;$datePicker.append($header);},buildBody: function ($datePicker) {var $body = $('<div class="aui-week">\<ol><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ol></div>\<div class="aui-content" id="aui-content">\<ul class="aui-year" id="aui-year">\</ul>\<ul class="aui-day" id="aui-day"></ul>\<ul class="aui-month" id="aui-month">\<li><span>1月</span></li>\<li><span>2月</span></li>\<li><span>3月</span></li>\<li><span>4月</span></li>\<li><span>5月</span></li>\<li><span>6月</span></li>\<li><span>7月</span></li>\<li><span>8月</span></li>\<li><span>9月</span></li>\<li><span>10月</span></li>\<li><span>11月</span></li>\<li><span>12月</span></li>\</ul>\</div>');this.body = $body;$datePicker.append($body);},buildBtns: function ($datePicker) {var $btns = $('<div class="aui-foot">\<a href="javascript:;" class="aui-btn" id="btnCancel">取消</a>\<a href="javascript:;" class="aui-btn" id="btnConfirm">确定</a>\</div>');this.btns = $btns;$datePicker.append($btns);},initPageData: function (startDate) {this.startDate = startDate;this.curStartDate = startDate;//年var year = startDate.getFullYear();//月var month = startDate.getMonth() + 1;//日var date = startDate.getDate();this.initPageYear(year);this.initPageMonth(month);this.initPageDate(date);this.initPageWeek(year, month, date);this.showPageDate(year, month);this.showPageYear(this.showYearStart);},//初始化年份initPageYear: function (year) {this.year = year;var index = 0;var arrli = $(this.opts.yearList).find("li");for (var i = 0; i < arrli.length; i++) {var element = arrli[i];var span = $(element).children().text();if (year == span) {index = i;}}$(this.opts.yearList).find("li").removeClass('current');$(this.opts.yearList).find("li").eq(index).addClass('current');$(this.opts.yearDiv).text(year);$(this.opts.headYear).text(year);},//初始化月份initPageMonth: function (month) {this.month = month;$(this.opts.monthList).find("li").removeClass('selected');$(this.opts.monthList).find("li").eq(month - 1).addClass('selected');$(this.opts.monthDiv).text(month);$(this.opts.headMonth).text(month);},// 初始化日期initPageDate: function (date) {this.date = date;$(this.opts.headDate).text(date);},// 初始化星期initPageWeek: function (year, month, date) {this.year = year;this.month = month;this.date = date;var week = Util.getWeekDate(year, month, date);week = Util.weekChange(week);$(this.opts.headWeek).text(week);},//获取页面的年份getPageYear: function () {var year = parseInt(this.year);return year;},//获取页面的月份getPageMonth: function () {var month = parseInt(this.month);return month;},// 展示日期showPageDate: function (year, month) {var _this = this;var array = Util.getMonthData(year, month);var html = '';for (var i = 0, j = array.length; i < j; i++) {var item = array[i];//开始html = html + '<li class="' + _this.getClassName(item) + '" data-year="' + item.year + '" data-month="' + item.month + '" data-date="' + item.showDate + '"><span>' + item.showDate + '</span></li>'}$(this.opts.dateList).html(html);},// 展示年份showPageYear: function (showYearStart) {var _this = this;var index = 0;_this.showYearStart = showYearStart;$(_this.opts.yearList).children().remove();for (var i = showYearStart; i < showYearStart + 12; i++) {index++;if (i == showYearStart) {$last = $("<li><span>往前</span></li>");$(_this.opts.yearList).append($last);$last.click(function () {_this.showPageYear(showYearStart - 10);});continue;}if (i == showYearStart + 11) {$next = $("<li><span>往后</span></li>");$(_this.opts.yearList).append($next);$next.click(function () {_this.showPageYear(showYearStart + 10);});continue;}if (i == _this.year) {$yearItem = $('<li class="current" id="' + index + '"><span>' + i + '</span></li>')} else {$yearItem = $('<li id="' + index + '"><span>' + i + '</span></li>');}$(_this.opts.yearList).append($yearItem);$yearItem.click(function () {$(_this.opts.yearList).find("li").removeClass('current');$(this).addClass('current');var year = $(this).text();year = parseInt(year, 10);_this.initPageYear(year);_this.initPageWeek(_this.year, _this.month, _this.date);_this.showPageDate(_this.year, _this.month);_this.showPageYear(_this.showYearStart);$(_this.opts.warpDiv).animate({"marginLeft": -100 + "%"}, 200)})}},getClassName: function (item) {var className = '';// 最后一天日期var lastDay = new Date(this.year, this.month, 0);var lastDate = lastDay.getDate();if (item.date < 1) {className = className + ' gray';} else if (item.date > lastDate) {className = className + ' gray';}// 年var yearStart = this.curStartDate.getFullYear();// 月var monthStart = this.curStartDate.getMonth() + 1;// 日var dateStart = this.curStartDate.getDate();if (item.year == yearStart && item.month == monthStart && item.showDate == dateStart) {className = className + ' active';}return className;},// 绑定事件bindEvents: function () {var _this = this;// 点击上一月$(_this.opts.prevMonth).click(function () {var month = _this.month - 1;var year = _this.year;if (month < 1) {month = 12;year -= 1;}_this.initPageMonth(month);_this.initPageYear(year);_this.initPageWeek(_this.year, _this.month, _this.date);_this.showPageDate(_this.year, _this.month);});// 点击下一月$(_this.opts.nextMonth).click(function () {var month = _this.month + 1;var year = _this.year;if (month > 12) {month = 1;year += 1;}_this.initPageMonth(month);_this.initPageYear(year);_this.initPageWeek(_this.year, _this.month, _this.date);_this.showPageDate(_this.year, _this.month);});// 点击显示年份内容$(_this.opts.yearDiv).click(function () {$(_this.opts.warpDiv).animate({"marginLeft": 0}, 200)})// 点击显示月份内容$(_this.opts.monthDiv).click(function () {$(_this.opts.warpDiv).animate({"marginLeft": -200 + "%"}, 200)})// 点击选择日期$(_this.opts.dateList).on("click", "li", function () {var year = $(this).data('year');var month = $(this).data('month');var date = $(this).data('date');//这种写法safari不支持// var clickDate = new Date(year + '-' + month + '-' + date);var clickDate = new Date(year + '/' + month + '/' + date);$('li.active').removeClass('active');$(this).addClass('active');_this.initPageYear(year);_this.initPageMonth(month);_this.initPageDate(date);_this.initPageWeek(year, month, date);_this.curStartDate = clickDate;})// 点击选择月份$(_this.opts.monthList).on("click", "li", function () {$(_this.opts.monthList).find("li").removeClass('selected');$(this).addClass('selected');var month = $(this).text();month = parseInt(month, 10);_this.initPageMonth(month);_this.initPageWeek(_this.year, _this.month, _this.date);_this.showPageDate(_this.year, _this.month);$(_this.opts.warpDiv).animate({"marginLeft": -100 + "%"}, 200)})// 点击确定按钮$(_this.opts.confirmBtn).click(function () {var json = {};json.startDate = {};_this.startDate = _this.curStartDate;// 年var year = _this.curStartDate.getFullYear();// 月var month = _this.curStartDate.getMonth() + 1;// 日var date = _this.curStartDate.getDate();var str = year + "-" + month + "-" + date;$("input.dateVisited").val(str);$("input.dateVisited").removeClass('dateVisited');_this.$datePicker.hide();_this.$mask.hide();json.startDate.year = year;json.startDate.month = month;json.startDate.date = date;//执行回调if (_this.opts.okFunc) {_this.opts.okFunc(json);} else {throw new Error('okFunc函数未定义');}});// 点击取消按钮$(_this.opts.cancelBtn).click(function () {_this.initPageData(_this.startDate);_this.$datePicker.hide();_this.$mask.hide();});}}function buildUI(targetEle, opts) {var ui = new UI(opts);var $mask = $('<div class="aui-mask" id="aui-mask"></div>');var $datePicker = $('<section class="aui-calendar" id="aui-calendar"></div>');ui.buildHeaderText($datePicker);ui.buildHeader($datePicker);ui.buildBody($datePicker);ui.buildBtns($datePicker);ui.$datePicker = $datePicker;ui.$mask = $mask;$('body').append($mask);$('body').append($datePicker);return ui;}$.fn.datePicker = function (options) {var opts = {yearDiv: "#year",monthDiv: "#month",warpDiv: "#aui-content",dateList: "#aui-day",monthList: "#aui-month",yearList: "#aui-year",headYear: "#head-year",headMonth: "#head-month",headDate: "#head-day",headWeek: "#head-week",prevMonth: "#prev-month",nextMonth: "#next-month",cancelBtn: "#btnCancel",confirmBtn: "#btnConfirm",};$.extend(opts, options);var date = new Date();// 开始时间var startDate = Util.formateToDate(date);var UI = buildUI(this, opts);UI.initPageData(startDate);UI.bindEvents();var _this = this;// 点击目标$(_this).click(function (e) {e.stopPropagation();$(this).addClass("dateVisited");UI.$mask.show();UI.$datePicker.show();});//点击日历UI.$datePicker.click(function (e) {e.stopPropagation();});//点击页面$(document).click(function (e) {$(UI.$datePicker).hide();$(UI.$mask).hide();});};
})(jQuery);

index.html

<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery手机选择日期日历插件</title><!--日历样式-->
<link rel="stylesheet" href="css/calendar.css"><!--可无视-->
<style>
.row {padding: 10px;
}.row input {width: 100%;height: 40px;
}
</style><script src="js/jquery.min.js"></script></head><body><div class="row"><input type="text" class="room" id="startTime">
</div><div class="row"><input type="text" class="room" id="endTime">
</div><!--日期日历插件-->
<script src="js/calendar.js"></script><!--方法调用-->
<script>
$('.room').datePicker({okFunc: function (date) {console.log(date['startDate']);}
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>

项目需要引入jquery框架

项目开发中遇到的问题

　　new Date("2022-01-01")在safari和苹果版微信上面竟然不支持，

　　解决方式：

　　1、new Date("2022/01/01") ：这种写法在safari、chrome上都支持

　　2、new Date(2022,0,1)　　: 可以把"2022-01-01"分割成年 月  日   

https://www.jb51.net/jiaoben/669768.html#downintro2