Opera8.5 ok
Firefox 2.0.0.9 ok
ie 6 ok
Safari 3.0.3 ok

2007-11-14-1-1 日付フォーマットの指定方法 コードの書き方候補(3) attributeで datetype="YYYY/MM/DD"

話の流れ的に、<input class="jquery-calendear" type="text" datetype="YYYY/MM/DD">も試してみました。
これが、簡単ぽい(笑)。一応、どれも、Sfari3,2、IE6,7、Firefox2、Oprea8,9で動作します。

最初のHTMLコメントを利用するのは、仕様を気にする必要が少なそうですが、圧縮をかけたときに、あっさり削除される危険があります(^^;ので、(2)か(3)のどちらかかなぁ。こういう時HTML実装は自由で良いなぁ(笑)。しかも、これは多くのブラウザ（たぶん）で使えます。つまり、多くの利用者を排除せず、便宜を提供します。うんうん。＜JavaScriptな時点で、、、＜手入力を排除してないということで。

<input class="jquery-calendear" type="text" datetype="YYYY/MM/DD">
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text" datetype="YY年MM月DD日">
<input class="jquery-calendear" type="text" datetype="YYYY-MM-DD(W)">

取得方法はこれです。

$(INPUT要素).attr("datetype");

2007-11-14-1-0 日付フォーマットの指定方法 コードの書き方候補(2) <hoge value="日付フォーマット">

ふと、<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)" />

取得方法です。

$(INPUT要素).nextSibling.getAttribute("value")

2007-11-14-1 日付フォーマットの指定方法 コードの書き方候補(1) <!--日付フォーマット-->

先日の 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-->と書きます。クオート「"」や「'」も使いません。

　あと、これはHTMLコメント部ですので、&と<と>は、実体参照&amp; (&#38;)、 &lt; (&#60;)、&gt; (&#62;) で書く必要があるのが少し面倒ですが、、、まぁ、いっか。日付ですし。

コメントが続かなければ、デフォルトのYYYY-MM-DDでフォーマットされます。

ちなみにこのコメントデータをどうやって取得しているかというと、jQueryの.next()メソッドは使えなかったので、普通にDOMのnextSiblingを使いました。一応、nodeTypeを調べてチェックしていますが、もう少し厳密に取得すべきか、少しだけ迷っています。

 $(INPUT要素).nextSibling.nodeValue

2007-11-13-1 オブジェクトの階層を整理

var ex= jQuery.extend({calendar:{date:{...でコピーした分がすべてjQueryオブジェクト直下に露出して行儀が悪いのでとりあえず jQuery.extend($.fn.calendar,{{date:{...でfnへ閉じ込めておきました。$.fn内に多少分散露出していた分f^^;も整理。

2007-11-12-3 インラインモードとドラッグモード

カレンダー出力用のBOX DIVである <div id='jquery-calendar-box'></div>は、デフォルトでは自動出力されてドラッグモードになります。でもこれを、もし、あえて、HTML内の好きな場所に置くと、自動的にインラインモードとなり、ドラッグできなくなります。また、クリック後にもカレンダーは消えません。

2007-11-12-2 今日class="today" と今月 class="curr-m" を追加

今日の日付と今月をCSSで修飾できます。

2007-11-12-1 日付フォーマットの指定方法

2007-11-11 日付フォーマットの変換を今までのcase文から、replace文に変更。これで劇的にフレキシブルになります。

2007-11-11 <input class="jquery-calendear" type="text"> だけで、jsに触らずに起動

デフォルト設定ならクラス指定 <input class="jquery-calendear" type="text"> だけで、jsに触らずに使えるようにしてみました。

2007-11-11 cfg.offset.x と cfg.offset.y を引数cfgのプロパティに追加

カレンダー出現時の位置をクリック場所からの相対位置で指定できます。