Javascript関連情報

更新日：2002年06月22日

クロスブラウザ 日付入力用カレンダー

高橋 登史朗 写真

JavaScriptを使った、日付入力用のポップアップカレンダーレイヤーのサンプルスクリプトを紹介します。

[ 20021115 ] update!

*

●インプットフィールドへカーソルを入れるとカレンダーが開く(ドラッグもできます)

受付日:　wrtCalendarLay(this,event)
登録日:　wrtCalendarLay(this,event,'mm月dd日')
実行日:　wrtCalendarLay(this,event,'yyyy/mm/dd[曜]')
入金日:　wrtCalendarLay(this,event,'mm/dd')

日付入力欄へカーソルを入れるとカレンダーレイヤーが現れます。
カレンダーレイヤーの日付をクリックすると自動的に入力欄へ日付が入ります。

●ボタンクリックでカレンダーを開く

作業日:


wrtCalendarLayLay( formElementObject , event , 日付タイプ )
Win n4 n6 moz e4 e5 e6 o6,
Mac n4 n6 moz e4.5 e5 ,
Linux n4 n6 moz
日付入力用カレンダーレイヤーを自動生成します。 

<html>
<head>


     
     ここへ下記の 「カレンダーによる日付入力スクリプト(レイヤー版)」 ソースを張り込むか、または、 
     
    <script src="calendarlay3.js" language="JavaScript"></script> 
     
     をペーストして/gm/gc/24029/file/calendarlay3.jsを読み込む。


</head>
<body>

<form name="calf1">

受付日:<input name="e1" type="text"
              onFocus="wrtCalendarLay(this,event)"><br>

登録日:<input name="e2" type="text"
              onFocus="wrtCalendarLay(this,event,'mm月dd日')"><br>

入金日:<input name="e3" type="text"
              onFocus="wrtCalendarLay(this,event,'yyyy年mm月dd日(曜)')"><br>


<br><br>
作業日:<input name="e4" type="text">
       <input type="button" 
              value="入力用カレンダー"
              onclick="wrtCalendarLay(this.form.e4,event)">　ボタンクリックで表示
</form>

</body>
</html>


* 緑文字が今回の関数(外部.jsファイルにして読み込んでいます)
* 赤文字がこのスクリプトで最初に動作する部分
日付入力用カレンダーを自動生成します。たとえば、日付入力欄へカーソルを入れるとカレンダーレイヤーが開き カレンダーレイヤーの日付をクリックすると自動的に入力欄へ日付が入ります。* このスクリプトのサポートページ 現状n4はMac板で不安定なので、 サブウインドウ版への分岐を推奨します。

機能拡張 : 角田桂一さんによる祝日表示機能を追加したバージョンがここにあります→カレンダーコントロール色々


★次のページはjs外部ファイル(calendarlay3.js)のソースです。　
| 次のページ→| シリーズ目次 |



1 2 3 … 5
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

高橋 登史朗

Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJa…

続きを読む

人気Javascriptランキング

Powered by 価格.com

おすすめ記事

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

おすすめ厳選サイト

季節特集

特集一覧へ

All Aboutスタイルストア

つくり手マーケット

COCOMO ココロのこもった贈り物。

ギフト、引き出物、誕生日プレゼントに

専門家を探せる、相談できる。

All About モバイル

QRコード

All Aboutがケータイで読める！

オススメ記事をメールでチェック

詳細はこちら