[ sample ]
Opera8.5 ok Firefox 2.0.0.9 ok ie 6 ok Safari 3.0.3 ok
[ update ]
ふと、<hoge value="YYYY/MM/DD" />も試してみたら使えてしまいました。
どっちにしたらよいかなぁ、、、。
こうです。
<input class="jquery-calendear" type="text"><jquery value="YYYY/MM/DD" /> <input class="jquery-calendear" type="text"> <input class="jquery-calendear" type="text"><jquery value="YY年MM月DD日" /> <input class="jquery-calendear" type="text"><jquery value="YYYY-MM-DD(W)" />
先日の
2007-11-12-1 日付フォーマットの指定方法
に引き続き、実際のコードの書き方を考えてみました。旧版はINPUT要素のインラインにonclickイベントを書いてそこに書いた関数の引数で渡しましたが、今度は（できればJSとHTMLを切り離したいので）インラインのonclickイベントをなるべく使いたくありません。
でも、INPUT要素にこれといった使えそうな属性もなさそうです。たとえば、titleは目的が違いますし、
value値に書くのも...ですし(^^; 、別途、hidden要素を作るのも冗長な気がしますし、
それより送信時などに副作用が出るのはまずいです。
で、どう書くか？
こうです。
<input class="jquery-calendear" type="text"><!--YYYY/MM/DD--> <input class="jquery-calendear" type="text"> <input class="jquery-calendear" type="text"><!--YY年MM月DD日--> <input class="jquery-calendear" type="text"><!--YYYY-MM-DD(W)-->ポイントは、INPUT要素の直後にスペースも改行も入れずに、たとえば、<!--YYYY/MM/DD-->と書きます。クオート「"」や「'」も使いません。
$(INPUT要素).get(0).nextSibling.nodeValue
var ex= jQuery.extend({calendar:{date:{...でコピーした分がすべてjQueryオブジェクト直下に露出して行儀が悪いのでとりあえず jQuery.extend($.fn.calendar,{{date:{...でfnへ閉じ込めておきました。$.fn内に多少分散露出していた分f^^;も整理。
カレンダー出力用のBOX DIVである <div id='jquery-calendar-box'></div>は、デフォルトでは自動出力されてドラッグモードになります。でもこれを、もし、あえて、HTML内の好きな場所に置くと、自動的にインラインモードとなり、ドラッグできなくなります。また、クリック後にもカレンダーは消えません。
今日の日付と今月をCSSで修飾できます。
2007-11-11 日付フォーマットの変換を今までのcase文から、replace文に変更。これで劇的にフレキシブルになります。
デフォルト設定ならクラス指定 <input class="jquery-calendear" type="text"> だけで、jsに触らずに使えるようにしてみました。
カレンダー出現時の位置をクリック場所からの相対位置で指定できます。