jQueryによる日付入力支援(カレンダーがポップアップ)

WEBフォームで日付を入力するテキストボックスに
カレンダーポップアップ を実装したい

今回は jQuery を使ってみました。

まずは、jQueryをダウンロード ( http://jqueryui.com/download )

Datepicker しか使わないので、「Core」と「Datepicker」にだけチェックを入れて、ダウンロードしましょう。

お次は、ダウンロードしたzipファイルを解凍して使うものだけをサーバーにアップ

使用するファイルはcssの１つ

css/ui-lightness/jquery-ui-1.8.23.custom.css

と

画像フォルダの全ファイル

css/ui-lightness/images

と

下記の３つ。jsフォルダまとめて入れて残りのファイルは削除する。

jsフォルダの中の

js/jquery-1.8.0.min.js

js/jquery-ui-1.8.23.custom.min.js

development-bundle/ui/i18n/jquery.ui.datepicker-ja.js

jsフォルダ・cssフォルダ・imagesフォルダをサーバーにアップする
フォルダ構造は環境に合せよう！！

よいよ、実装だ

赤字の部分は、パラメータです。

jQuery UIのDatepickerには多数のパラメータがあります。

詳しくは公式サイト (http://jqueryui.com/demos/datepicker/)の説明を見ようね。

２つのテキストボックスがある場合のサンプルです。
-----------------------------------------------------------------

<head>

</head>

<body>

日付１：<input type="text" id="datepicker">

日付２：<input type="text" id="datepicker2">

<br>

$(function() {

　　　$("#datepicker").datepicker();

　　　$("#datepicker2").datepicker({

firstDay: 1,

changeMonth: true,

changeYear: true,

dateFormat: "yy-mm-dd"

　});

</script>

</body>

-----------------------------------------------------------------

でっぷりんのひとりごと