マウスで時刻を入力する

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

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

このサンプルは、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();