<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
 }
 },