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

最新推荐文章于 2025-03-12 16:56:22 发布

弯弯的小溪

最新推荐文章于 2025-03-12 16:56:22 发布

阅读量4.1k

点赞数

文章标签： jquery javascript css

原文链接：https://www.jb51.net/jiaoben/669768.html#downintro2

版权

本文探讨了在Safari和苹果版微信上使用日期选择器的兼容性问题，并提供了解决方案，包括日期格式调整和年份范围设置，以确保跨平台用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

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;
        }
    }

    //UI
    function 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