- 一个支持范围选择的日历（移动端）
需求原型：
1、日历默认显示当前月，并且标注当日的日期，当日以后得日期置灰不可以选择。
2、日历支持选择某单个日期和范围选择，并且选中的两个日期之间要加背景色。
3、限制最多选择6个月，超出六个月提示“最多选择6个月”，并且日历滚动到选择的起始日期位置，保留开始日期的选中效果，继续选择结束日期。
4、在显示周的元素下面，要有个显示当前滚动到的年月的元素并带有动画效果。
demo采用的是rem布局。
需求大概就是这个样子，下面贴代码咯：
- 具体实现逻辑
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>日历</title> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"> <meta content="telephone=no" name="format-detection" /> <title>Document</title> <link rel="stylesheet" href="./base.css"> <link rel="stylesheet" href="./calnder.css"></head><body> <div class="header-top" id="header-top" v-show="controlState === 2" v-cloak> <div class="control-box"> <span>日历范围选择</span> <span class="close__btn" @click="closeCalendar"></span> </div> <ul id="week-item"></ul> <div class="current-time"> <input type="text" id="current-time" readonly> </div> </div> <div class="main"> <div class="mode-one" id="mode-one"> <div id="week-box"></div> </div> <div class="calendar__dialog">最多可选六个月，请重新选择！</div> <div class="footer-box"> <div class="confirm-btn">确定</div> </div> </div> <script src="./resize.js"></script> <script src="./utils.js"></script> <script> //默认显示当前月 window.scrollTo(0, document.body.scrollHeight); let startYear = 2010; let $Yday = Utils.getElement('.j-year-day'); let $Yhour = Utils.getElement('.j-year-hour'); let $Dh = Utils.getElement('.j-day-h'); let $Dm = Utils.getElement('.j-day-m'); let $Ds = Utils.getElement('.j-day-s'); let $CurrentTime = Utils.getElement('.j-time'); let vm = { timeArr: [] } let date = new Date() let year = date.getFullYear(); let thisMonth = date.getMonth(); let thisDay = date.getDate(); let dayS = 24 * 60 * 60; let dateS = date.getTime(); let dateEndS = new Date(year, 11, 31, 23, 59, 59).getTime(); let weeks = ['日', '一', '二', '三', '四', '五', '六']; let dayStr = ''; let dayItem = ''; for (let i = 0; i < weeks.length; i++) { dayItem += '<li class="week-item">' + weeks[i] + '</li>' } let ulContent = Utils.getElement('.header-top ul'); ulContent.innerHTML = dayItem; // 立即生成日历html ;(function createCalendar(y) { let calnderBody = Utils.getElement('.mode-one'); for (y; y <= year; y++) { calnderBody.innerHTML = handelYear(y); } })(startYear) // 循环月份 function handelYear(y) { for (let month = 0; month <= 11; month++) { if (y === year) { if (month > thisMonth) break; } // 每个月的第一天 let firstDay = new Date(y, month, 1); let dayInMonth = daysInMonth(month, y); // 每个月的最后一天 let lastDay = new Date(y, month, dayInMonth); let weekday = firstDay.getDay(); // 星期几 0-6 let lastDayWeekDay = lastDay.getDay(); // 当月的最后一天星期几 0-6 let date = 1; // 第一天，计数用 let showMonth = month + 1; let newMonth = Utils.timePad(showMonth) dayStr += '<div class="current-month">' + y + '年' + newMonth + '月 </div><div class="month">'; // 补齐前面的空格 for (let i = 0; i < weekday; i++) { dayStr += '<div class="item"></div>'; } for (; date <= dayInMonth; date++) { let copyDate = date; let newDate = Utils.timePad(copyDate) if (month == thisMonth && date == thisDay && y == year) { dayStr += '<div class="item now dateItem" data-disabled=' + (date > thisDay) + ' data-current=' + y + '-' + newMonth + '-' + newDate + '>' + date + '</div>'; } else if (month == thisMonth && y == year) { // data-disabled='+ (date > thisDay) +' dayStr += '<div class="item dateItem" data-disabled=' + (date > thisDay) + ' data-current=' + y + '-' + newMonth + '-' + newDate + ' >' + date + '</div>'; } else { dayStr += '<div class="item dateItem" data-current=' + y + '-' + newMonth + '-' + newDate + ' >' + date + '</div>'; } weekday++ if (weekday % 7 == 0) { weekday = 0; } } // 补齐后面的空格 for (let j = 0; j < (7 - lastDayWeekDay - 1); j++) { dayStr += '<div class="item"></div>'; } // dayStr += '<br/></div>'; dayStr += '<p class="after-dom" data-time=' + y + '年' + newMonth + '月></p></div>'; } return dayStr } document.body.onclick = function (ev) { let e = ev || window.event; checkActive(); let currBox = Utils.getElement('.current-time #current-time'); // 如果不是iphone 7plus 和 iphonex机型 要加一个月 if (currBox) { if (isIphonex()) { currBox.value = year + '年' + Utils.timePad(thisMonth) + '月' } else if (getPhoneType().replace(/\s*/g, "") === 'iphone6' || getPhoneType().replace( /\s*/g, "") === 'iphone5s' && !isIphonex()) { currBox.value = year + '年' + Utils.timePad(thisMonth + 1) + '月'; } else if (getPhoneType() === 'iphone6 plus') { currBox.value = year + '年' + Utils.timePad(thisMonth + 1) + '月'; } else { currBox.value = year + '年' + Utils.timePad(thisMonth) + '月'; } } } // 监听滚动条事件 document.addEventListener('scroll', handelEvent, false) function handelEvent(e) { scrollFunc(); let monthBox = Utils.getAllElement('.current-month'), currBox = Utils.getElement('.current-time #current-time'); let monthBoxList = Utils.getAllElement('.after-dom'); let top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; _Set('scrollTop', top) if (scrollDirection == 'down') { // 判断 月盒子是否和头部日期盒子重叠，如果重叠就显示当前月的时间 let listenCurTime = []; handelTitleAnimate(listenCurTime, monthBox, currBox, 'pushDown', 'pushUp', 1) } else if (scrollDirection == 'up') { //判断每个月的盒子是否和头部日期盒子重叠 let listenCurTime = []; handelTitleAnimate(listenCurTime, monthBoxList, currBox, 'pushUp', 'pushDown', 2); } } // 处理滑动时候，头部日期动画效果 function handelTitleAnimate(arr, ele, ele1, class1, class2, type) { // let arr = []; for (let i = 0; i < ele.length; i++) { if (collision(ele1, ele[i])) { if (type === 1) { ele1.value = ele[i].innerText; arr.push(ele1.value) } else { ele1.value = ele[i].getAttribute('data-time'); arr.push(ele1.value); } } } if (arr.length) { ele1.classList.remove(class1); ele1.classList.add(class2); } else { ele1.classList.remove(class2); } } // 点击每个日期事件 function getCurrnetTime() { let itemDay = document.querySelectorAll('.month .dateItem'); let items; for (let i = 0, len = itemDay.length; i < len; i++) { items = itemDay[i]; if (items.dataset.disabled === 'true') { items.classList.add('disabled') } document.onclick = function (ev) { let e = ev || window.event; let target = e.target || e.srcElement; let confirmBtn = Utils.getElement('.footer-box div'); if (target.classList.contains('dateItem') === true) { let now = target.dataset.current; let isAllowChose = target.dataset.disabled; // 如果是今天之后的日期，点击无效 if (isAllowChose === 'true') return; if (vm.timeArr.length < 2) { vm.timeArr.push(now) target.classList.add('active'); if (vm.timeArr.length > 1) { // scopeValue表示选中的日期范围值 let scopeValue = getAll(vm.timeArr[0], vm.timeArr[1]); // 比较选中两个日期的大小，如果是倒序选择的，就重新选 // result表示是否是正序选择 let result = CompareDate(vm.timeArr[0], vm.timeArr[1]); if (!result) { checkClass('active'); vm.timeArr.splice(0, 1) target.classList.add('active') } else { // 选中的日期范围去匹配相应的dom，加class handelClass(scopeValue, undefined); } handelFinalBox(vm.timeArr[0], vm.timeArr[1], vm.timeArr); } } else { (vm.timeArr = [], vm.timeArr.push(now)); checkClass('active'); handelFinalBox(vm.timeArr[0], vm.timeArr[1], vm.timeArr) target.classList.add('active') } if (vm.timeArr.length == 1) { confirmBtn.classList.add('cover_back') handelClass(undefined, vm.timeArr); createVal(vm.timeArr); vm.maxDate = calcDate(vm.timeArr[0]); _Set('lastTop', _Get('scrollTop')) } else if (vm.timeArr.length == 2) { // 拼接选择日期值 createVal(vm.timeArr) // 判断如果超出可选范围，就提示重新选择 if (CompareDate(vm.maxDate, vm.timeArr[1])) { // 清除选中的日期，只保留第一个选择值，currentChose存第一次选择的值，让timeArr的值和本地存储的值都变成第一个选中的值 window.scrollTo(0, _Get('lastTop')); Utils.getElement('.calendar__dialog').style.display = 'block' vm.timeArr = []; checkClass('l-border'); checkClass('r-border'); checkClass('cover-background'); var data = _Get('currentChose')[0]; vm.timeArr.push(data) _Set('currentChose', data.split()); _Set('choseValue', data.split()[0]); target.classList.remove('active') setTimeout(function () { Utils.getElement('.calendar__dialog').style.display = 'none' }, 2000); } } else { confirmBtn.classList.add('cover_back') } } // 点击确定按钮，需清楚选中的日期值 confirmBtn.onclick = function (e) { if (!e.target.classList.contains('cover_back')) return; handelClass(undefined, vm.timeArr); console.log(vm.timeArr) } } } } getCurrnetTime(); function setDisabled() { let endDate = calcDate(vm.timeArr[0]); // leftDom表示结束日期，之后所有的dom 只是当前6个月可以选择，超出范围不能选择； // 计算出当前日期和endDate的区间 let canChose = getAll(vm.timeArr[0], endDate); let itemDay = document.querySelectorAll('.month .dateItem'); for (let i = 0, len = itemDay.length; i < len; i++) { let every = itemDay[i].getAttribute('data-current'), ele = itemDay[i]; if (canChose.indexOf(every) < 0) { ele.classList.add('disabled') ele.setAttribute('data-disabled', true) } else { ele.classList.remove('disabled') ele.setAttribute('data-disabled', false) } } } // 拼接选中日期值 function createVal(arr) { // 如果不跨年，就不显示年份 if (arr.length === 1) { let finalArr = arr[0]; _Set('choseValue', finalArr); _Set('currentChose', vm.timeArr); } else if (arr.length === 2) { // 拼接选择日期值["2018-12-26","2019-02-26"] let containValue = arr[0] + '至' + arr[1]; _Set('choseValue', containValue); _Set('currentChose', vm.timeArr); } } // 检测是否含有某个class function checkClass(str) { let itemDay = document.querySelectorAll('.dateItem'); for (let i = 0; i < itemDay.length; i++) { let item = itemDay[i]; if (item.classList.contains(str) == true) { item.classList.remove(str); } } } // 给选中范围内的日期加class function handelClass(arr, choseArr) { let itemDay = document.querySelectorAll('.dateItem'); for (let i = 0; i < itemDay.length; i++) { if (arr) { let item = itemDay[i].getAttribute('data-current'); if (arr.indexOf(item) > -1) { itemDay[i].classList.add('cover-background'); } } if (choseArr) { if (choseArr.length == 1 || !choseArr.length) { itemDay[i].classList.remove('cover-background'); } } } } // 处理选中两个日期后圆角问题 function handelFinalBox(fValue, eValue, itemArr) { let itemDay = document.querySelectorAll('.dateItem'); for (let i = 0; i < itemDay.length; i++) { let item = itemDay[i].getAttribute('data-current'); // 如果选择两个 if (itemArr.length > 1) { if (item === fValue && itemArr.length > 1) { itemDay[i].classList.add('l-border'); } if (item === eValue && itemArr.length > 1) { itemDay[i].classList.add('r-border'); } } else { itemDay[i].classList.remove('l-border'); itemDay[i].classList.remove('r-border'); } } } // init页面时候，处理添加active和cover-backgoround类名 function checkActive() { let doc = document, itemDay = doc.querySelectorAll('.month .dateItem'), item; if (_Get('currentChose')) { let currentChose = _Get('currentChose'); let arrLi = doc.querySelectorAll('.month .dateItem'); Array.prototype.forEach.call(arrLi, function (ele) { let curr = ele.getAttribute('data-current'); if (currentChose.length === 1) { // 选择单个日期的情况 if (curr === currentChose[0]) { ele.classList.add('active') } } else if (currentChose.length === 2) { let scopeValue = getAll(currentChose[0], currentChose[1]); // 如果是选中范围的情况 if (scopeValue.indexOf(curr) > -1) { ele.classList.add('cover-background'); // 如果选择两个 if (currentChose.length > 1) { if (curr === currentChose[0] && currentChose.length > 1) { ele.classList.add('l-border'); } if (curr === currentChose[1] && currentChose.length > 1) { ele.classList.add('r-border'); } } else { ele.classList.remove('l-border'); ele.classList.remove('r-border'); } } } }) } } </script></body></html>base.css
html, body { width: 100%; height: 100%; } #app { width: 100%; height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } input, select, textarea { font-size: 100%; } th { text-align: inherit; } a img, fieldset, img { border: 0; } ol, ul { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; } a:hover { text-decoration: underline; } a, ins { text-decoration: none; } * { margin: 0; padding: 0; box-sizing: border-box; } ::-webkit-input-placeholder { color: #939799; } :-moz-placeholder { color: #939799; } ::-moz-placeholder { color: #939799; } input::-ms-clear, input::-ms-reveal { display: none; } @media screen and (max-width: 1024px) { #app { width: auto; height: auto; } .continer { position: relative !important; width: 100%; height: 100% !important; display: flex; justify-content: center; padding-top: 70px !important; padding-bottom: 170px; } } @media screen and (min-width: 1025px) { #app { width: 100% !important; height: 100% !important; } } calnder.css
.header-top { position: fixed; top: 0; left: 0; background: #fff; width: 100%; z-index: 999; } .header-top .control-box { width: 100%; height: 1.6rem; font-size: 0.42667rem; font-weight: 400; color: #363c54; padding: 0.53333rem 0.8rem 0.53333rem 0.66667rem; display: flex; justify-content: space-between; align-items: center; } .header-top .control-box span:nth-child(2) { display: inline-block; width: 0.53333rem; height: 0.53333rem; /* background: url("../static/images/close.png") no-repeat center; */ background-size: cover; } .header-top .pushUp { animation: moveDown .5s alternate; -webkit-animation: moveDown .5s alternate; -moz-animation: moveDown .5s alternate; -o-animation: moveDown .5s alternate; -ms-animation: moveDown .5s alternate; } .header-top .pushDown { animation: moveUp .5s alternate; -webkit-animation: moveUp .5s alternate; -moz-animation: moveUp .5s alternate; -o-animation: moveUp .5s alternate; -ms-animation: moveUp .5s alternate; } @keyframes moveUp { 0% { transform: translateY(-0.8rem); } 50% { transform: translateY(0.53333rem); } 100% { transform: translateY(0); } } @keyframes moveDown { 0% { transform: translateY(-0.8rem); } 50% { } 100% { transform: translateY(0); } } .header-top #week-item { width: 90%; height: 1.06667rem; list-style: none; display: flex; text-align: center; justify-content: space-around; align-items: center; margin: 0 auto; position: relative; background: #fff; z-index: 10; padding-right: 0.34667rem; } .header-top #week-item::after { background-color: #f0f1f2; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; transform-origin: 0 0; } .header-top #week-item li { font-size: 0.37333rem; font-weight: 400; color: #363c54; } .header-top .current-time { width: 100%; text-align: center; font-size: 0.37333rem; font-weight: 400; color: #9b9da9; background: #fff; } .header-top .current-time #current-time { height: 1.04rem; line-height: 1.04rem; text-align: center; font-size: 0.37333rem; font-weight: 400; color: #9b9da9; border: none; background: #fff; transition: .3s all; border-color: transparent; -webkit-appearance: none; } .main { width: 100%; height: 100%; } .main .current-month { width: 90%; height: 1.06667rem; line-height: 1.06667rem; font-size: 0.37333rem; font-weight: 400; text-align: center; margin: 0.13333rem auto; color: #9b9da9; position: relative; } .main .current-month::before { background-color: #f0f1f2; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform-origin: 0 0; } .main .l-border { border-radius: 50% 0 0 50% !important; } .main .r-border { border-radius: 0 50% 50% 0 !important; } .main .calendar__dialog{ display: none; width: 7.73333rem; height: 1.73333rem; line-height: 1.73333rem; background: rgba(0, 0, 0, 0.8); border-radius: 0.13333rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 0.42667rem; font-weight: 400; color: white; z-index: 999; } .mode-one { width: 100%; align-content: space-between; margin-top: 2.93333rem; background: #fff; padding-bottom: 2rem; } .mode-one .month { position: relative; color: #141414; width: 100%; padding: 0 0.64rem 0 0.72rem; } .mode-one .month .after-dom { width: 100%; height: 1rem; position: absolute; left: 0; bottom: 0; z-index: 10; } .mode-one .dateItem { cursor: pointer; } .mode-one .disabled { color: #cdced4 !important; } .mode-one .cover-background { background: #20c997; } .mode-one .month .item { display: inline-block; width: 1.2rem; height: 1.2rem; font-size: 0.37333rem; line-height: 1.2rem; font-weight: 400; text-align: center; vertical-align: middle; position: relative; color: #363C54; margin: 0.12rem 0; z-index: 11; } .mode-one .now::after { background-color: #20c997; content: ""; position: absolute; left: 50%; margin-left: -1.5px; bottom: 3px; width: 3px; height: 3px; border-radius: 50%; transform-origin: 0 0; } .mode-one .month .active { background: #20c997; border-radius: 50%; } .calendar-content { width: 100%; height: 100%; overflow: scroll; } .calendar__box { width: 100%; height: 100%; z-index: 998; } .footer-box { width: 100%; height: 2rem; background: white; position: fixed; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; -webkit-transform: translateZ(0); margin-top: 2rem; z-index: 12; } .footer-box div { width: 8.66667rem; height: 1.2rem; line-height: 1.2rem; background: #CDCED4; border-radius: 0.6rem; text-align: center; font-size: 0.42667rem; font-weight: 400; color: white; } .cover_back { background: #20c997 !important; } .hideCalendar { transition: .3 all; transform: translateX(-100%, 0) !important; } resize.js
; (function () { resize() window.onresize = resize;})() function resize () { if (document.documentElement.clientWidth >= 750) { document.documentElement.style.fontSize = '75px'; return } document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'}utils.js
let Utils = { getElement(selector) { return document.querySelector(selector); }, getAllElement(selector) { return document.querySelectorAll(selector); }, timePad(time) { return time < 10 ? '0' + time : time; }}function daysInMonth(month, year) { return new Date(year, month + 1, 0).getDate();}function _Set(data_id, data) { if (data_id != "") { if (data) { var lsobj = window.localStorage; var datajson = JSON.stringify(data); lsobj.setItem(data_id, datajson); } }}function _Get(data_id) { if (data_id != "") { var data = null; var lsdata = window.localStorage; try { var datajson = lsdata.getItem(data_id); datajson = JSON.parse(datajson); data = datajson; } catch (e) { } finally { return data; } }}let scrollAction = { x: 'undefined', y: 'undefined'},scrollDirection;// 判断页面滚动方向function scrollFunc() {if (typeof scrollAction.x == 'undefined') { scrollAction.x = window.pageXOffset; scrollAction.y = window.pageYOffset;}let diffX = scrollAction.x - window.pageXOffset;let diffY = scrollAction.y - window.pageYOffset;if (diffX < 0) { // Scroll right scrollDirection = 'right';} else if (diffX > 0) { // Scroll left scrollDirection = 'left';} else if (diffY < 0) { // Scroll down scrollDirection = 'down';} else if (diffY > 0) { // Scroll up scrollDirection = 'up';} else { // First scroll event}scrollAction.x = window.pageXOffset;scrollAction.y = window.pageYOffset;};// 检测两个div是否重叠function collision(target, current) { let targetX = target.offsetLeft; let targetY = target.offsetTop; let targetW = target.offsetWidth; let targetH = target.offsetHeight; let currentX = current.offsetLeft; let currentY = current.getBoundingClientRect().top; let currentW = current.offsetWidth; let currentH = current.offsetHeight; return (targetX + targetW > currentX && targetX < currentX + currentW && targetY + targetH > currentY && targetY < currentY + currentH);}// 计算当前选择日期往后推6个月function calcDate(str) { str = str.replace(/-/g, '/'); let date = new Date(str); //日期转文本方式一： let year = date.getFullYear(); //年 let month = date.getMonth() + 7; //月 +6个月 因为js里month从0开始，所以要加1 if (month > 12) { year++; month -= 12; } let date2 = new Date(year, month, 0); //新的年月 let day1 = date.getDate(); let day2 = date2.getDate(); if (day1 > day2) { //防止+6月后没有31天 day1 = day2; } str = year + '-' + Utils.timePad(month) + '-' + Utils.timePad(day1); return str;}// 获取两个日期之间的值Date.prototype.format = function () { let s = ''; let mouth = (this.getMonth() + 1) >= 10 ? (this.getMonth() + 1) : ('0' + (this.getMonth() + 1)); let day = this.getDate() >= 10 ? this.getDate() : ('0' + this.getDate()); s += this.getFullYear() + '-'; // 获取年份。 s += mouth + "-"; // 获取月份。 s += day; // 获取日。 return (s); // 返回日期。};// 获取两个日期之间的值function getAll(begin, end) { let arr = []; let ab = begin.split("-"); let ae = end.split("-"); let db = new Date(); db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]); let de = new Date(); de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]); let unixDb = db.getTime() - 24 * 60 * 60 * 1000; let unixDe = de.getTime() - 24 * 60 * 60 * 1000; for (let k = unixDb; k <= unixDe;) { //console.log((new Date(parseInt(k))).format()); k = k + 24 * 60 * 60 * 1000; arr.push((new Date(parseInt(k))).format()); } return arr;}// 比较两个日期大小function CompareDate(d1, d2) { return ((new Date(d1.replace(/-/g, "\/"))) < (new Date(d2.replace(/-/g, "\/"))));}function getPhoneType() { //正则,忽略大小写 var pattern_phone = new RegExp("iphone", "i"); var pattern_android = new RegExp("Android", "i"); var userAgent = navigator.userAgent.toLowerCase(); var isAndroid = pattern_android.test(userAgent); var isIphone = pattern_phone.test(userAgent); var phoneType = "phoneType"; if (isAndroid) { var zh_cnIndex = userAgent.indexOf("-"); var spaceIndex = userAgent.indexOf("build", zh_cnIndex + 4); var fullResult = userAgent.substring(zh_cnIndex, spaceIndex); phoneType = fullResult.split(";")[1]; } else if (isIphone) { //6 w=375 6plus w=414 5s w=320 5 w=320 var wigth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; if (wigth > 400) { phoneType = "iphone6 plus"; } else if (wigth > 370) { phoneType = "iphone6"; } else if (wigth > 315) { phoneType = "iphone5s"; } else { phoneType = "iphone 4s"; } } else { phoneType = "您的设备太先进了"; } return phoneType;}function isIphonex() { if (typeof window !== 'undefined' && window) { return /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812; } return false;}end ···
代码有待优化，日后再说吧