問題
Wickedpickerを使った時、デフォルト（初期値）で現在の時間が最初に設定されてしまう…。
解決策
Wickedpickerのオプションで「now: 初期値として設定したい時間」を設定する。
Wickedpickerで最初の時間を変更する。
Wickedpickerは時間入力を補助してくれるjQueryライブラリですが、デフォルトですと現在の時間が最初に設定されてしまいます。
なので今回はWickedpickerでデフォルト（初期値）の時間を設定する方法をご紹介します。
Wickedpickerの設定方法は以下の記事で紹介していますので、ぜひご覧ください。
フォームの時間入力を見やすく使いやすい選択形式にする方法【Wickedpicker】
DEMOはこちら
HTMLはこちら
普通に入力フィールドを用意します。
<form method="post" action="">
<p>
<label for="time">時間を選択</label><br>
<input id="time" type="text" name="time" class="input-text time"><br>
※入力欄をクリックして時間を選択してください。
</p>
</form>Wickedpickerの初期値の設定方法はこちら
- Wickedpickerのオプションで「now: 初期値として設定したい時間」を設定することで、最初の時間を意図した時間に変更することができます。
$('form .input-text.time').each(function(){
var val = $(this).val();
if( !val.length ){
val = "00:00"; // 初期値として設定したい時間
}
$(this).wickedpicker({
now: val, // 先ほど用意した時間の値を初期値として設定
twentyFour: true,
title: '時間入力',
minutesInterval: 5,
});
});参照
【Set initial value with wickedpicker （wickedpicker で初期値を設定する） – 箱庭のエンジニア】
https://one-person.hatenablog.jp/entry/2019/01/07/011304
コメント