teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問input type="date"でblurを使ったとき、javascriptで2回目実行以降で日付の差がうまく取得できない

編集履歴

質問編集履歴

6

修正

2021/06/16 06:32

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  <input class="form-control-input" type="date" v-bind:value="startDate" v-on:blur="onDateChanged(1, $event.target.value)" />
18
18
 
19
- <label class="col-form-label" for="～">～</label>
19
+ <label class="col-form-label">～</label>
20
20
 
21
21
  <input class="form-control-input" type="date" v-bind:value="endDate" v-on:blur="onDateChanged(2, $event.target.value)" />
22
22
 

5

修正

2021/06/16 06:32

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,11 +14,11 @@
14
14
 
15
15
  <label class="col-form-label">登録日: </label>
16
16
 
17
- <input class="form-control-input" type="date" style="margin-left: 10px!important;" v-bind:value="startDate" v-on:blur="onDateChanged(1, $event.target.value)" min="1900-01-01" max="3000-12-31" />
17
+ <input class="form-control-input" type="date" v-bind:value="startDate" v-on:blur="onDateChanged(1, $event.target.value)" />
18
18
 
19
19
  <label class="col-form-label" for="～">～</label>
20
20
 
21
- <input class="form-control-input" type="date" v-bind:value="endDate" v-on:blur="onDateChanged(2, $event.target.value)" min="1900-01-01" max="3000-12-31" />
21
+ <input class="form-control-input" type="date" v-bind:value="endDate" v-on:blur="onDateChanged(2, $event.target.value)" />
22
22
 
23
23
  </div>
24
24
 

4

修正

2021/06/16 06:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,28 @@
1
- input type="date"でblurを使ったとき、javascriptで2回目実行以降で日付の差がうまく取得できなくて困っています。
1
+ input type="date"でblurを使ったとき、javascriptで2回目実行以降で日付の差が
2
+
3
+ うまく取得できなくて困っています。
4
+
5
+ vue.js3を使用しています。
2
6
 
3
7
  どなたかご教授お願いします。
8
+
9
+
10
+
11
+ ```html
12
+
13
+ <div class="col-12">
14
+
15
+ <label class="col-form-label">登録日: </label>
16
+
17
+ <input class="form-control-input" type="date" style="margin-left: 10px!important;" v-bind:value="startDate" v-on:blur="onDateChanged(1, $event.target.value)" min="1900-01-01" max="3000-12-31" />
18
+
19
+ <label class="col-form-label" for="～">～</label>
20
+
21
+ <input class="form-control-input" type="date" v-bind:value="endDate" v-on:blur="onDateChanged(2, $event.target.value)" min="1900-01-01" max="3000-12-31" />
22
+
23
+ </div>
24
+
25
+ ```
4
26
 
5
27
 
6
28
 

3

修正

2021/06/16 06:30

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,9 +18,9 @@
18
18
 
19
19
  // vueでバインドしているのですが、blurの時にthisで取れなかったので$event.target.valueを使用
20
20
 
21
- // const startDate = luxon.DateTime.fromISO(value);
21
+ // const startDate = luxon.DateTime.fromISO(value); // または this.startDate
22
22
 
23
- // const endDate = luxon.DateTime.fromISO(this.endDate);
23
+ // const endDate = luxon.DateTime.fromISO(this.endDate); // または value
24
24
 
25
25
 
26
26
 

2

修正

2021/06/16 06:27

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- // 実際のblurでこのコードを発生させ、開始日、終了日期間の反転をしないようにしています。
17
+ // 実際はblurでこのコードを発生させ、開始日、終了日期間の反転をしないようにしています。
18
18
 
19
19
  // vueでバインドしているのですが、blurの時にthisで取れなかったので$event.target.valueを使用
20
20
 

1

修正

2021/06/16 06:26

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- javascriptのinput type="date"でblurを使ったとき、2回目以降で日付の差がうまく取得できない
1
+ input type="date"でblurを使ったとき、javascriptで2回目実行以降で日付の差がうまく取得できない
test CHANGED
@@ -1,4 +1,4 @@
1
- javascriptのinput type="date"でblurを使ったとき、2回目以降で日付の差がうまく取得できなくて困っています。
1
+ input type="date"でblurを使ったとき、javascriptで2回目実行以降で日付の差がうまく取得できなくて困っています。
2
2
 
3
3
  どなたかご教授お願いします。
4
4