問題
フォームの時間入力を見やすく使いやすい選択形式にするには？
解決策
「Wickedpicker」を使用する。
テーブルの項目が多い時に見やすくする。
フォームで時間を入力する際、時、分と入力またはセレクトボタン等で選択しようとすると、見づらくて面倒な印象を与えてしまいます。
今回は【Wickedpicker】を使って、フォームの時間入力を見やすく使いやすい選択形式にする方法をご紹介します。
DEMOはこちら
jQueryライブラリ「Wickedpicker」を使用します。
時間入力を見やすく使いやすい選択形式にするには、jQueryライブラリ「Wickedpicker」を使用します。
まず「Wickedpicker」を、CDNを利用して読み込みます。
その際、jQueryも合わせて読み込みます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wickedpicker@0.4.3/dist/wickedpicker.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wickedpicker@0.4.3/dist/wickedpicker.min.js"></script>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>jQueryライブラリ「Wickedpicker」の設定方法はこちら
- jQueryライブラリ「Wickedpicker」は「$(要素のセレクタ).wickedpicker();」で実行できます。
$('form .input-text.time').each(function(){
$(this).wickedpicker({
twentyFour: true, // 24時間形式を表示します。デフォルトはfalseです。
title: '時間入力', // Wickedpickerのタイトルです。
minutesInterval: 5, // 選択する時間の分ごとの間隔を設定します。デフォルトは1です。
});
});
コメント