遊戲陪玩系統開發，日期時間選擇介面的實現
前言
開始
<van-picker title="標題" show-toolbar :columns="dateColumns" @confirm="onConfirm" @cancel="onCancel" @change="onChange"/>
export default {
...
data() {
dateColumns: [],
defaultYear: new Date().getFullYear(), // 儲存年份，預設當前年
dateArray: [], // 儲存第一列的values
},
mounted() {
this.dateColumns = [
this.getNewDateArray(undefined, true),// 第一列
{
values: Array.from({ length: 24 }, (v, k) => {
if (k < 10) {
k = `0${k}`
}
return k;
}),
defaultIndex: 1,
}, { // 第二列
values: Array.from({ length: 60 }, (v, k) => {
if (k < 10) {
k = `0${k}`
}
return k;
}),
defaultIndex: 1,
}]; // 第三列
},
method:{
onConfirm(picker, values) {...},
onChange(picker, values) {
console.log('piker', picker, values)
// ...
},
onCancel() { ... },
getNewDateArray(date, flag, picker, type) {
...
}onChange(picker, values) {
console.log('piker', picker, values)
const dateArr = values[0].text.split(' ')[0].slice(0, -1).split('月');
const month = dateArr[0]; // 當前的月份
if(values[0] === this.dateArray[0]) { // 判斷`dateColumns` 第一列 `values` 陣列的第一個
let newMonth;
if(month === '1') { // 判斷 `month`（月份）是否為`第一個月`
newMonth = 12;
this.defaultYear -= 1;
} else {
newMonth = Number(month) - 1;
}
this.getNewDateArray(`${this.defaultYear}-${newMonth}-1`, false, picker, true)
} else if (values[0] === this.dateArray[this.dateArray.length - 1]) { // 判斷`dateColumns` 第一列 `values` 陣列的最後一個
let newMonth;
if(month === '12') { // 判斷 `month`（月份）是否為`最後一個月`
newMonth = 1;
this.defaultYear += 1;
} else {
newMonth = Number(month) + 1
}
this.getNewDateArray(`${this.defaultYear}-${newMonth}-1`, false, picker, false)
}
}, const weekArray = ['週日', '週一', '週二', '週三', '週四', '週五', '週六'];
/**
* date: 需要增加的資料
* flag：是否是第一次進入
* picker：Picker的例項
* type：資料push的方向
*/
getNewDateArray(date, flag, picker, type) {
date = date ? new Date(date) : new Date();
let month = date.getMonth() + 1; // 儲存當前月份
const monthDays = new Date(date.getFullYear(), month, 0).getDate(); // 獲取當前月份的總天數
let arr = [];
let index = 0;
for (let i = 1; i <= monthDays; i ++) {
let str = `${month}月${i}日 ${weekArray[new Date(`${date.getFullYear()}-${month}-${i}`).getDay()]}`
arr.push(str);
}
... // code
if(flag) {
return {
values: arr,
defaultIndex: date.getDate() - 1 // 設定預設選中
}
}
... // code
} ... // code
+ if(type) {
+ this.dateArray = arr.concat(this.dateArray); // 新增到dateArray陣列之前
+ index = monthDays;
+ } else {
+ index = this.dateArray.length - 1; // 設定新陣列前設定預設選中索引
+ this.dateArray = this.dateArray.concat(arr); // 新增到dateArray陣列之後
+ }
if(flag) {
return {
+ values: this.dateArray,
- values: arr,
defaultIndex: date.getDate() - 1
}
+ } else {
+ picker.setColumnValues(0, this.dateArray)
+ picker.setColumnIndex(0, index) // 設定預設選中
}
onChange() {
- if(values[0] === this.dateArray[0]) {
- if(values[0].text === this.dateArray[0].text) {
...
- } else if (values[0] === this.dateArray[this.dateArray.length - 1]) {
- } else if (values[0].text === this.dateArray[this.dateArray.length - 1].text) {
...
}
},
getNewDateArray(date, flag, picker, type) {
- let str = `${month}月${i}日 ${weekArray[new Date(`${date.getFullYear()}-${month}-${i}`).getDay()]}`
- let str = {
- year: date.getFullYear(),,
- text: `${month}月${i}日 ${weekArray[new Date(`${newYear}-${month}-${i}`).getDay()]}`
- };
}
getNewDateArray(date, flag, picker, type) {
+ let getMoreMonth = false; // 不需要獲取更多 1、獲取前一個月；2、獲取後一個月
+ if(flag) { // 初次渲染
+ const newDate = new Date();
+ const monthDays = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0).getDate()
+ if(new Date().getDate() === 1) { // 當月第一天
+ getMoreMonth = 1;
+ } else if (new Date().getDate() === monthDays) { // 當月最後一天
+ getMoreMonth = 2;
+ }
+ }
date = date ? new Date(date) : new Date();
...
for (let i = 1; i <= monthDays; i ++) {
let str = {
year: date.getFullYear(),
text: `${month}月${i}日 ${weekArray[new Date(`${date.getFullYear()}-${month}-${i}`).getDay()]}`
};
arr.push(str);
}
+ let moreLen = date.getDate() - 1;
+ if(getMoreMonth) {
+ let newYear = date.getFullYear();
+ if (getMoreMonth === 1) { // 當月第一天
+ if (month === 1) {
+ month = 12;
+ newYear -= 1;
+ } else {
+ month -= 1;
+ }
+ } else {
+ if (month === 12) {// 當月最後一天
+ month = 1;
+ newYear += 1;
+ } else {
+ month += 1;
+ }
+ }
+ const moreMonthDays = new Date(newYear, month, 0).getDate();
+ let beforeArray = [];
+ for (let i = 1; i <= moreMonthDays; i ++) {
+ let str = {
+ year: newYear,
+ text: `${month}月${i}日 ${weekArray[new Date(`${newYear}-${month}-${i}`).getDay()]}`
+ };
+ if (getMoreMonth === 2) { // 獲取後一個月直接push
+ arr.push(str);
+ } else {
+ beforeArray.push(str); // 獲取前一個月存入新的陣列
+ }
+ }
+ moreLen = getMoreMonth === 1 ? (moreLen + beforeArray.length) : moreLen; // 獲取前一個月索引增加前一個月總天數
+ arr = beforeArray.concat(arr);
+ }
if(flag) {
return {
values: this.dateArray,
- defaultIndex: date.getDate() - 1
+ defaultIndex: moreLen
}
} else {
... mounted() {
this.dateColumns = [
- this.getNewDateArray(undefined, true),// 第一列
- this.getNewDateArray('2020-11-1', true),// 第一列
...
},
getNewDateArray(date, flag, picker, type) {
let getMoreMonth = false; // 不需要獲取更多 1、獲取前一個月；2、獲取後一個月
if(flag) {
- const newDate = new Date();
- const newDate = new Date(date);
const monthDays = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0).getDate()
- if(new Date().getDate() === 1) {
- if(new Date(date).getDate() === 1) {
- console.log('first day')
getMoreMonth = 1;
} else if (new Date().getDate() === monthDays) {
getMoreMonth = 2;
}
}
...
}
mounted() {
this.dateColumns = [
- this.getNewDateArray('2020-11-1', true),// 第一列
- this.getNewDateArray('2020-11-30', true),// 第一列
...
},
getNewDateArray(date, flag, picker, type) {
let getMoreMonth = false; // 不需要獲取更多 1、獲取前一個月；2、獲取後一個月
if(flag) {
- const newDate = new Date(date);
- const newDate = new Date();
const monthDays = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0).getDate()
- if(new Date().getDate() === 1) {
- if(new Date(date).getDate() === 1) {
- console.log('first day')
getMoreMonth = 1;
- } else if (new Date().getDate() === monthDays) {
- } else if (new Date(date).getDate() === monthDays) {
- console.log('last day')
getMoreMonth = 2;
}
}
...
}
mounted() {
this.dateColumns = [
- this.getNewDateArray('2020-11-30', true),// 第一列
- this.getNewDateArray(undefined, true),// 第一列
...
]
},
onChange(picker, values) {
...
const month = dateArr[0]; // 當前的月份
const day = dateArr[1]; // 當月第幾天
if(...) {
...
this.getNewDateArray(`${this.defaultYear}-${newMonth}-${day}`, false, picker, true)
} else if (...) {
...
this.getNewDateArray(`${this.defaultYear}-${newMonth}-${day}`, false, picker, false)
}
}// customSelectDate.vue<template>
<van-popup class="time-custom-picker" v-model="showDatepicker" position="bottom" :style="{ height: '300px' }">
<van-picker
title="選擇時間"
show-toolbar
:visible-item-count="5"
:columns="dateColumns"
@confirm="onConfirm"
@cancel="onCancel"
@change="onChange"
/>
</van-popup></template><script>import { weekArray } from '@/assets/js/constant';const timeArray = [
{
values: Array.from({ length: 24 }, (v, k) => {
if (k < 10) {
k = `0${k}`
}
return k;
}),
defaultIndex: 24,
}, {
values: [':']
}, { // 第二列
values: Array.from({ length: 60 }, (v, k) => {
if (k < 10) {
k = `0${k}`
}
return k;
}),
defaultIndex: 60,
} // 第三列]export default {
name: 'publishSelectDate',
props: {},
components: {},
data() {
return {
showDatepicker: false,
dateColumns: [],
defaultYear: new Date().getFullYear(),
dateArray: [],
}
},
created() {},
computed: {},
mounted() {
this.dateColumns = [
this.getNewDateArray(undefined, true),// 第一列
...timeArray ];
},
methods: {
onConfirm(values, indexs) {
this.showDatepicker = !this.showDatepicker this.$emit('select-date', values)
},
// 改變選擇時間
onChange(picker, values) {
const dateArr = values[0].text.split(' ')[0].slice(0, -1).split('月');
const month = dateArr[0]; // 當前的月份
// 已到陣列第一個，獲取上一個月
if(values[0].text === this.dateArray[0].text) {
let newMonth;
if(month === '1') {
newMonth = 12;
this.defaultYear -= 1;
} else {
newMonth = Number(month) - 1;
}
this.getNewDateArray(`${this.defaultYear}/${newMonth}/1`, false, picker, true)
}
// 已到陣列最後一個，獲取下一個月
else if (values[0].text === this.dateArray[this.dateArray.length - 1].text) {
let newMonth;
if(month === '12') {
newMonth = 1;
this.defaultYear += 1;
} else {
newMonth = Number(month) + 1
}
this.getNewDateArray(`${this.defaultYear}/${newMonth}/1`, false, picker, false)
}
},
onCancel() {
this.showDatepicker = !this.showDatepicker },
getNewDateArray(date, flag, picker, type) {
let getMoreMonth = false; // 不需要獲取更多 1、獲取前一個月；2、獲取後一個月
if(flag) { // 是否是第一次
const newDate = new Date();
const monthDays = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0).getDate()
if(new Date().getDate() === 1) { // 是當月第一天就獲取前一個月
getMoreMonth = 1;
} else if (new Date().getDate() === monthDays) { // 是當月最後一天就獲取後一個月
getMoreMonth = 2;
}
}
date = date ? new Date(date) : new Date();
let month = date.getMonth() + 1;
const monthDays = new Date(date.getFullYear(), month, 0).getDate();
let arr = [];
let index = 0;
// 生成當月的日期陣列
for (let i = 1; i <= monthDays; i ++) {
let str = {
year: date.getFullYear(),
text: `${month}月${i}日 ${weekArray[new Date(`${date.getFullYear()}/${month}/${i}`).getDay()]}`
};
arr.push(str);
}
let moreLen = 0;
// 是否獲取更多月份
if(getMoreMonth) {
let newYear = date.getFullYear();
if (getMoreMonth === 1) { // 獲取前一個月
if (month === 1) {
month = 12;
newYear -= 1;
} else {
month -= 1;
}
} else { // 獲取後一個月
if (month === 12) {
month = 1;
newYear += 1;
} else {
month += 1;
}
}
const moreMonthDays = new Date(newYear, month, 0).getDate();
let beforeArray = []; // 上一個月
// 生成前一個月或後一個月日期陣列
for (let i = 1; i <= moreMonthDays; i ++) {
let str = {
year: newYear,
text: `${month}月${i}日 ${weekArray[new Date(`${newYear}/${month}/${i}`).getDay()]}`
};
if (getMoreMonth === 2) { // 後一個月的直接往當前月的日期陣列裡面push
arr.push(str);
} else { // 上一個月放入上一個月陣列
beforeArray.push(str);
}
}
// 如果是獲取的上一個月更新預設下表長度增加上一個月天數
moreLen = getMoreMonth === 1 ? beforeArray.length : 0;
arr = beforeArray.concat(arr);
}
// 是否是獲取後一個月
if(type) {
this.dateArray = arr.concat(this.dateArray);
index = monthDays;
} else {
index = this.dateArray.length - 1;
this.dateArray = this.dateArray.concat(arr);
}
// 是否是第一次進入選擇日期
if(flag) {
return {
values: this.dateArray,
defaultIndex: getMoreMonth === 1 ? moreLen + date.getDate() - 1 : date.getDate() - 1
}
} else {
picker.setColumnValues(0, this.dateArray)
picker.setColumnIndex(0, index)
}
},
}}</script><style lang="scss" scope>
.time-custom-picker {
font-family: PingFangSC, PingFangSC-Regular;
color: #000000;
.van-picker {
.van-picker__toolbar {
.van-picker__confirm {
color: #1795ff;
}
}
.van-picker__columns {
.van-picker-column {
flex: none;
}
.van-picker-column:first-child {
width: 200px;
}
.van-picker-column:nth-child(2),
.van-picker-column:nth-child(4) {
width: 60px;
}
}
}
}</style><custom-select-date ref="selectDate" @select-date="onConfirm"></custom-select-date>onConfirm(values) {
this.checkedYear = values[0].year;
this.form.submitDeadline = `${values[0].text} ${values[1]}:${values[3]}`;
},總結
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69996194/viewspace-2838409/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 遊戲陪玩系統開發，Java怎樣實現流合併？遊戲Java
- 遊戲陪玩系統開發，音視訊混流的實現程式碼遊戲
- IOS之UIDatePicker實現時間日期選擇iOSUI
- 遊戲陪玩app開發，高併發系統如何設計？遊戲APP
- 如何實現遊戲陪玩系統原始碼前端效能監控？遊戲原始碼前端
- 透過websocket，實現遊戲陪玩系統的聊天室Web遊戲
- 遊戲陪玩系統開發，架構設計的開閉原則是如何實現的？遊戲架構
- 遊戲陪玩系統原始碼開發，如何實現圖片和動畫的優化？遊戲原始碼動畫優化
- 遊戲陪玩app開發，訊息可靠性的實現遊戲APP
- 遊戲陪玩app原始碼開發，常用的倒數計時功能如何實現？遊戲APP原始碼
- 在遊戲陪玩系統開發中，如何進行效能測試？遊戲
- 如何在遊戲陪玩系統原始碼中實現“刮刮樂”效果？遊戲原始碼
- 如何實現遊戲陪玩系統中語音的錄製與播放？遊戲
- React Native日期時間選擇元件React Native元件
- 遊戲陪玩平臺原始碼開發，依賴收集和觸發的實現遊戲原始碼
- 遊戲陪玩APP遊戲APP
- 陪玩原始碼，與時間、日期相關的程式碼分析原始碼
- 遊戲陪玩app開發，前端實現一個輪詢需要如何做？遊戲APP前端
- 遊戲陪玩系統原始碼中不同排序演算法的實現方式遊戲原始碼排序演算法
- 遊戲陪玩系統實現自適應負載均衡演算法的方式遊戲負載演算法
- 遊戲陪玩系統開發，業務程式碼判斷生產/開發環境的方式遊戲開發環境
- 如何在遊戲陪玩系統原始碼中聊天室內實現一個禮物系統？遊戲原始碼
- 資料安全，是陪玩遊戲系統時刻關注的問題遊戲
- 遊戲陪玩系統原始碼中懶載入的實現方式有哪幾種？遊戲原始碼
- elementUI中日期選擇器，控制開始時間小於結束時間UI
- 如何開發陪玩系統原始碼的列表頁面，相關實現程式碼原始碼
- 遊戲陪玩，仍在途中遊戲
- 遊戲陪玩系統原始碼的許可權設計，如何基於位運算實現？遊戲原始碼
- 陪玩系統原始碼開發，H5頁面中呼叫支付功能的實現原始碼H5
- 遊戲陪玩app開發中，Mysql的sql優化方法遊戲APPMySql優化
- 遊戲陪玩平臺原始碼，日期格式化的程式碼分析遊戲原始碼
- 直播帶貨原始碼，日期時間選擇器 選擇範圍限制原始碼
- 遊戲陪玩系統，生成證書和金鑰庫的程式碼分析遊戲
- dcat-admin 統計修改時間選擇器 日期範圍查詢
- 遊戲陪玩平臺原始碼開發，聊天室內的禮物連擊效果的實現遊戲原始碼
- 關於遊戲陪玩系統原始碼後臺管理系統，需要思考的二三事遊戲原始碼
- Android開發：獲取當前系統時間和日期的方法Android
- ant design 日期月份區間選擇