datetimepicker

datepickerプラグインでは日付の入力はできるが時刻の入力機能まではサポートされていない。 時刻の入力もできないかと色々と探しているとdatetimepickerがあった。 さっそく使ってみると結構使えるので、忘れないよう記録しておく。

1.jsの組込み
次のように組み込む

<script type="text/javascript" src="http://sample.sakuraweb.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://sample.sakuraweb.com/js/jquery.datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="http://sample.sakuraweb.com/css/jquery.datetimepicker.css">
2.ソースコード 
<style type="text/css">
input[type=text] {
    width:6em;
}
</style>
</HEAD>
<BODY>
<!-- Datepickerを構成する要素(input) -->
<div>
<form action="http://sample.sakuraweb.com/part5/form21.php" method="POST">
 <label for="form">期間</label>
 <input class="day" name="dayfrom" type="text"> <input class="time" name="timefrom" type="text">
 <label for="to">～</label>
 <input class="day" name="dayto" type="text"> <input class="time" name="timeto" type="text">
 <p><input type="reset" value="リセット"> <input type="submit" value="送信"></p>
</form>
</div>

<script type="text/javascript">
// HTML文書の読み込みが完了してから実行
$(function(){
  // Date&Timepickerウィジェットの生成
  $('.day').datetimepicker({
  	lang:'ja',
    timepicker:false,
    format:'Y/m/d'
  });

  $('.time').datetimepicker({
  	lang:'ja',
  	datepicker:false,
  	format:'H:i',
  	step:15
  });
});
</script>

結果