ホームページ制作会社、サイト制作、その他各種システムの構築、CGI、PHP等のWEBアプリ開発

ホームページ制作・システム構築・DB設計ホームページ制作・システム構築・DB設計
ホームページ制作とWEBシステムの構築、カスタマイズから運用サポートまで。
スペーサー

javascriptを使ったフォーム入力のカレンダー


に関連する記事です。

20110709.gif旅行会社から出発日時をカレンダーから選択できる申し込みフォームを作ってほしいという依頼を受けた。
javascriptを使ったフォーム入力のカレンダーがないかといろいろ探したところ、以下のものが使えそうだった。
http://www.electricprism.com/aeron/calendar/_semantic.html

以下、依頼内容をまとめる。
出発日は本日の一週間目以降から予約でき、毎週月曜日と金曜日しか選択できない。
また、10月以降から年末までは追加で水曜日も予約できる。
販売停止になった日付については、都度設定することができ、その特定日には申し込みができないようにしたい。
来年の一月で売り切りなので、それ以降も申し込みができない。
海外旅行がターゲットのため、休日の設定はなし。料金の加算については以降のページでプログラムが計算すればよい。

といった内容だった。

まずは日本語化
月表示について配列に入っているだけなので、英語表記を日本語表記に変更する。
月、年の表示になっているものを年、月に変更し、配列をいぢって年、月という表示に変更した。
休日の設定ができるプログラムになっており、休日の場合は日付選択できない仕様となっているのだが、それとは逆に設定した日付だけリンクが表示されるようにプログラム改修を施した。
出発できない日の合計より、出発する日の合計の方が少ないので、出発する日を配列に読み込んだ方が(少しでも)軽くなるのではないかと考えた次第である。
こうすることにより、売り切れた日をプログラムから削除するのみで、その日は選択できないこととなる。
CSSとjavascriptが組み合わさって見た目もよく、軽快に動くjavascriptカレンダーだと思う。
独自にカスタマイズしたサンプルはこちら。
http://www.yuta-system.com/CAL/

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
ホームページ制作・システム構築・DB設計
●ユタデザイン
●住所:〒135-0062
東京都江東区東雲2-7-5-3503
ユタデザイン
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+



Valid XHTML 1.0 Transitional スペーサー 正当なCSSです!