問題 × 解決策

Wickedpickerでデフォルト(初期値)の時間を設定する方法

問題

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の初期値の設定方法はこちら

  1. 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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight − 5 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧