回答編集履歴
3
テキスト修正
test
CHANGED
@@ -214,4 +214,4 @@
|
|
214
214
|
|
215
215
|
|
216
216
|
|
217
|
-
上記のように、[Moment.js](https://momentjs.com/) を使うと、ある時刻(日時)がある時刻(日時)の後であることの判定に、
|
217
|
+
上記のように、[Moment.js](https://momentjs.com/) を使うと、ある時刻(日時)がある時刻(日時)の後であることの判定に、 [isAfter](https://momentjs.com/docs/#/query/is-after/) というような、より自然な名前のメソッドで比較することができます。
|
2
テキスト修正
test
CHANGED
@@ -174,9 +174,9 @@
|
|
174
174
|
|
175
175
|
interval: 15,
|
176
176
|
|
177
|
-
minTime: '8
|
177
|
+
minTime: '08:30',
|
178
|
-
|
178
|
+
|
179
|
-
maxTime: '19:00
|
179
|
+
maxTime: '19:00',
|
180
180
|
|
181
181
|
dynamic: false,
|
182
182
|
|
@@ -206,7 +206,7 @@
|
|
206
206
|
|
207
207
|
|
208
208
|
|
209
|
-
- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/j9ntco13/
|
209
|
+
- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/j9ntco13/4/](https://jsfiddle.net/jun68ykt/j9ntco13/4/)
|
210
210
|
|
211
211
|
|
212
212
|
|
1
テキスト修正
test
CHANGED
@@ -141,3 +141,77 @@
|
|
141
141
|
|
142
142
|
|
143
143
|
以上、参考になれば幸いです。
|
144
|
+
|
145
|
+
|
146
|
+
|
147
|
+
|
148
|
+
|
149
|
+
### 追記
|
150
|
+
|
151
|
+
|
152
|
+
|
153
|
+
上記で説明した [Moment.js](https://momentjs.com/) を使って、開始時刻と終了時刻の入力に `timepicker` を使い、開始時刻が終了時刻を越えるような選択をした場合に、開始時刻を終了時刻の15分前に修正するサンプルを作成しました。
|
154
|
+
|
155
|
+
|
156
|
+
|
157
|
+
```html
|
158
|
+
|
159
|
+
開始時刻:<input class="timepicker start" />
|
160
|
+
|
161
|
+
〜
|
162
|
+
|
163
|
+
終了時刻:<input class="timepicker end" />
|
164
|
+
|
165
|
+
```
|
166
|
+
|
167
|
+
|
168
|
+
|
169
|
+
```javascript
|
170
|
+
|
171
|
+
$(".timepicker").timepicker({
|
172
|
+
|
173
|
+
timeFormat: 'HH:mm',
|
174
|
+
|
175
|
+
interval: 15,
|
176
|
+
|
177
|
+
minTime: '8.3',
|
178
|
+
|
179
|
+
maxTime: '19:00pm',
|
180
|
+
|
181
|
+
dynamic: false,
|
182
|
+
|
183
|
+
dropdown: true,
|
184
|
+
|
185
|
+
scrollbar: true,
|
186
|
+
|
187
|
+
|
188
|
+
|
189
|
+
change: function(time) {
|
190
|
+
|
191
|
+
const start = moment($('.start').val(), 'HH:mm');
|
192
|
+
|
193
|
+
const end = moment($('.end').val(), 'HH:mm');
|
194
|
+
|
195
|
+
if (start.isAfter(end)) {
|
196
|
+
|
197
|
+
$('.start').val(end.subtract(15, 'minutes').format('HH:mm'));
|
198
|
+
|
199
|
+
}
|
200
|
+
|
201
|
+
}
|
202
|
+
|
203
|
+
});
|
204
|
+
|
205
|
+
```
|
206
|
+
|
207
|
+
|
208
|
+
|
209
|
+
- **動作確認用 jsFiddle:** [https://jsfiddle.net/jun68ykt/j9ntco13/2/](https://jsfiddle.net/jun68ykt/j9ntco13/2/)
|
210
|
+
|
211
|
+
|
212
|
+
|
213
|
+
このサンプルでは、 開始時刻、終了時刻、いずれを変更した場合にも、開始時刻が終了時刻を越えていたら開始時刻を終了時刻の15分前に変更します。また、 `change` コールバックに渡される引数`time` は使用しませんでした。
|
214
|
+
|
215
|
+
|
216
|
+
|
217
|
+
上記のように、[Moment.js](https://momentjs.com/) を使うと、ある時刻(日時)がある時刻(日時)の後であることの判定に、 `isAfter` という、より自然な名前のメソッドで比較することができます。
|