jquery.timepicker.jsを利用して最大値を23:59にする方法

Question

jquery.timepicker.jsを利用して、stepは30分毎にして、最大値を23:59にする方法をご教示下さい。
(24:00を最大値として選択すると「The specified value "24:00" does not conform to the required format. The format is "HH:mm", "HH:mm:ss" or "HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999.」となってしまいます)
もしくは24:00が選択された際には強制的に23:59に書き換える方法でも問題御座いません。
ご教示下さい。

			$('#end_time').timepicker({
				timeFormat: 'H:i',
				maxTime:'24:00',
				show2400: true,
			});

<input type="time" id="end_time">

Answer 1

自信ないですがコメントしてみます。間違い見落としがあったらご容赦ください。

timepickerのオプションにshow2400はありますがおそらくtype="text"が前提ではないかと思いました。エラーはtimepickerでもjQueryでもなく、ブラウザー自体から発せられているように見えました。(Windows 10 Chrome 64bit 66.0.3359.181)。

思いついた対処は

案1 type="text"にする
当然ながら24:00がそのまま入力できます。timeではなくなる点が厳しいのかなと思います。

案2 timepickerのshow2400はあきらめて23:30までしか選べないようにする
要件を満たさないですね・・・

案3 selectedTimeイベントで24:00が選ばれたことを知る
selectTimeイベントの動きを見ると24:00が選択された場合val()の内容が空文字列になるようでした。ただの実験レベルでしかなく互換性上の問題等があるかどうかわかりません。が、とりあえず自分の環境ではたまたま期待通りになるように思えました。

const elm = $('#end_time')
elm.on('selectTime', () => {
  if (!elm.val()) {
    elm.val('23:59')
  }
})

なおselectTimeイベントはpulldownで選んだ時刻が設定された直後、changeの発火直前に発火するようです。pulldownを選ばない限りは発火しないと思います。

Comments

[k.t.est]

ご回答有難う御座いました。仰られる通りchangeイベントが使用できず困っておりました。無事思っていた通りの挙動を示すことが出来ました！

Answer 2

changeTimeイベントで変更時のイベントが拾えそうなので、その時のval()を取得して24:00だったら23:59にval()を調整する、とかですかね。
（未検証につき、まずはやってみてください）

• jquery.timepicker

Comments

[k.t.est]

ご回答ありがとう御座いました！今回は別の方をベストアンサーとさせて頂きました。

[m.ts10806]

解決できたようでなによりです。