blog

vue +要素の日付と時刻のコントロールは、この瞬間以降にしか選択できない。

``` ``` ``` data() { return { "", endTime: "", dataTime: { // 開始時間の範囲制限 (ti...

Jul 28, 2020 · 3 min. read
シェア
<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 } },
Read next

カスタム電卓のVue実装

シンプルなコンピュータのVue実装

Jul 28, 2020 · 2 min read