JavaScript による HTML でのタイムピッカーの例

Muhammad Muzammil Hussain 2023年10月12日
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: true23 より大きい時間設定を設定します。durationNegative はデフォルトで false であり、その値が true の場合、duration は負になります。

それでも、duration 条件が真の場合にのみ設定に影響します。precision 条件は、precision: 5 のようなシーケンスを分単位で作成します。例えば、precision: 5 では、5 分の差の値を持つ分単位のステップを選択することができます(6:05, 6:10, 6:15, 6:20, …)。precision 条件では、1510153060 の値のみが許可されます。

cancelButton: 'Abbrechen'はモバイル画面専用です。このボタンを使用すると、時間の変更をキャンセルできます。

ここで、function(newVal, oldVal)onAdjust のデフォルト値です。onAdjust 関数は、値が変更されているときに機能します。