回答編集履歴
3
テキスト修正
answer
CHANGED
|
@@ -106,4 +106,4 @@
|
|
|
106
106
|
|
|
107
107
|
このサンプルでは、 開始時刻、終了時刻、いずれを変更した場合にも、開始時刻が終了時刻を越えていたら開始時刻を終了時刻の１５分前に変更します。また、 `change` コールバックに渡される引数`time` は使用しませんでした。
|
|
108
108
|
|
|
109
|
-
上記のように、[Moment.js](https://momentjs.com/) を使うと、ある時刻（日時）がある時刻（日時）の後であることの判定に、
|
|
109
|
+
上記のように、[Moment.js](https://momentjs.com/) を使うと、ある時刻（日時）がある時刻（日時）の後であることの判定に、 [isAfter](https://momentjs.com/docs/#/query/is-after/) というような、より自然な名前のメソッドで比較することができます。
|
2
テキスト修正
answer
CHANGED
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
$(".timepicker").timepicker({
|
|
87
87
|
timeFormat: 'HH:mm',
|
|
88
88
|
interval: 15,
|
|
89
|
-
minTime: '
|
|
89
|
+
minTime: '08:30',
|
|
90
|
-
maxTime: '19:
|
|
90
|
+
maxTime: '19:00',
|
|
91
91
|
dynamic: false,
|
|
92
92
|
dropdown: true,
|
|
93
93
|
scrollbar: true,
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
});
|
|
103
103
|
```
|
|
104
104
|
|
|
105
|
-
- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/j9ntco13/
|
|
105
|
+
- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/j9ntco13/4/](https://jsfiddle.net/jun68ykt/j9ntco13/4/)
|
|
106
106
|
|
|
107
107
|
このサンプルでは、 開始時刻、終了時刻、いずれを変更した場合にも、開始時刻が終了時刻を越えていたら開始時刻を終了時刻の１５分前に変更します。また、 `change` コールバックに渡される引数`time` は使用しませんでした。
|
|
108
108
|
|
1
テキスト修正
answer
CHANGED
|
@@ -69,4 +69,41 @@
|
|
|
69
69
|
|
|
70
70
|
|
|
71
71
|
|
|
72
|
-
以上、参考になれば幸いです。
|
|
72
|
+
以上、参考になれば幸いです。
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
### 追記
|
|
76
|
+
|
|
77
|
+
上記で説明した [Moment.js](https://momentjs.com/) を使って、開始時刻と終了時刻の入力に `timepicker` を使い、開始時刻が終了時刻を越えるような選択をした場合に、開始時刻を終了時刻の15分前に修正するサンプルを作成しました。
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
開始時刻：<input class="timepicker start" />
|
|
81
|
+
〜
|
|
82
|
+
終了時刻：<input class="timepicker end" />
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
```javascript
|
|
86
|
+
$(".timepicker").timepicker({
|
|
87
|
+
timeFormat: 'HH:mm',
|
|
88
|
+
interval: 15,
|
|
89
|
+
minTime: '8.3',
|
|
90
|
+
maxTime: '19:00pm',
|
|
91
|
+
dynamic: false,
|
|
92
|
+
dropdown: true,
|
|
93
|
+
scrollbar: true,
|
|
94
|
+
|
|
95
|
+
change: function(time) {
|
|
96
|
+
const start = moment($('.start').val(), 'HH:mm');
|
|
97
|
+
const end = moment($('.end').val(), 'HH:mm');
|
|
98
|
+
if (start.isAfter(end)) {
|
|
99
|
+
$('.start').val(end.subtract(15, 'minutes').format('HH:mm'));
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/j9ntco13/2/](https://jsfiddle.net/jun68ykt/j9ntco13/2/)
|
|
106
|
+
|
|
107
|
+
このサンプルでは、 開始時刻、終了時刻、いずれを変更した場合にも、開始時刻が終了時刻を越えていたら開始時刻を終了時刻の１５分前に変更します。また、 `change` コールバックに渡される引数`time` は使用しませんでした。
|
|
108
|
+
|
|
109
|
+
上記のように、[Moment.js](https://momentjs.com/) を使うと、ある時刻（日時）がある時刻（日時）の後であることの判定に、 `isAfter` という、より自然な名前のメソッドで比較することができます。
|