原生js手擼一個日曆，支持範圍選擇（帶背景色）
- 一個支持範圍選擇的日曆（移動端）
需求原型：
一、日曆默認顯示當前月，而且標註當日的日期，當日之後得日期置灰不能夠選擇。
二、日曆支持選擇某單個日期和範圍選擇，而且選中的兩個日期之間要加背景色。
三、限制最多選擇6個月，超出六個月提示「最多選擇6個月」，而且日曆滾動到選擇的起始日期位置，保留開始日期的選中效果，繼續選擇結束日期。
四、在顯示周的元素下面，要有個顯示當前滾動到的年月的元素並帶有動畫效果。
demo採用的是rem佈局。
需求大概就是這個樣子，下面貼代碼咯：css
- 具體實現邏輯
index.htmlhtml
<!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.cssandroid
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.cssweb
.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.jsjson
; (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.jsapp
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 ···
代碼有待優化，往後再說吧dom
相關文章
- 1. antd中RangePicker範圍日曆選擇器
- 2. JS中window.print()不支持背景色
- 3. 簡潔JS 日曆控件 支持日期和月份選擇
- 4. 日期範圍選擇類日曆（增強版）
- 5. 選擇技術之顏色範圍
- 6. 建立一個js日曆（原生JS實現日曆）
- 7. Element DatePicker 日期選擇器限定日期選擇範圍
- 8. Bootstrap的DatePicker日期範圍選擇
- 9. iview 日期範圍選擇校驗
- 10. easyui擴展-日期範圍選擇.
- 更多相關文章...
- • ionic 背景層 - ionic 教程
- • R 繪圖 - 中文支持 - R 語言教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
