JavaScript・PHPのサンプルやWordPressのテーマ・無料フォント、アフィリエイトやブログの運営方法等の紹介

JavaScript

カレンダーで日付の入力補助をする

フォーム等で日付を選択する場合に、カレンダーから選択することが出来るようにするJavaScriptです。カレンダーから選択出来る事で、ユーザーは曜日等が分かりやすくなる利点や、その他にも日付の間違い(2月31日は存在しない)等を減らすことが出来るようになります。

次世代のHTML(HTML5)からは、標準でHTMLのタグでカレンダーの機能を実現出来るようですが、HTML5が普及するまでにはまだ時間が掛かると思いますので、JavaScriptによるカレンダーで日付の入力補助をする機能は必要になると思います。

ご利用について

個人利用の場合はフリーでご自由にお使いいただけます。
法人・商用利用の場合はWEB上手(www.web-jozu.com)へのリンクを貼ってください。
個人利用の場合でもリンクを貼っていただけると、幸いです。

法人・商用利用の方でリンクを貼っていただけない場合や、カレンダー内のリンクをはずす場合はシェアウェア料金をお支払いいただくことで、ご自由にお使いいただけます。料金は以下のページよりお支払いいただけます。
※著作権は放棄していません。詳細はご利用規定をご覧ください。

【料金】 ¥1,000 (税込)
シェアウェアのお支払いはこちら ( クレジット決済のみ )

ダウンロードおよび設置方法

ダウンロードカレンダーで日付の入力補助の必要ファイルのダウンロード (4KB)
ダウンロード
   ※ご利用規定に同意出来る方のみご利用ください。


(サンプル1)  年 月 日 カレンダーから選択

(サンプル2)  年  月  日  カレンダーから選択

(サンプル3)  年  月  日  カレンダーから選択

  • ディレクトリhome
  • テキストindex.html (カレンダー日付入力補助設置ページ)
  • ディレクトリcalen_input
  • テキストcalendar.css
  • テキストcalendar.js
  • 画像(ico_calen.gif)カレンダー画像を使用する場合

<html>
<head>
<title>カレンダー日付入力補助設置ページ</title>

<link rel="stylesheet" type="text/css" href="calen_input/calendar.css">

</head>
<body>

<span style="display:block; float:left;">フォーム</span>
<span style="position:relative; display:block; float:left;">
<a href="javascript:viewCalen(theMonth); void(0);">カレンダーから選択</a>
<span id="calenArea"></span>
</span><br style="clear:both;" />

<script type="text/javascript" src="calen_input/calendar.js"></script>

</body>
</html>

更新履歴

2011/03/05  ver1.0.2 ・国民の祝日の不具合を修正しました。
・カレンダーからマウスが離れてから、
 カレンダーが閉じるまでの時間を設定出来るようにしました。
2009/05/02  ver1.0.1 ・カレンダーを前後何ヶ月表示するかを指定出来るようにしました。
2008/12/03  ver1.0.0 ・土、日、祝日の文字の色がグレーになっていたので、
 「calendar.css」を修正しました。
2008/11/30  ver1.0.0 ・新規公開
Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

このサイトについて

JavaScript・PHPのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com