<template>
<div>
<div class="active-item">
<div class="active-title">
<span>*</span>
開始時間:
</div>
<div class="active-value">
</el-date-picker>
<el-date-picker
v-model="startTime"
type="datetime"
:picker-options="{
disabledDate: (time) => {
return dataTime.startTimeData(time)
},
selectableRange: this.startTimeRange,
}"
:default-time="defaultTime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="開始時間"
></el-date-picker>
</div>
</div>
<div class="active-item">
<div class="active-title">
終了時間:
</div>
<div class="active-value">
<el-date-picker
v-model="endTime"
type="datetime"
:picker-options="{
disabledDate: (time) => {
return dataTime.endTimeData(time)
},
selectableRange: this.endTimeRange,
}"
:default-time="defaultTime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="エンド・タイム"
></el-date-picker>
</div>
</div>
</div>
</template>
data() {
return {
startTime: "",
endTime: "",
dataTime: {
// 開始時間範囲制限
startTimeData: (time) => {
if (this.endTime != "") {
return time.getTime() < Date.now()- 8.64e7 || time.getTime() < this.endTime;
} else {
return time.getTime() < Date.now() - 8.64e7;
}
},
// 終了時間範囲制限
endTimeData: (time) => {
return (
time.getTime() < this.startTime ||
time.getTime() < Date.now() - 8.64e7
);
},
},
};
},
watch: {
startTime: {
handler(newValue, oldValue) {
if (newValue) {
let nowDate = this.format(new Date(), "-");
let dt = nowDate.split(" ");
let st = "";
if (newValue.split(" ")[0] == dt[0]) {
// それは今日、この瞬間の時間、分、秒を始めるために選ばれた時間だ。
st = dt[1];
} else {
// 明日午前0時から
st = "";
}
this.startTimeRange = st + " - ";
//例えば、今この瞬間の時間が今日であれば、選択された時間範囲は以下のようになる。
//そうでなければ:
}
},
},
endTime: {
handler(newValue, oldValue) {
if (newValue) {
let zt = this.startTime.split(" "); //開始日
let st = "";
//開始日と終了日の両方に同じ日を選択した場合
if (newValue.split(" ")[0] == zt[0]) {
st = zt[1];
} else {
st = "";
}
this.endTimeRange = st + " - ";
}
},
},
},
// 仲直りの時間 0
supplement(nn) {
return (nn = nn < 10 ? "0" + nn : nn);
},
// 時間形式を変換する
format(Date, str) {
var obj = {
Y: Date.getFullYear(),
M: Date.getMonth() + 1,
D: Date.getDate(),
H: Date.getHours(),
Mi: Date.getMinutes(),
S: Date.getSeconds(),
};
// スプライス時間 hh:mm:ss
var time =
" " +
this.supplement(obj.H) +
":" +
this.supplement(obj.Mi) +
":" +
this.supplement(obj.S);
// yyyy-mm-dd
if (str.indexOf("-") > -1) {
return (
obj.Y +
"-" +
this.supplement(obj.M) +
"-" +
this.supplement(obj.D) +
time
);
}
// yyyy/mm/dd
if (str.indexOf("/") > -1) {
return (
obj.Y +
"/" +
this.supplement(obj.M) +
"/" +
this.supplement(obj.D) +
time
);
}
},
computed: {
//最初にクリックするのは、defalutTimeがデフォルトになっているためで、defaultTimeを使って現在時刻の時、分、秒を返すようにする。
defaultTime(){
let data = new Date()
let h = data.getHours()
let m = data.getMinutes()
let s = data.getSeconds()
return h + ":" + m + ":" + s
}
},