|
|
|
|
@ -1,14 +1,12 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="">
|
|
|
|
|
<div class>
|
|
|
|
|
<!-- <span @click="showPicker">{{ getLangText(label.datetimePicker) }}</span> -->
|
|
|
|
|
<div class="date-picker-bg" v-show="isShow" @click="closePicker"></div>
|
|
|
|
|
<div class="date-picker time-container" v-show="isShow">
|
|
|
|
|
<div class="picker-top">
|
|
|
|
|
<span class="picker-arrow" @click="preYear">‹‹</span>
|
|
|
|
|
<span class="picker-arrow" @click="preMonth">‹</span>
|
|
|
|
|
<span class="date-text"
|
|
|
|
|
>{{ year }}-{{ month > 9 ? month : "0" + month }}</span
|
|
|
|
|
>
|
|
|
|
|
<span class="date-text">{{ year }}-{{ month > 9 ? month : "0" + month }}</span>
|
|
|
|
|
<span class="picker-arrow" @click="nextMonth">›</span>
|
|
|
|
|
<span class="picker-arrow" @click="nextYear">››</span>
|
|
|
|
|
</div>
|
|
|
|
|
@ -16,50 +14,40 @@
|
|
|
|
|
<table>
|
|
|
|
|
<thead style="borderradius: 4px">
|
|
|
|
|
<tr style="overflow: hidden">
|
|
|
|
|
<th v-for="(item, idx) in weekList" :key="'week' + idx">
|
|
|
|
|
{{ getLangText(item) }}
|
|
|
|
|
</th>
|
|
|
|
|
<th v-for="(item, idx) in weekList" :key="'week' + idx">{{ getLangText(item) }}</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<div class="contain"></div>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr v-for="idx in weekNum" :key="'weekNum' + idx">
|
|
|
|
|
<td
|
|
|
|
|
v-for="m in [1, 2, 3, 4, 5, 6, 7]"
|
|
|
|
|
:key="'monthDay' + idx + '_' + m"
|
|
|
|
|
:class="[
|
|
|
|
|
<td v-for="m in [1, 2, 3, 4, 5, 6, 7]" :key="'monthDay' + idx + '_' + m" :class="[
|
|
|
|
|
new Date(monthList[idx - 1][m - 1]).getMonth() + 1 == month
|
|
|
|
|
? ''
|
|
|
|
|
: 'gray',
|
|
|
|
|
selectDate == monthList[idx - 1][m - 1] ? 'active' : '',
|
|
|
|
|
(new Date(monthList[idx - 1][m - 1]).getTime() <
|
|
|
|
|
currentDate ||
|
|
|
|
|
getabandonDate(new Date(monthList[idx - 1][m - 1]))) &&
|
|
|
|
|
(prev ? new Date(monthList[idx - 1][m - 1]).getTime() <
|
|
|
|
|
currentDate : new Date(monthList[idx - 1][m - 1]).getTime() >
|
|
|
|
|
currentDate) ||
|
|
|
|
|
getabandonDate(new Date(monthList[idx - 1][m - 1])) &&
|
|
|
|
|
isInterview
|
|
|
|
|
? 'bggray'
|
|
|
|
|
: '',
|
|
|
|
|
]"
|
|
|
|
|
@click="onSelectDate(monthList[idx - 1][m - 1])"
|
|
|
|
|
>
|
|
|
|
|
]" @click="onSelectDate(monthList[idx - 1][m - 1])">
|
|
|
|
|
<!-- (new Date(monthList[idx - 1][m - 1]).getTime() <
|
|
|
|
|
currentDate ||
|
|
|
|
|
getabandonDate(new Date(monthList[idx - 1][m - 1]))) &&
|
|
|
|
|
isInterview
|
|
|
|
|
isInterview
|
|
|
|
|
? 'bggray'
|
|
|
|
|
: '', 控制面试时间的可选择日期范围-->
|
|
|
|
|
: '', 控制面试时间的可选择日期范围-->
|
|
|
|
|
<div>{{ new Date(monthList[idx - 1][m - 1]).getDate() }}</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
<ul class="hour-list" @click="closebox">
|
|
|
|
|
<li
|
|
|
|
|
v-for="(n, index) in hourList"
|
|
|
|
|
:key="'hourList' + index"
|
|
|
|
|
@click="onSelectHour(n, index)"
|
|
|
|
|
:class="[index == clicktime ? 'active' : '']"
|
|
|
|
|
>
|
|
|
|
|
{{ n }}:<span>{{ index % 2 === 0 ? "00" : "30" }}</span>
|
|
|
|
|
<li v-for="(n, index) in hourList" :key="'hourList' + index" @click="onSelectHour(n, index)" :class="[index == clicktime ? 'active' : '']">
|
|
|
|
|
{{ n }}:
|
|
|
|
|
<span>{{ index % 2 === 0 ? "00" : "30" }}</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<!-- <ul class="minutes-list">
|
|
|
|
|
@ -72,7 +60,7 @@
|
|
|
|
|
>
|
|
|
|
|
{{ n - 1 }}:00
|
|
|
|
|
</li>
|
|
|
|
|
</ul> -->
|
|
|
|
|
</ul>-->
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="picker-footer"> -->
|
|
|
|
|
<!-- <button @click="closePicker">{{ getLangText(label.close) }}</button> -->
|
|
|
|
|
@ -86,37 +74,28 @@
|
|
|
|
|
Date.prototype.format = function (fmt) {
|
|
|
|
|
//author: meizz
|
|
|
|
|
var o = {
|
|
|
|
|
"M+": this.getMonth() + 1, //月份
|
|
|
|
|
"d+": this.getDate(), //日
|
|
|
|
|
"h+": this.getHours(), //小时
|
|
|
|
|
"m+": this.getMinutes(), //分
|
|
|
|
|
"s+": this.getSeconds(), //秒
|
|
|
|
|
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
|
|
|
'M+': this.getMonth() + 1, //月份
|
|
|
|
|
'd+': this.getDate(), //日
|
|
|
|
|
'h+': this.getHours(), //小时
|
|
|
|
|
'm+': this.getMinutes(), //分
|
|
|
|
|
's+': this.getSeconds(), //秒
|
|
|
|
|
'q+': Math.floor((this.getMonth() + 3) / 3), //季度
|
|
|
|
|
S: this.getMilliseconds(), //毫秒
|
|
|
|
|
};
|
|
|
|
|
if (/(y+)/.test(fmt))
|
|
|
|
|
fmt = fmt.replace(
|
|
|
|
|
RegExp.$1,
|
|
|
|
|
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
|
|
|
|
|
);
|
|
|
|
|
for (var k in o)
|
|
|
|
|
if (new RegExp("(" + k + ")").test(fmt))
|
|
|
|
|
fmt = fmt.replace(
|
|
|
|
|
RegExp.$1,
|
|
|
|
|
RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
|
|
|
|
|
);
|
|
|
|
|
return fmt;
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
|
|
|
for (var k in o) if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
|
|
|
|
|
return fmt
|
|
|
|
|
}
|
|
|
|
|
export default {
|
|
|
|
|
name: "DateTimePicker",
|
|
|
|
|
name: 'DateTimePicker',
|
|
|
|
|
props: {
|
|
|
|
|
langType: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: window.localStorage.getItem("langType"),
|
|
|
|
|
default: window.localStorage.getItem('langType'),
|
|
|
|
|
},
|
|
|
|
|
datetime: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: new Date().format("yyyy-MM-dd hh:00"),
|
|
|
|
|
default: new Date().format('yyyy-MM-dd hh:00'),
|
|
|
|
|
},
|
|
|
|
|
isShow: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
@ -127,45 +106,42 @@ export default {
|
|
|
|
|
default: true,
|
|
|
|
|
},
|
|
|
|
|
baseColor: {},
|
|
|
|
|
prev: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: () => ({
|
|
|
|
|
label: {
|
|
|
|
|
ok: { zh: "确定", en: "OK" },
|
|
|
|
|
close: { zh: "关闭", en: "close" },
|
|
|
|
|
today: { zh: "确定", en: "now" },
|
|
|
|
|
datetimePicker: { zh: "日期时间选择", en: "datetimePicker" },
|
|
|
|
|
ok: { zh: '确定', en: 'OK' },
|
|
|
|
|
close: { zh: '关闭', en: 'close' },
|
|
|
|
|
today: { zh: '确定', en: 'now' },
|
|
|
|
|
datetimePicker: { zh: '日期时间选择', en: 'datetimePicker' },
|
|
|
|
|
},
|
|
|
|
|
clicktime: null,
|
|
|
|
|
weekList: [
|
|
|
|
|
{ zh: "日", en: "Sun" },
|
|
|
|
|
{ zh: "一", en: "Mon" },
|
|
|
|
|
{ zh: "二", en: "Tue" },
|
|
|
|
|
{ zh: "三", en: "Wed" },
|
|
|
|
|
{ zh: "四", en: "Thu" },
|
|
|
|
|
{ zh: "五", en: "Fir" },
|
|
|
|
|
{ zh: "六", en: "Sat" },
|
|
|
|
|
],
|
|
|
|
|
hourList: [
|
|
|
|
|
8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17,
|
|
|
|
|
17, 18, 18,
|
|
|
|
|
],
|
|
|
|
|
hourListTmp: [
|
|
|
|
|
8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17,
|
|
|
|
|
17, 18, 18,
|
|
|
|
|
{ zh: '日', en: 'Sun' },
|
|
|
|
|
{ zh: '一', en: 'Mon' },
|
|
|
|
|
{ zh: '二', en: 'Tue' },
|
|
|
|
|
{ zh: '三', en: 'Wed' },
|
|
|
|
|
{ zh: '四', en: 'Thu' },
|
|
|
|
|
{ zh: '五', en: 'Fir' },
|
|
|
|
|
{ zh: '六', en: 'Sat' },
|
|
|
|
|
],
|
|
|
|
|
hourList: [8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18],
|
|
|
|
|
hourListTmp: [8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18],
|
|
|
|
|
year: new Date().getFullYear(),
|
|
|
|
|
month: new Date().getMonth() + 1,
|
|
|
|
|
day: new Date().getDate(),
|
|
|
|
|
currentDate: new Date(new Date().format("yyyy-MM-dd 00:00")).getTime(),
|
|
|
|
|
currentDate: new Date(new Date().format('yyyy-MM-dd 00:00')).getTime(),
|
|
|
|
|
// testDate: ,
|
|
|
|
|
abandonDate: [],
|
|
|
|
|
startDay: 0,
|
|
|
|
|
endDay: 0,
|
|
|
|
|
weekNum: 0,
|
|
|
|
|
selectDate: "",
|
|
|
|
|
selectDate: '',
|
|
|
|
|
monthList: [],
|
|
|
|
|
selectHour: "",
|
|
|
|
|
selectMinute: "",
|
|
|
|
|
selectHour: '',
|
|
|
|
|
selectMinute: '',
|
|
|
|
|
// new Date().getMinutes() >= 0 && new Date().getMinutes() < 30 ? "0" : "30",
|
|
|
|
|
}),
|
|
|
|
|
created() {
|
|
|
|
|
@ -175,45 +151,28 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
year() {
|
|
|
|
|
this.getMonthDay();
|
|
|
|
|
this.getMonthDay()
|
|
|
|
|
},
|
|
|
|
|
month() {
|
|
|
|
|
this.getMonthDay();
|
|
|
|
|
this.getMonthDay()
|
|
|
|
|
},
|
|
|
|
|
isShow() {
|
|
|
|
|
const that = this;
|
|
|
|
|
let box = document.querySelector(".time-container");
|
|
|
|
|
box.style.opacity = 1;
|
|
|
|
|
const that = this
|
|
|
|
|
let box = document.querySelector('.time-container')
|
|
|
|
|
box.style.opacity = 1
|
|
|
|
|
if (this.isShow) {
|
|
|
|
|
this.initHours();
|
|
|
|
|
this.initHours()
|
|
|
|
|
// console.log(this.selectHour);
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.selectDate = new Date(
|
|
|
|
|
new Date(this.datetime || new Date()).format("yyyy-MM-dd 00:00")
|
|
|
|
|
).getTime();
|
|
|
|
|
this.selectMinute =
|
|
|
|
|
new Date(this.datetime || new Date()).getMinutes() < 30
|
|
|
|
|
? "0"
|
|
|
|
|
: "30";
|
|
|
|
|
console.log(this.selectMinute);
|
|
|
|
|
this.selectHour =
|
|
|
|
|
new Date(this.datetime || new Date()).getHours() > 8 &&
|
|
|
|
|
new Date(this.datetime || new Date()).getHours() < 19
|
|
|
|
|
? new Date(this.datetime || new Date()).getHours()
|
|
|
|
|
: "8";
|
|
|
|
|
let ind =
|
|
|
|
|
(this.selectHour - 8 - (this.hourListTmp.length - this.hourList.length) / 2) * 2 + (this.selectMinute === "0" ? 0 : 1);
|
|
|
|
|
that.$emit(
|
|
|
|
|
"update:datetime",
|
|
|
|
|
new Date(
|
|
|
|
|
that.selectDate +
|
|
|
|
|
that.selectHour * 3600000 +
|
|
|
|
|
that.selectMinute * 60000
|
|
|
|
|
).format("yyyy-MM-dd hh:mm")
|
|
|
|
|
);
|
|
|
|
|
console.log(ind);
|
|
|
|
|
this.onSelectHour(this.selectHour, ind);
|
|
|
|
|
});
|
|
|
|
|
this.selectDate = new Date(new Date(this.datetime || new Date()).format('yyyy-MM-dd 00:00')).getTime()
|
|
|
|
|
this.selectMinute = new Date(this.datetime || new Date()).getMinutes() < 30 ? '0' : '30'
|
|
|
|
|
console.log(this.selectMinute)
|
|
|
|
|
this.selectHour = new Date(this.datetime || new Date()).getHours() > 8 && new Date(this.datetime || new Date()).getHours() < 19 ? new Date(this.datetime || new Date()).getHours() : '8'
|
|
|
|
|
let ind = (this.selectHour - 8 - (this.hourListTmp.length - this.hourList.length) / 2) * 2 + (this.selectMinute === '0' ? 0 : 1)
|
|
|
|
|
that.$emit('update:datetime', new Date(that.selectDate + that.selectHour * 3600000 + that.selectMinute * 60000).format('yyyy-MM-dd hh:mm'))
|
|
|
|
|
console.log(ind)
|
|
|
|
|
this.onSelectHour(this.selectHour, ind)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
// else {
|
|
|
|
|
// this.$emit(
|
|
|
|
|
@ -225,106 +184,95 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initHours(timestr = '') {
|
|
|
|
|
var today = new Date();
|
|
|
|
|
var todayStr = `${today.getFullYear()}-${today.getMonth() < 10 ? ('0' + (today.getMonth() + 1)) : (today.getMonth() + 1)}-${today.getDate() < 10 ? ('0' + today.getDate()) : today.getDate()}`;
|
|
|
|
|
if(timestr != '' && timestr != todayStr) {
|
|
|
|
|
this.hourList = [
|
|
|
|
|
8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17,
|
|
|
|
|
17, 18, 18,
|
|
|
|
|
]
|
|
|
|
|
return;
|
|
|
|
|
var today = new Date()
|
|
|
|
|
var todayStr = `${today.getFullYear()}-${today.getMonth() < 10 ? '0' + (today.getMonth() + 1) : today.getMonth() + 1}-${today.getDate() < 10 ? '0' + today.getDate() : today.getDate()}`
|
|
|
|
|
if (timestr != '' && timestr != todayStr) {
|
|
|
|
|
this.hourList = [8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18]
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if(this.datetime.split(" ")[0] == todayStr || timestr == todayStr) {
|
|
|
|
|
var currhour = today.getHours();
|
|
|
|
|
if(currhour > 17) {
|
|
|
|
|
this.hourList = [];
|
|
|
|
|
} else if(currhour <= 7) {
|
|
|
|
|
this.hourList = [
|
|
|
|
|
8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17,
|
|
|
|
|
17, 18, 18,
|
|
|
|
|
]
|
|
|
|
|
if (this.datetime.split(' ')[0] == todayStr || timestr == todayStr) {
|
|
|
|
|
var currhour = today.getHours()
|
|
|
|
|
if (currhour > 17) {
|
|
|
|
|
this.hourList = []
|
|
|
|
|
} else if (currhour <= 7) {
|
|
|
|
|
this.hourList = [8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18]
|
|
|
|
|
} else {
|
|
|
|
|
var arr = [];
|
|
|
|
|
currhour += 1;
|
|
|
|
|
for(var i = currhour; i != 19; ++i) {
|
|
|
|
|
arr.push(i);
|
|
|
|
|
arr.push(i);
|
|
|
|
|
var arr = []
|
|
|
|
|
currhour += 1
|
|
|
|
|
for (var i = currhour; i != 19; ++i) {
|
|
|
|
|
arr.push(i)
|
|
|
|
|
arr.push(i)
|
|
|
|
|
}
|
|
|
|
|
this.hourList = arr;
|
|
|
|
|
this.hourList = arr
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.hourList = [
|
|
|
|
|
8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17,
|
|
|
|
|
17, 18, 18,
|
|
|
|
|
]
|
|
|
|
|
this.hourList = [8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getLangText(item) {
|
|
|
|
|
if (item) {
|
|
|
|
|
if (this.langType == "en") {
|
|
|
|
|
if (this.langType == 'en') {
|
|
|
|
|
if (item.en && item.en.length > 1) {
|
|
|
|
|
return item.en.substring(0, 1).toUpperCase() + item.en.substring(1);
|
|
|
|
|
return item.en.substring(0, 1).toUpperCase() + item.en.substring(1)
|
|
|
|
|
} else if (item.en && item.en.length == 1) {
|
|
|
|
|
return item.en.toUpperCase();
|
|
|
|
|
return item.en.toUpperCase()
|
|
|
|
|
} else {
|
|
|
|
|
return "--";
|
|
|
|
|
return '--'
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return item.zh ? item.zh : "--";
|
|
|
|
|
return item.zh ? item.zh : '--'
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
return "--";
|
|
|
|
|
return '--'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
preYear() {
|
|
|
|
|
this.year = this.year - 1;
|
|
|
|
|
this.year = this.year - 1
|
|
|
|
|
},
|
|
|
|
|
nextYear() {
|
|
|
|
|
this.year = this.year + 1;
|
|
|
|
|
this.year = this.year + 1
|
|
|
|
|
},
|
|
|
|
|
nextMonth() {
|
|
|
|
|
if (this.month == 12) {
|
|
|
|
|
this.year = this.year + 1;
|
|
|
|
|
this.month = 1;
|
|
|
|
|
this.year = this.year + 1
|
|
|
|
|
this.month = 1
|
|
|
|
|
} else {
|
|
|
|
|
this.month++;
|
|
|
|
|
this.month++
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
preMonth() {
|
|
|
|
|
if (this.month == 1) {
|
|
|
|
|
this.year = this.year - 1;
|
|
|
|
|
this.month = 12;
|
|
|
|
|
this.year = this.year - 1
|
|
|
|
|
this.month = 12
|
|
|
|
|
} else {
|
|
|
|
|
this.month--;
|
|
|
|
|
this.month--
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
showPicker() {
|
|
|
|
|
this.$emit("update:is-show", true);
|
|
|
|
|
this.$emit('update:is-show', true)
|
|
|
|
|
|
|
|
|
|
var time = new Date(this.datetime || new Date()).getTime();
|
|
|
|
|
this.year = new Date(time).getFullYear();
|
|
|
|
|
this.month = new Date(time).getMonth() + 1;
|
|
|
|
|
this.day = new Date(time).getDate();
|
|
|
|
|
this.selectDate = new Date(
|
|
|
|
|
new Date(time).format("yyyy-MM-dd 00:00")
|
|
|
|
|
).getTime();
|
|
|
|
|
this.selectHour = new Date(time).getHours();
|
|
|
|
|
var time = new Date(this.datetime || new Date()).getTime()
|
|
|
|
|
this.year = new Date(time).getFullYear()
|
|
|
|
|
this.month = new Date(time).getMonth() + 1
|
|
|
|
|
this.day = new Date(time).getDate()
|
|
|
|
|
this.selectDate = new Date(new Date(time).format('yyyy-MM-dd 00:00')).getTime()
|
|
|
|
|
this.selectHour = new Date(time).getHours()
|
|
|
|
|
},
|
|
|
|
|
onConfirmDate(time) {
|
|
|
|
|
this.onSelectDate(time);
|
|
|
|
|
this.onSelectDate(time)
|
|
|
|
|
// this.confirmPicker();
|
|
|
|
|
},
|
|
|
|
|
onConfirmHour(n) {
|
|
|
|
|
this.onSelectHour(n);
|
|
|
|
|
this.onSelectHour(n)
|
|
|
|
|
// this.confirmPicker();
|
|
|
|
|
},
|
|
|
|
|
closePicker() {
|
|
|
|
|
let box = document.querySelector(".time-container");
|
|
|
|
|
box.style.opacity = 0;
|
|
|
|
|
let box = document.querySelector('.time-container')
|
|
|
|
|
box.style.opacity = 0
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.$emit("update:is-show", false);
|
|
|
|
|
}, 300);
|
|
|
|
|
console.log(box);
|
|
|
|
|
this.$emit('update:is-show', false)
|
|
|
|
|
}, 300)
|
|
|
|
|
console.log(box)
|
|
|
|
|
},
|
|
|
|
|
setNow() {
|
|
|
|
|
// this.year = new Date().getFullYear();
|
|
|
|
|
@ -338,7 +286,7 @@ export default {
|
|
|
|
|
// new Date().getMinutes() > 0 && new Date().getMinutes() <= 30
|
|
|
|
|
// ? "0"
|
|
|
|
|
// : "30";
|
|
|
|
|
this.$emit("update:is-show", false);
|
|
|
|
|
this.$emit('update:is-show', false)
|
|
|
|
|
},
|
|
|
|
|
// confirmPicker() {
|
|
|
|
|
// console.log(this.selectMinute);
|
|
|
|
|
@ -359,53 +307,42 @@ export default {
|
|
|
|
|
// this.closePicker();
|
|
|
|
|
// },
|
|
|
|
|
getMonthDay() {
|
|
|
|
|
var monthFirst = new Date(this.year + "-" + this.month + "-01 00:00");
|
|
|
|
|
var w = monthFirst.getDay();
|
|
|
|
|
var monthFirst = new Date(this.year + '-' + this.month + '-01 00:00')
|
|
|
|
|
var w = monthFirst.getDay()
|
|
|
|
|
|
|
|
|
|
this.startDay = monthFirst.getTime() - w * 24 * 3600 * 1000;
|
|
|
|
|
this.startDay = monthFirst.getTime() - w * 24 * 3600 * 1000
|
|
|
|
|
if (this.month == 12) {
|
|
|
|
|
this.endDay = new Date(this.year + 1 + "-01-01 00:00").getTime() - 1000;
|
|
|
|
|
this.endDay = new Date(this.year + 1 + '-01-01 00:00').getTime() - 1000
|
|
|
|
|
} else {
|
|
|
|
|
this.endDay =
|
|
|
|
|
new Date(this.year + "-" + (this.month + 1) + "-01 00:00").getTime() -
|
|
|
|
|
1000;
|
|
|
|
|
this.endDay = new Date(this.year + '-' + (this.month + 1) + '-01 00:00').getTime() - 1000
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var monthDay = (this.endDay + 1000 - this.startDay) / (24 * 3600 * 1000);
|
|
|
|
|
this.weekNum = Math.ceil(monthDay / 7);
|
|
|
|
|
this.monthList = [];
|
|
|
|
|
var monthDay = (this.endDay + 1000 - this.startDay) / (24 * 3600 * 1000)
|
|
|
|
|
this.weekNum = Math.ceil(monthDay / 7)
|
|
|
|
|
this.monthList = []
|
|
|
|
|
for (var i = 0; i < this.weekNum; i++) {
|
|
|
|
|
var item = [];
|
|
|
|
|
var item = []
|
|
|
|
|
for (var j = 0; j < 7; j++) {
|
|
|
|
|
item.push(
|
|
|
|
|
this.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000
|
|
|
|
|
);
|
|
|
|
|
item.push(this.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000)
|
|
|
|
|
}
|
|
|
|
|
this.monthList.push(item);
|
|
|
|
|
this.monthList.push(item)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onSelectHour(n, index) {
|
|
|
|
|
// console.log(n);
|
|
|
|
|
this.selectHour = n;
|
|
|
|
|
this.selectHour = n
|
|
|
|
|
|
|
|
|
|
this.clicktime = index;
|
|
|
|
|
this.clicktime = index
|
|
|
|
|
if (index % 2 === 0) {
|
|
|
|
|
this.selectMinute = "0";
|
|
|
|
|
this.selectMinute = '0'
|
|
|
|
|
} else {
|
|
|
|
|
this.selectMinute = "30";
|
|
|
|
|
this.selectMinute = '30'
|
|
|
|
|
}
|
|
|
|
|
this.$emit(
|
|
|
|
|
"update:datetime",
|
|
|
|
|
new Date(
|
|
|
|
|
this.selectDate +
|
|
|
|
|
this.selectHour * 3600000 +
|
|
|
|
|
this.selectMinute * 60000
|
|
|
|
|
).format("yyyy-MM-dd hh:mm")
|
|
|
|
|
);
|
|
|
|
|
this.$emit('update:datetime', new Date(this.selectDate + this.selectHour * 3600000 + this.selectMinute * 60000).format('yyyy-MM-dd hh:mm'))
|
|
|
|
|
},
|
|
|
|
|
closebox() {
|
|
|
|
|
console.log(this.selectDate);
|
|
|
|
|
this.closePicker();
|
|
|
|
|
console.log(this.selectDate)
|
|
|
|
|
this.closePicker()
|
|
|
|
|
},
|
|
|
|
|
// onSelectMinute(n) {
|
|
|
|
|
// this.selectMinute = n;
|
|
|
|
|
@ -424,48 +361,41 @@ export default {
|
|
|
|
|
// console.log(time);
|
|
|
|
|
if (this.isInterview) {
|
|
|
|
|
//控制面试时间的可选择日期范围
|
|
|
|
|
if (time < this.currentDate || this.getabandonDate(time)) {
|
|
|
|
|
return;
|
|
|
|
|
if ((this.prev ? time < this.currentDate : time > this.currentDate) || this.getabandonDate(time)) {
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
this.selectDate = time;
|
|
|
|
|
this.selectDate = time
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.selectDate = time;
|
|
|
|
|
this.selectDate = time
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.year = new Date(time).getFullYear();
|
|
|
|
|
this.month = new Date(time).getMonth() + 1;
|
|
|
|
|
this.day = new Date(time).getDate();
|
|
|
|
|
this.year = new Date(time).getFullYear()
|
|
|
|
|
this.month = new Date(time).getMonth() + 1
|
|
|
|
|
this.day = new Date(time).getDate()
|
|
|
|
|
// console.log(this.selectMinute);
|
|
|
|
|
// console.log(this.year, "--------", this.month, "--------", this.day);
|
|
|
|
|
this.$emit(
|
|
|
|
|
"update:datetime",
|
|
|
|
|
new Date(
|
|
|
|
|
this.selectDate +
|
|
|
|
|
this.selectHour * 3600000 +
|
|
|
|
|
+this.selectMinute * 60000
|
|
|
|
|
).format("yyyy-MM-dd hh:mm")
|
|
|
|
|
);
|
|
|
|
|
this.$emit('update:datetime', new Date(this.selectDate + this.selectHour * 3600000 + +this.selectMinute * 60000).format('yyyy-MM-dd hh:mm'))
|
|
|
|
|
// let data12 = this.getabandonDate(new Date("2022-03-25").getTime());
|
|
|
|
|
// console.dir(this.getabandonDate);
|
|
|
|
|
// console.log(data12);
|
|
|
|
|
var selDate = new Date(time);
|
|
|
|
|
this.initHours(`${selDate.getFullYear()}-${selDate.getMonth() < 10 ? ('0' + (selDate.getMonth() + 1)) : (selDate.getMonth() + 1)}-${selDate.getDate() < 10 ? ('0' + selDate.getDate()) : selDate.getDate()}`);
|
|
|
|
|
var selDate = new Date(time)
|
|
|
|
|
this.initHours(`${selDate.getFullYear()}-${selDate.getMonth() < 10 ? '0' + (selDate.getMonth() + 1) : selDate.getMonth() + 1}-${selDate.getDate() < 10 ? '0' + selDate.getDate() : selDate.getDate()}`)
|
|
|
|
|
},
|
|
|
|
|
getabandonDate(date) {
|
|
|
|
|
// 禁用日期的回调
|
|
|
|
|
let day = new Date(date).getMonth() + "" + new Date(date).getDate();
|
|
|
|
|
let day = new Date(date).getMonth() + '' + new Date(date).getDate()
|
|
|
|
|
let value = this.abandonDate.some((item) => {
|
|
|
|
|
let day1 = new Date(item).getMonth() + "" + new Date(item).getDate();
|
|
|
|
|
return day1 === day;
|
|
|
|
|
});
|
|
|
|
|
return value;
|
|
|
|
|
let day1 = new Date(item).getMonth() + '' + new Date(item).getDate()
|
|
|
|
|
return day1 === day
|
|
|
|
|
})
|
|
|
|
|
return value
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getMonthDay();
|
|
|
|
|
this.getMonthDay()
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
@color: #ff4400;
|
|
|
|
|
@ -605,7 +535,7 @@ export default {
|
|
|
|
|
cursor: default;
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: "";
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
