JavaScript

ガイド:高橋 登史朗

Ajaxなど、何かと最近騒がれているJavaScriptの最新情報とその活用方法を解説します。

掲示板 取材依頼 問合せ

クロスブラウザを制する

掲載日: 2002年 06月 22日

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

[ 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>

    をペーストして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)のソースです。 
| 次のページ→| シリーズ目次 |



関連用語: SAT /  SAT / 

ガイドメールマガジン
携帯電話のメールアドレスでは登録できません

掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。