JavaScript による HTML でのタイムピッカーの例
JavaScript Time Picker を使用すると、エンドユーザーは値を直接入力するかポップアップから時間を選択できます。時間は複数の形式で存在する可能性があり、必要な形式の種類によって異なります。
HTML での JavaScript タイムピッカーの例
ここでは、JavaScript の clockTimePicker() メソッドの例を見ることができます。これは、ユーザーがポップアップメニューから時間値を選択するのに役立ちます。このメソッドは、jQuery ライブラリの助けを借りて時間オプションを表示します。
ここで最初のステップに、次の CDN を含めます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-date-time-picker@2.3.0/dist/css/mdDateTimePicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-clock-timepicker@2.5.0/jquery-clock-timepicker.min.js"></script>
次の HTML ソースコードには CDN が含まれており、id="timePicker"を指定してタグ <input> のフォーム要素を作成し、$('#timePicker').clockTimePicker() を script タグに同じ入力 ID。
<!doctype html>
<html lang="en">
<head>
<title>Time Picker</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/md-date-time-picker@2.3.0/dist/css/mdDateTimePicker.min.css">
</head>
<body>
<form>
<input type="text" id="timePicker">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-clock-timepicker@2.5.0/jquery-clock-timepicker.min.js"></script>
<script>
$('#timePicker').clockTimePicker();
</script>
</body>
</html>
上記の HTML ページのソースでは、エンドユーザーから整数値を取得するための単純な入力フォームタイプの時刻を確認できます。オブジェクトにオプションを指定することで、さらにカスタマイズするためのプロパティを追加できます。
$('#timePicker').clockTimePicker({
duration: true,
durationNegative: true,
precision: 5,
i18n: {cancelButton: 'Abbrechen'},
onAdjust: function(newVal, oldVal) {
//...
}
});
ここで duration: true、23 より大きい時間設定を設定します。durationNegative はデフォルトで false であり、その値が true の場合、duration は負になります。
それでも、duration 条件が真の場合にのみ設定に影響します。precision 条件は、precision: 5 のようなシーケンスを分単位で作成します。例えば、precision: 5 では、5 分の差の値を持つ分単位のステップを選択することができます（6:05, 6:10, 6:15, 6:20, …）。precision 条件では、1、5、10、15、30、60 の値のみが許可されます。
cancelButton: 'Abbrechen'はモバイル画面専用です。このボタンを使用すると、時間の変更をキャンセルできます。
ここで、function(newVal, oldVal) は onAdjust のデフォルト値です。onAdjust 関数は、値が変更されているときに機能します。