こんにちは
timepicker
を初期化するときに与えるchange
コールバックの引数 time
には、Dateオブジェクトが入ってきます。これを踏まえてご質問の主旨としては、
- Dateオブジェクトである
time
で与えられる時刻に 15分を加えた時刻を求めて、さらに表示形式の文字列に変換するにはどうしたらいいか?
ということかなと思われました。以下、これに対する回答になります。
与えられた時刻に何らかの時間を加えたり引いたりしたいというときは、Moment.js の add やsubtractを使うとすっきり書けます。また、formatを使えば様々な形式の文字列へ変換できます。
例えば、Dateオブジェクトtime
で与えられる時刻に 15分を加えた時刻を HH:mm
形式の文字列にしたいときは以下のようにすれば得られます。
javascript
1moment(time).add(15, 'minutes').format('HH:mm')
サンプルを挙げておきます。
html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>Q193894</title>
6 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
7 <script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
8 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
9 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
10 <style>
11 input, div { font-size: 16pt; }
12 span { color: red; }
13 </style>
14 <script>
15 $(function(){
16
17 $("#timepicker").timepicker({
18 timeFormat: 'HH:mm',
19 interval: 15,
20 minTime: '8.3',
21 maxTime: '19:00pm',
22 dynamic: false,
23 dropdown: true,
24 scrollbar: true,
25
26 change: function(time) {
27 $('#after15min').text(moment(time).add(15, 'minutes').format('HH:mm'));
28 $('#before30min').text(moment(time).subtract(30, 'minutes').format('HH:mm'));
29 $('#after1andAHalfhours').text(moment(time).add(1.5, 'hours').format('HH:mm'));
30 }
31 });
32
33 });
34 </script>
35</head>
36<body>
37 <input id='timepicker' />
38 <ul>
39 <li>15分後: <span id="after15min" /></li>
40 <li>30分前: <span id="before30min" /></li>
41 <li>1.5時間後: <span id="after1andAHalfhours" /></li>
42 </ul>
43</body>
44</html>
上記のサンプルでは、timepicker
から時刻を選ぶと、その時刻に対して、15分後、30分前、1.5時間(90分)後の時刻を求めて HH:mm
形式の文字列として、以下のように表示されます。
以上、参考になれば幸いです。
追記
上記で説明した Moment.js を使って、開始時刻と終了時刻の入力に timepicker
を使い、開始時刻が終了時刻を越えるような選択をした場合に、開始時刻を終了時刻の15分前に修正するサンプルを作成しました。
html
1開始時刻:<input class="timepicker start" />
2〜
3終了時刻:<input class="timepicker end" />
javascript
1 $(".timepicker").timepicker({
2 timeFormat: 'HH:mm',
3 interval: 15,
4 minTime: '08:30',
5 maxTime: '19:00',
6 dynamic: false,
7 dropdown: true,
8 scrollbar: true,
9
10 change: function(time) {
11 const start = moment($('.start').val(), 'HH:mm');
12 const end = moment($('.end').val(), 'HH:mm');
13 if (start.isAfter(end)) {
14 $('.start').val(end.subtract(15, 'minutes').format('HH:mm'));
15 }
16 }
17 });
このサンプルでは、 開始時刻、終了時刻、いずれを変更した場合にも、開始時刻が終了時刻を越えていたら開始時刻を終了時刻の15分前に変更します。また、 change
コールバックに渡される引数time
は使用しませんでした。
上記のように、Moment.js を使うと、ある時刻(日時)がある時刻(日時)の後であることの判定に、 isAfter というような、より自然な名前のメソッドで比較することができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/09 07:49
2019/06/09 08:06
2019/06/09 12:37 編集
2019/06/09 09:20
2019/06/09 09:33 編集
2019/06/09 09:56 編集
2019/06/09 09:41
2019/06/09 11:04
2019/06/09 12:05
2019/06/09 12:50