Basic

現在時刻を基準に表示

選択不可の時間帯を設定

時間帯の間隔を設定(左:10分おき、右:30分おき)

 

時間の表示形式を設定

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.timepicker.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.timepicker.min.js"></script>
<script>
    $(window).load(function(){
		$('#timepickerDemo01').timepicker();
		$('#timepickerDemo02').timepicker({ 'scrollDefaultNow': true });
		$('#timepickerDemo03').timepicker({
			'disableTimeRanges': [
				['1am', '2am'],
				['3am', '4:01am']
			]
		});
		$('#timepickerDemo04').timepicker({ 'step': 10 });
		$('#timepickerDemo05').timepicker({ 'step': 30 });
		$('#timepickerDemo06').timepicker({ 'timeFormat': 'H:i:s' });
    });
</script>
<div class="timepicker-box">
	<p class="title">Basic</p>
	<p><input id="timepickerDemo01" type="text" class="time" /></p>
</div>

<div class="timepicker-box">
	<p class="title">現在時刻を基準に表示</p>
	<p><input id="timepickerDemo02" type="text" class="time" /></p>
</div>

<div class="timepicker-box">
	<p class="title">選択不可の時間帯を設定</p>
	<p><input id="timepickerDemo03" type="text" class="time" /></p>
</div>

<div class="timepicker-box">
	<p class="title">時間帯の間隔を設定(左:10分おき、右:30分おき)</p>
	<p><input id="timepickerDemo04" type="text" class="time" /> <input id="timepickerDemo05" type="text" class="time" /></p>
</div>

<div class="timepicker-box">
	<p class="title">時間の表示形式を設定</p>
	<p><input id="timepickerDemo06" type="text" class="time" /></p>
</div>

timepickerについて

timepickerは、時間の入力を簡単にしてくれるプラグインです
現在時刻のセット、コールバック、などなど時間入力専門なので細かいカスタマイズができます
Githubにも使用方法の説明があるので参考にして下さい
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • ClearableTextField

    ClearableTextField

    入力フォームに文字を入力すると文字削除用のボタンを表示

  • Selecter

    Selecter

    セレクトボックスの見た目、使い勝手を向上してくれる

  • Stepper

    Stepper

    マウス操作で数字をカウントアップ、ダウンで入力させる

  • iCheck

    iCheck

    チェックボックス、ラジオボタンのなどの見た目をPC,スマホ、クロスブラウザで統一できる

  • CharacterCount

    CharacterCount

    入力フォームに文字数制限を設定し、入力可能文字数をリアルタイムで表示する