移动端旅游报价日历插件

首先声明，此插件为我同事所写，所以此篇博客为转载类型，但因没有选择转载类型时需要的链接，才选择原创类型，如有同行需要请标明出处：（作者：lus）
预览效果：

此插件当 arrayJSON 为空时，加载的月份为当前月，月份个数由 index 控制。

HTML：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><meta name="format-detection" content="telephone=no,email=no,date=no,address=no"><link rel="stylesheet" href="common.css"><style>/* 没有 common.css 文件，添加以下注释 css*//*html {font-size:62.5%;}body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}.fs10 {font-size:1.0rem;}*/.ZYCalender .dateZone{width: 100%;margin: auto;background: #f5f5f5;color:#666;position: -webkit-sticky;position: sticky;top: 0;z-index: 999;}.ZYCalender .tbody{background: #f3f3f3;padding-bottom: 4.5rem;}.ZYCalender .tbody td{background: #fff;text-align: center;height: 4.4rem;font-size: 1.4rem;color: #666;width: 14.2%;border: 2px solid #fff;}.ZYCalender .tbody td .con{height: 4.4rem;font-size: 1.4rem;}.ZYCalender .tbody td p{line-height: 14px;}.ZYCalender .tbody .sel{background: #cab970;border-radius: 5px;}.ZYCalender .tbody tr{vertical-align: top;}.ZYCalender .dateZone td{background: #f5f5f5;width: 14.2%;font-size: 1.4rem;text-align: center;height: 45px;}.ZYCalender .dateZone .colo{color: #ffd101;}.ZYCalender .dateTable{width: 100%;margin: auto;}.ZYCalender .tbody .itemMonth{margin-bottom: 10px;background: #fff;padding: 10px 5px;}.ZYCalender .tbody .month{width: 100%;text-align: center;padding: 8px 0;font-size: 1.6rem;}.ZYCalender .hover{font-size: 1.2rem;display: inline-block;width: 60%;background: #ffd101;color: #ba0003;text-align: center;border-radius: 5px;}.confirm{width: 100%;height: 4.0rem;background: #eb8300;position: fixed;bottom: 0;z-index: 999;text-align: center;font-size: 1.8rem;color: #fff;line-height: 4.0rem;}</style>
</head>
<body><div class="ZYCalender"></div><div class="confirm">提交</div>
</body>
<script src="calender.js"></script>
<script>var arrayJSON = [{id: '0',date: '2017-12-29',price: '￥ 123',number: '>9人'},{id: '1',date: '2017-12-30',price: '￥ 123',number: '>9人'},{id: '2',date: '2017-12-31',price: '￥ 123',number: '>9人'},{id: '3',date: '2018-02-01',price: '￥ 123',number: '>9人'},{id: '4',date: '2018-02-02',price: '￥ 123',number: '>9人'},{id: '5',date: '2018-02-03',price: '￥ 123',number: '>9人'},{id: '6',date: '2018-02-04',price: '￥ 123',number: '>9人'},{id: '7',date: '2018-02-05',price: '￥ 123',number: '>9人'},{id: '8',date: '2018-02-06',price: '￥ 123',number: '>9人'},{id: '9',date: '2018-02-07',price: '￥ 123',number: '>9人'},{id: '10',date: '2018-02-08',price: '￥ 123',number: '>9人'},{id: '11',date: '2018-02-09',price: '￥ 123',number: '>9人'}];new ZYCalender({element: document.querySelector('.ZYCalender'),color: '#fff',arrayJSON: arrayJSON,confirmBtn: document.querySelector('.confirm'),callback: function (e) {console.log(e)}})
</script>
</html>

JS:

/**   by lus*   luszy.com* */
(function (window, undefined) {"use strict";var ZYCalender = function(params){this.extend(this.params, params);this.init();};ZYCalender.prototype = {params: {element: false,index : 4,                   // 展示的月份个数bgColor : "#f5f5f5",         // 开始结束中间颜色color: '#ffd101',            // 选中的文字颜色arrayJSON: '',confirmBtn: '',callback: function () { }},init: function () {var self = this,ii,tHTML,currentYear,currentMonth,setCurrentDate,firstDay,month,DaysInMonth = [],Ntd,Ntr,createTd,anyTd,p;self.element = this.params.element;self.index = this.params.index;self.confirm = this.params.confirmBtn;self.arrayJSON = this.params.arrayJSON;self.dayDate = [];self.dayDateWeek = [];if(!this.params.element || this.params.element.nodeType !== 1) return;var html = "<table class='dateZone border-b' data-fixed=''>" +"<tr>" +"<td class='colo'>日</td>" +"<td>一</td>" +"<td>二</td>" +"<td>三</td>" +"<td>四</td>" +"<td>五</td>" +"<td class='colo'>六</td>" +"</tr>" +"</table>" +"<div class='tbody'></div>";self.element.innerHTML = html;if(self.arrayJSON){var arr = [], index;self.arrayJSON.forEach(function (element, index) {arr.push(element.date.substring(0, element.date.length - 3));});index = self.removeRepeatArray(arr);for(var i = 0; i < index.length; i++){ii = i;tHTML = "<div class='itemMonth border-b'>" +"<p class='month'></p>" +"<table class='table' style='width: 100%;position: relative'>" +"<tbody class='dateTable'></tbody>" +"</table>" +"</div>";self.element.querySelector('.tbody').insertAdjacentHTML('beforeEnd', tHTML);currentYear = index[ii].substring(0, 4);currentMonth = index[ii].substring(5, 7);setCurrentDate = new Date(currentYear, currentMonth - 1, 1);firstDay = setCurrentDate.getDay();self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + currentMonth + '月';if (self.isLeapYear(currentYear)) {DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];} else {DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];}Ntd = firstDay + DaysInMonth[currentMonth - 1];Ntr = Math.ceil(Ntd / 7);for (var j = 0; j < Ntr; j++) {self.element.querySelectorAll('.dateTable')[ii].insertAdjacentHTML('beforeEnd', '<tr></tr>');}createTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('tr');createTd.forEach(function(element, index) {for (var m = 0; m < 7; m++) {element.insertAdjacentHTML('beforeEnd', '<td></td>')}});anyTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('td');for (var n = 0; n < DaysInMonth[currentMonth - 1]; n++) {p = firstDay++;anyTd[p].innerHTML = '<div class="con">'+ (n + 1) +'</div>';self.arrayJSON.forEach(function (element) {if(currentMonth === element.date.substring(5, 7) &&currentYear === element.date.substring(0, 4) &&n + 1 === parseInt(element.date.substring(8, 10))){anyTd[p].querySelector('.con').insertAdjacentHTML('beforeEnd', '<p class="fs10" data-id="'+ element.id +'" data-price="'+ element.price +'">' + '<span>' + element.price + '</span>'+ '<br>' + '<span>' + element.number+ '</span>' + '</p>');anyTd[p].querySelector('.con').classList.add('border')}});}}} else {for(var i = 0; i < self.index; i++){ii = i;tHTML = "<div class='itemMonth  border-b'>" +"<p class='month'></p>" +"<table class='table' style='width: 100%;position: relative'>" +"<tbody class='dateTable'></tbody>" +"</table>" +"</div>";self.element.querySelector('.tbody').insertAdjacentHTML('beforeEnd', tHTML);var currentDate = new Date();currentDate.setMonth(currentDate.getMonth() + ii);currentYear = currentDate.getFullYear();currentMonth = currentDate.getMonth();setCurrentDate = new Date(currentYear, currentMonth, 1);firstDay = setCurrentDate.getDay();month = currentMonth + 1;if (month < 10) {self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + '0' + month + '月';} else {self.element.querySelectorAll('.month')[ii].innerHTML = currentYear + '年' + month + '月';}if (self.isLeapYear(currentYear)) {DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];} else {DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];}Ntd = firstDay + DaysInMonth[currentMonth];Ntr = Math.ceil(Ntd / 7);for (var j = 0; j < Ntr; j++) {self.element.querySelectorAll('.dateTable')[ii].insertAdjacentHTML('beforeEnd', '<tr></tr>');}createTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('tr');createTd.forEach(function(element, index) {for (var m = 0; m < 7; m++) {element.insertAdjacentHTML('beforeEnd', '<td></td>')}});anyTd = self.element.querySelectorAll('.dateTable')[ii].querySelectorAll('td');for (var n = 0; n < DaysInMonth[currentMonth]; n++) {anyTd[firstDay++].innerText = (n + 1);}}}self.initSelect();self.addEvent(self.confirm, 'click', function (event) {event.preventDefault();self.date = '';self.price = '';self.id = '';self.day = [];var sels = self.element.querySelectorAll('.sel');for(var u = 0; u < sels.length; u++){var id = sels[u].querySelector('p') ? sels[u].querySelector('p').getAttribute('data-id') : '';var day = sels[u].innerText.substring(0, 2) < 10 ? '0' + sels[u].innerText.substring(0, 2) : sels[u].innerText.substring(0, 2);var startDayArrays = sels[u].offsetParent.previousSibling.innerText.split('');var startDayArrayYear = [],startDayArrayMonth = [],startDayYear = "",startDayMonth = "",date = '',price = '';for (var g = 0; g < 4; g++) {startDayArrayYear.push(startDayArrays[g])}startDayYear = startDayArrayYear.join('');for (var f = 5; f < 7; f++) {startDayArrayMonth.push(startDayArrays[f])}startDayMonth = startDayArrayMonth.join('');date = startDayYear + '-' + startDayMonth + '-' + day;price = sels[u].querySelector('p') ? sels[u].querySelector('p').getAttribute('data-price') : '';if(!self.arrayJSON){self.day.push(date);} else {self.price = price;self.date = date;self.id = id;}}if(!self.arrayJSON) {if (!self.day)  return;} else {if (!self.date)  return;}self.callback();});},initSelect: function () {var self = this;var strDays = new Date().getDate();var arry = [];var arry1 = [];self.element.querySelector('.tbody').querySelectorAll('td').forEach(function(element, index) {if (element.innerText !== '') {arry.push(element);}});if(!self.arrayJSON){for (var i = 0; i < strDays - 1; i++) {arry[i].style.color = '#ccc';}for (var i = strDays - 1; i < arry.length; i++) {arry1.push(arry[i])}self.selectDate(arry1)} else {self.selectDate(arry)}},isLeapYear: function(year) {return (year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0);},selectDate: function(arry1) {var self = this;self.bgColor = self.params.bgColor;self.color = self.params.color;self.element = self.params.element;for(var i = 0; i < arry1.length; i++){(function(j){arry1[j].onclick = function () {if(self.arrayJSON){arry1.forEach(function (element, index) {element.classList.remove('sel');element.style.color = '';});arry1[j].classList.add('sel');arry1[j].style.color = self.color;} else {if(arry1[j].classList.contains('sel')){arry1[j].style.background = '';arry1[j].style.color = '';arry1[j].classList.remove('sel');} else {arry1[j].setAttribute('data-type', 'start');arry1[j].classList.add('sel');}self.checkColor(self.color, self.bgColor);}}})(i)}},callback: function() {var self = this;if (self.params.callback && typeof (self.params.callback) === "function") {self.params.callback({date: self.date || '',price: self.price || '',id: self.id  || '',day: self.day || ''});}},checkColor: function(color, bgColor) {var self = this;var sel = self.element.querySelectorAll('.sel');for (var i = 0; i < sel.length; i++) {sel[i].style.background = bgColor;sel[i].style.color = color;}},removeRepeatArray: function (arr) {return arr.filter(function (item, index, self) {return self.indexOf(item) === index;});},addEvent: function (elm, type, fn) {if (window.attachEvent) {elm.attachEvent("on" + type, fn)} else if (window.addEventListener) {elm.addEventListener(type, fn, false);} else {elm["on" + type] = fn;}},extend: function (a, b) {for (var key in b) {if (b.hasOwnProperty(key)) {a[key] = b[key];}}return a;}};window.ZYCalender = ZYCalender;
})(window);

CSS

@charset "UTF-8";
/*20151010*//*cssreset*/
html,body {height:100%; line-height:1.5; color:#333;background:#fff; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-text-size-adjust:none; -moz-user-select:none; -webkit-font-smoothing:antialiased;}
html {font-size:62.5%;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}
body,button,input,select,textarea,li,dt,dd,div,td,p,span {font-size:1.2rem; font-family:Microsoft Yahei,arial,verdana;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display:block;}
audio,canvas,progress,video {display:inline-block; vertical-align:baseline;}
audio:not([controls]) {display:none; height:0;}
[hidden],template {display:none;}
svg:not(:root) {overflow:hidden;}
h1,h2,h3,h4,h5,h6 {font-size:1.4rem; font-weight:normal; font-family:Microsoft Yahei,arial,verdana;}
address,cite,dfn,em,var {font-style:normal;}
code,kbd,pre,samp {font-family:courier new,courier,monospace;}
ul,ol {list-style:none outside none;}
span {font-size:100%;}
a {color:#333; text-decoration:none;}
a:hover {text-decoration:none;}
a:active {color:#21adc2; outline:0;}
a:focus {outline:0;}
legend {color:#666;}
fieldset,img {border:0 none;}
img {vertical-align:bottom;}
button,input,select,textarea {margin:0; padding:0; outline:none; line-height:1.8rem;-webkit-appearance:none;}
button {cursor:pointer;}
input[type="radio"],input[type="checkbox"] {position:relative; top:2px;}
table {border-collapse:collapse; border-spacing:0;}
* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}/*scroll-bar*/
.myScrollbarV {position:absolute; top:2px; right:1px; bottom:2px; z-index:100; width:3px;}
.myScrollbarV>div {position:absolute; z-index:100; width:100%; background:#ccc;}/*color*/
.c777 {color:#777;}
.c666 {color:#666;}
.c333 {color:#333;}
.c555 {color:#555;}
.c999 {color:#999;}
.cccc {color:#ccc;}
.cfff {color:#fff;}
.cff8d00{color:#ff8d00}
.c8d8d8d{color:#8d8d8d}
.cea8300{color:#ea8300}
.cba0003{color:#ba0003}
.c75a207{color:#75a207}
.cef4900{color:#ef4900}
.cf39800{color:#f39800}
.cfc5105{color:#fc5105}
.cf46f72{color:#f46f72}
.cff4040{color:#ff4040}.cca8f8f{color:#ca8f8f}
.c179cff{color:#179cff}
.c38bafe{color:#38bafe}/*link-color*/
a.c666 {color:#666;}
a.c666:hover {color:#06c;}/*font*/
.fs08 {font-size:0.8rem;}
.fs10 {font-size:1.0rem;}
.fs11 {font-size:1.1rem;}
.fs12 {font-size:1.2rem;}
.fs13 {font-size:1.3rem;}
.fs14 {font-size:1.4rem;}
.fs15 {font-size:1.5rem;}
.fs16 {font-size:1.6rem;}
.fs17 {font-size:1.7rem;}
.fs18 {font-size:1.8rem;}
.fs19 {font-size:1.9rem;}
.fs20 {font-size:2.0rem;}
.fs21 {font-size:2.1rem;}
.fs22 {font-size:2.2rem;}
.fs23 {font-size:2.3rem;}
.fs24 {font-size:2.4rem;}
.fs26 {font-size:2.6rem;}
.fs28 {font-size:2.8rem;}
.fs30 {font-size:3.0rem;}
.fs32 {font-size:3.2rem;}
.fs34 {font-size:3.4rem;}
.fs30 {font-size: 3.0rem}
.fs35 {font-size: 3.5rem}
.fs36 {font-size: 3.6rem}
.fs38 {font-size: 3.8rem}
.fs40 {font-size: 4.0rem}
.fs45 {font-size: 4.5rem}
.fs50 {font-size: 5.0rem}
.ffy {font-family:tahoma,arial,sans-serif;}
.fb {font-weight: bold;}
.letterSpace {letter-spacing: 1px;}/*control*/
.input {height:18px; line-height:18px; padding:3px 5px; border:1px solid #ddd;}
.select {padding:2px; border:1px solid #ddd;}
.textarea {padding:8px; color:#666; width: 100%; height: 70px;}/*ellipsis*/
.ellipsis {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.ellipsis2 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.ellipsis3 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }/*overflow*/
.ofvisible {overflow:visible;}/*cover-background*/
.coverbg {position:absolute; top:0; left:0; z-index:9998; background:#000; filter:alpha(opacity=50); opacity:0.5;}/*float*/
.fl {float:left;}
.fr {float:right;}/*margin-padding*/
.mt5 {margin-top:5px;}
.mr5 {margin-right:5px;}
.ml5 {margin-left:5px;}
.mt8 {margin-top:8px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt23 {margin-top:23px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}
.mt35 {margin-top:35px;}
.mt40 {margin-top:40px;}
.mr6 {margin-right:6px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.mg {margin: 0 auto; }
.mgl {margin: 0 10px; }
.pd {padding:10px;}
.pl5 {padding:5px;}
.pl {padding:0 10px 0 0;}
.pr {padding:10px 0 10px 10px;}
.pr2 {padding:10px 20px 10px 10px;}
.pdl {padding:0 10px;}
.pd15 {padding:0 15px;}
.pdl2 {padding:0 20px 0 10px;}
.pdr {padding:10px 0;}
.pdr8 {padding:8px 0;}
.pt2 {padding-top:2px;}
.pt5 {padding-top:5px;}
.pt6 {padding-top:6px;}
.pt8 {padding-top:8px;}
.pt9 {padding-top:9px;}
.pt10 {padding-top:10px;}
.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pb5 {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}/*background-color*/
.bgd4d4d4 {background-color: #d4d4d4}
.bgffffff {background-color: #FFFFFF}
.bgf1f1f1 {background-color: #f1f1f1}
.bgf5f5f5 {background-color: #f5f5f5}
.bgf8f8f8 {background-color: #f8f8f8}
.bgf3f5f6 {background-color: #f3f5f6}
.bg5d5d5d {background-color: #5d5d5d}
.bgfff1d6 {background-color: #fff1d6}
.bgffd101 {background-color: #ffd101}
.bgeb8300 {background-color: #eb8300}
.bg000000 {background-color: #000000}
/*text-alignment*/
.txtl {text-align:left;}
.txtc {text-align:center;}
.txtr {text-align:right;}
.txtj {text-align:justify; text-justify:distribute-all-lines; text-align-last:justify; text-indent:25px;}
/*top-bottom*/
.t44 {top:44px;}
.b50 {bottom:50px;}/*clearfix*/
.clearfix:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
.clearfix {zoom:1;}/*layout*/
.name_layout {position:absolute; top:0; right:0; bottom:0; left:0;}
.name_scroller {position:relative; width:100%;}/*button*/
.name_btn {}/*header*/
.name_header {}/*footer*/
.name_footer {}/* 弹性盒子属性 --横向*/
.rowBox{ display:-webkit-box; display:-webkit-flex; -webkit-flex:row;}
.rowCon{ -webkit-box-flex: 1;-webkit-flex: 1;flex: 1; }
/* 弹性盒子属性 --竖向*/
.verBox{ display:-webkit-flex; -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}.hidden{display : none;}.loading_more{display: block;height: 2.0em;width: 100%;text-align: center;
}
.loading_more:before {display: inline-block; vertical-align: text-bottom;content: ' ';height: 16px;width: 16px;margin-right: 6px;background: url(../image/loading_more.gif) no-repeat center;-webkit-background-size: contain;background-size: contain;
}
.loading_more:after {content: '加载更多';
}/*边框样式*/
.border-t,.border-b,.border-l,.border-r,.border-tb,.border,.border-radius {position: relative;
}
.border-l:before,.border-r:after {width: 1px;height: 100%;background-color: #dddddd;display: block;content: '';position: absolute;z-index: 2;top: 0;bottom: auto;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;pointer-events: none;
}
.border-t:before,.border-b:after {width: 100%;height: 1px;background-color: #dddddd;display: block;content: '';position: absolute;z-index: 2;left: 0;right: auto;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;pointer-events: none;
}
.border-l:before {right: auto;left: 0;
}
.border-r:after {right: 0;left: auto;
}
.border-t:before {bottom: auto;top: 0;
}
.border-b:after {bottom: 0;top: auto;
}
.border:after {display: block;content: '';position: absolute;top: 0;bottom: auto;left: 0;right: auto;-webkit-transform-origin: 0 0;-webkit-transform: scale(1);pointer-events: none;border: 1px solid #dddddd;border-radius: 5px;
}
.border-radius:after {display: block;content: '';position: absolute;top: 0;bottom: auto;left: 0;right: auto;-webkit-transform-origin: 0 0;-webkit-transform: scale(1);pointer-events: none;border: 1px solid #dddddd;border-radius: 50%;
}
@media screen and (-webkit-min-device-pixel-ratio:1.5) {.border:after,.border-radius:after {right: -100%;bottom: -100%;-webkit-transform: scale(0.5);}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {.border-r:after,.border-l:before  {-webkit-transform: scaleX(1);transform: scaleX(1);}.border-t:before,.border-b:after  {-webkit-transform: scaleY(1);transform: scaleY(1);}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {.border-r:after,.border-l:before {-webkit-transform: scaleX(0.5);transform: scaleX(0.5);}.border-t:before,.border-b:after  {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {.border-r:after,.border-l:before {-webkit-transform: scaleX(0.333);transform: scaleX(0.333);}.border-t:before,.border-b:after  {-webkit-transform: scaleY(0.333);transform: scaleY(0.333);}
}
/*单选、多选、开关*/
.radio,
.checkbox {width: 1.8rem;height: 1.8rem;background-color: #f1f1f1;border: solid 1px #f1f1f1;-webkit-border-radius: 0.6rem;border-radius: 0.6rem;font-size: 0.8rem;margin: 0;padding: 0;position: relative;display: inline-block;vertical-align: top;cursor: default;-webkit-appearance: none;-webkit-user-select: none;user-select: none;-webkit-transition: background-color ease 0.2s;transition: background-color ease 0.2s;
}
.checkbox {border-radius: 0.1rem;
}
.radio:checked,
.radio.checked,
.checkbox:checked,
.checkbox.checked {background-color: #ffd101;border: solid 1px #ffd101;text-align: center;background-clip: padding-box;
}
.radio:checked:before,
.radio.checked:before,
.checkbox:checked:before,
.checkbox.checked:before,
.radio:checked:after,
.radio.checked:after,
.checkbox:checked:after,
.checkbox.checked:after {content: '';width: 0.6rem;height: 0.4rem;position: absolute;top: 50%;left: 50%;margin-left: -0.33rem;margin-top: -0.33rem;background: transparent;border: 1px solid #ffffff;border-top: none;border-right: none;z-index: 2;-webkit-border-radius: 0;border-radius: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.radio:disabled,
.radio.disabled,
.checkbox:disabled,
.checkbox.disabled {background-color: #dddddd;border: solid 1px #dddddd;
}
.radio:disabled:before,
.radio.disabled:before,
.radio:disabled:after,
.radio.disabled:after,
.checkbox:disabled:before,
.checkbox.disabled:before,
.checkbox:disabled:after,
.checkbox.disabled:after {content: '';width: 0.5rem;height: 0.3rem;position: absolute;top: 50%;left: 50%;margin-left: -0.25rem;margin-top: -0.25rem;background: transparent;border: 1px solid #ffffff;border-top: none;border-right: none;z-index: 2;-webkit-border-radius: 0;border-radius: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.switch {width: 4.0rem;height: 2.4rem;position: relative;vertical-align: top;border: 1px solid #f3f3f3;background-color: #f3f3f3;border-radius: 2.3rem;background-clip: content-box;display: inline-block;outline: none;-webkit-appearance: none;appearance: none;-webkit-user-select: none;user-select: none;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-background-clip: padding-box;background-clip: padding-box;-webkit-transition: all 0.2s linear;transition: all 0.2s linear;
}
.switch:before {width: 2.4rem;height: 2.2rem;position: absolute;top: 0;left: 0;border-radius: 50%;background-color: #fff;content: '';-webkit-transition: left 0.2s;transition: left 0.2s;
}
.switch:checked {border-color: #ffd101;background-color: #ffd101;
}
.switch:checked:before {left: 1.4rem;
}/* 添加遮罩 */
.mask {position: fixed;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0, 0, 0, 0.3);opacity: 0;z-index: 8;visibility: hidden;-webkit-transition-duration: 300ms;transition-duration: 300ms;
}
.mask.mask-in {visibility: visible;opacity: 1;
}
.mask.mask-out {opacity: 0;
}
/*栅格类*/
.row {overflow: hidden;margin: 0;
}
.row-padded {margin-left: -0.125rem;margin-right: -0.125rem;
}
.row-padded [class*=aui-col-xs-] {padding: 0.125rem;
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-5 {position: relative;float: left;
}
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; }
.col-xs-1 { width: 8.33333333%; }
.col-5 { width: 20%; }

移动端旅游报价日历插件相关推荐

移动端日历插件_小程序日历组件开发教程！
微信小程序是我们生活中很常用的工具,在一些生活服务方面尤其有用,比如购物.点餐.预定,甚至是查看天气.日历等.小程序日历是很方便也很容易制作的,那么具体怎么做一个微信小程序日历呢?你可以下载安装微信官 ...
移动端日历插件（vue3-small-calendar）
背景: 同事做移动端项目时希望用到可平铺选择的日历插件,然度娘无过最后问题到我这边,虽然咱不是前端但是秉着技术问题不是问题且问题到我为止的原则,自己研究了2天完成了vue3-small-calenda ...
JS PC端时间日历插件功能齐全无依赖
时间日历插件,网上有很多版本,功能强大的,功能简单的数不尽数,那为什么我还要写一个日历插件呢? 很认真的告诉你: 我手痒了,就是闲下来随便敲敲. 开发一个功能齐全的日期选择插件根据自己的业务需求不断 ...
jQuery实现移动端手机选择日期日历插件
效果图 calendar.css html, body {color: #333;margin: 0;height: 100%;font-family: "Microsoft YaHei&q ...
fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格
fullcalendar官网:https://fullcalendar.io/ 插件下载地址(v5.3.2版本):https://github.com/fullcalendar/fullcalenda ...
日历插件（项目总结）（包括mobiscroll.js LCalendar 和Calendar这三个日历插件）
日历插件的总结,由于在项目中经常用到日历,所以需要总结一下日历插件的用法日历初始化 var date = new Date(); var today = dateUtil.dateFormat(da ...
fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并动态增删改查(转载)
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

移动端旅游报价日历插件

移动端旅游报价日历插件相关推荐

最新文章

热门文章