JavaScript + Ajax 実践サンプル集 - マウスで時刻を入力する

マウスで時刻を入力する

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのtimeEntry()プラグインを利用して時刻をマウスで選択できるようにします。サンプルが表示されたら２番目の「スピンをカスタマイズ」のスピンにマウスを移動します。ツールチップが表示されますので指示にしたがって操作してください。スピンの真ん中にマウスを移動すると「現在の時刻」と表示されますのでクリックします。するとテキストボックスに現在の時刻が表示されます。時刻の[HH:MM]を増減させるには、スピンの「左のフィールドへ」「右のフィールドへ」をクリックします。「HH」「MM」に位置づけします。そしてスピンの「加算」「減算」をクリックします。これで「HH:MM」が変わります。「AM|PM」も同様の手順で切り替えます。

このサンプルを編集して試してみる

スピンのツールチップをカスタマイズするには、 jquery.timeEntry-ja.jsを書き換えてください。

$("#time1").timeEntry({ 
  spinnerImage: 'jQuery/timeEntry/images/timeEntry.png' });
$("#time2").timeEntry({ 
  spinnerImage: 'jQuery/timeEntry/images/timeEntry5.png' });
$("#time3").timeEntry({ spinnerImage: '' });

$("#time4").timeEntry({ 
  spinnerImage: '', show24Hours: true });
$("#time5").timeEntry({ 
  spinnerImage: 'jQuery/timeEntry/images/timeEntry.png', 
  timeSteps: [1, 15, 0] });
$("#time6").timeEntry({
spinnerImage: 'jQuery/timeEntry/images/timeEntry.png',
  show24Hours: true,
  timeSteps: [1, 15, 0],
  minTime: new Date(0, 0, 0, 9, 0, 0), maxTime: new Date(0, 0, 0, 17, 30, 0)
});
$('.inlineConfig').timeEntry();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Time Entry </title>
  <link href="jQuery/timeEntry/jquery.timeentry.css" rel="stylesheet" type="text/css" />

$(function() {

$("#time1").timeEntry({ spinnerImage: 'jQuery/timeEntry/images/timeEntry.png' });
    $("#time2").timeEntry({ spinnerImage: 'jQuery/timeEntry/images/timeEntry5.png' });
      $("#time3").timeEntry({ spinnerImage: '' });

$("#time4").timeEntry({ spinnerImage: '', show24Hours: true });
      $("#time5").timeEntry({ spinnerImage: 'jQuery/timeEntry/images/timeEntry.png', timeSteps: [1, 15, 0] });
      $("#time6").timeEntry({
      spinnerImage: 'jQuery/timeEntry/images/timeEntry.png',
        show24Hours: true,
        timeSteps: [1, 15, 0],
        minTime: new Date(0, 0, 0, 9, 0, 0), maxTime: new Date(0, 0, 0, 17, 30, 0)
      });
      $('.inlineConfig').timeEntry();

});
  </script>

</head>
<body>
  <input type="text" size="10" id="time1" />
  デフォルトのスピンを使用
  <br />
  <br />
  <input type="text" size="10" id="time2" />
  スピンをカスタマイズ
  <br />
  <br />
  <input type="text" size="10" id="time3" />
  スピンを使用しない
  <br />
  <br />
  <input type="text" size="10" id="time4" />
  時刻を24時間の書式で表示
  <br />
  <br />
  <input type="text" size="10" id="time5" />
  時刻（分）を15単位で増減させる
  <br />
  <br />
  <input type="text" size="10" id="time6" />
  時間を09:00 - 17:30 に制約する
  <br />
  <br />
  <input type="text" size="10" id="time7" class="inlineConfig" 
    time:show24hours="true"
    time:timesteps="[1, 30, 0]" 
    time:appendtext=" (see below)" />
  インラインで各種プロパティを設定する
  <br />
  <br />
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
jquery.timeEntry-ja.js

$(document).ready(function() {
	$.timeEntry.regional['ja'] = {show24Hours: false, separator: ':',
		ampmPrefix: '', ampmNames: ['AM', 'PM'],
		spinnerTexts: ['現在の時刻', '左のフィールドへ移動', '右のフィールドへ移動', '加算(+)', '減算(-)']};
	$.timeEntry.setDefaults($.timeEntry.regional['ja']);
});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* timeEntry styles */
.timeEntry_control {
	vertical-align: middle;
	margin-left: 2px;
}
* html .timeEntry_control { /* IE only */
	margin-top: -4px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/timeEntry/jquery.timeentry.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/timeEntry/jquery.timeentry.js" type="text/javascript"></script>
  <script src="jQuery/timeEntry/jquery.timeentry-ja.js" type="text/javascript"></script>
  <script type="text/javascript">

    $(function() {

      $("#time1").timeEntry({ spinnerImage: 'jQuery/timeEntry/images/timeEntry.png' });
      $("#time2").timeEntry({ spinnerImage: 'jQuery/timeEntry/images/timeEntry5.png' });
      $("#time3").timeEntry({ spinnerImage: '' });

      $("#time4").timeEntry({ spinnerImage: '', show24Hours: true });
      $("#time5").timeEntry({ spinnerImage: 'jQuery/timeEntry/images/timeEntry.png', timeSteps: [1, 15, 0] });
      $("#time6").timeEntry({
      spinnerImage: 'jQuery/timeEntry/images/timeEntry.png',
        show24Hours: true,
        timeSteps: [1, 15, 0],
        minTime: new Date(0, 0, 0, 9, 0, 0), maxTime: new Date(0, 0, 0, 17, 30, 0)
      });
      $('.inlineConfig').timeEntry();

    });
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <input type="text" size="10" id="time1" />
  デフォルトのスピンを使用
  <br />
  <br />
  <input type="text" size="10" id="time2" />
  スピンをカスタマイズ
  <br />
  <br />
  <input type="text" size="10" id="time3" />
  スピンを使用しない
  <br />
  <br />
  <input type="text" size="10" id="time4" />
  時刻を24時間の書式で表示
  <br />
  <br />
  <input type="text" size="10" id="time5" />
  時刻（分）を15単位で増減させる
  <br />
  <br />
  <input type="text" size="10" id="time6" />
  時間を09:00 - 17:30 に制約する
  <br />
  <br />
  <input type="text" size="10" id="time7" class="inlineConfig" 
    time:show24hours="true"
    time:timesteps="[1, 30, 0]" 
    time:appendtext=" (see below)" />
  インラインで各種プロパティを設定する
  <br />
  <br />

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

マウスで時刻を入力する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

マウスで時刻を入力する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!