JavaScript++かも日記
【最近の記事】
かも日記
【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いです。実験用ですので、カオス(混沌)をあえて意図したりもしますので、標準やValidとは無縁だったりしますが、何卒、ご了承ください ( _ _ b
Calendar Plugin for jQuery 1.2.1 (2007-11-16-1)
http://jsgt.org/lib/jquery/plugin/calendar/20071116-1.htm
日付タイプdatetypeというより日付テンプレートな機能なので、属性名をdatetmpにしてみました。まぁ、細かいことですけどf^^;
<input class="jquery-calendear" type="text" datetmp="YYYY/MM/DD" /> <input class="jquery-calendear" type="text" /> <input class="jquery-calendear" type="text" datetmp="YYYY年M月のD日はW曜日" style="width:180px" /> <input class="jquery-calendear" type="text" datetmp="YYYY-MM-DD【W】" />
Calendar Plugin for jQuery 1.2.1 (nightly)
http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1-1)
http://jsgt.org/lib/jquery/plugin/calendar/20071114-1-1.htm
話の流れ的に、<input class="jquery-calendear" type="text" datetype="YYYY/MM/DD">も試してみました。
これが、簡単ぽい(笑)。一応、どれも、Sfari3,2、IE6,7、Firefox2、Oprea8,9で動作します。
最初のHTMLコメントを利用する(1)は、仕様を気にする必要が少なそうですが、圧縮をかけたときに、あっさり削除される危険があります(^^;ので、 (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");
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1-0)
http://jsgt.org/lib/jquery/plugin/calendar/20071114-1-0.htm
ふと、<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")
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1)
http://jsgt.org/lib/jquery/plugin/calendar/20071114-1.htm
先日の
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要素).nextSibling.nodeValue
var ex= jQuery.extend({calendar:{date:{...でコピーした分がすべてjQueryオブジェクト直下に露出して行儀が悪いのでとりあえず jQuery.extend($.fn.calendar,{date:{...でfn.calendar 配下へ放り込んでおきました。$.fn内に露出していた分iniとdrawも整理。
Calendar Plugin for jQuery 1.2.1 (2007-11-13-1)
http://jsgt.org/lib/jquery/plugin/calendar/20071113-1.htm
こうなりました。
jQuery.extend({test:1}) //$.test or jQuery.test
と書くと、プロパティ test は、jQueryオブジェクトまたは$ショートカット直下にコピーされて
$.test または jQuery.test となります。ただ、これでは、$直下が散らかるので、
jQuery.extend($.fn.calendar,{test:1}) //$.calendar.fｎ.test or jQuery.fn.calendar.test
という風に$.fn.calendarへコピーすることでcalendarの下にすべてのメンバをまとめてみたということです。とはいえ、calendarという名前は一般的すぎないか？という点は、時間があれば、、、。
ああ、var ex= jQuery.extend({calendar:{date:{...でコピーした分がやはり、行儀が悪いかなぁ、、、。すべて fnへ閉じ込めるべき？
あと、jQuery自体がグローバルへ露出しているのは、$とjQueryだけなんですけれど、$.fnへいろいろなプラグインを流し込めば、それが衝突することはあると思うので、将来のために少し気を遣う必要もある？ない？
Calendar Plugin for jQuery 1.2.1 (2007-11-12-2-e)
http://jsgt.org/lib/jquery/plugin/calendar/20071112-e.htm
<input class="jquery-calendear" type="text"> <input class="jquery-calendear" type="text"> <div id='jquery-calendar-box'></div>
Calendar Plugin for jQuery 1.2.1 (2007-11-12-2)
http://jsgt.org/lib/jquery/plugin/calendar/20071112-2.htm
まだ、起動メソッドの書式などを決めていませんがf^^;、とりあえず、デフォルト設定で良ければ、クラス指定 <input class="jquery-calendear" type="text"> だけで、jsに触らずに使えるようにしてみました。
<style> .testclass2 { color:red } </style>
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text">
<input class="jquery-calendear testclass2" type="text">
とりあえずカレンダープラグインがあるので中身を見てみるといいかも。
http://jquery.com/plugins/project/calendar-jquery
あ、この人、たぶん、英語外の人ですね。私と同じで、navigator.language.substr(0,2)とnavigator.userLanguage;を最初に検査してます(^^;
でも、同じカレンダーでも作る人によって立ち位置も力点も違って面白いです。
名前の件でみると、Elementをあえて(?)グローバルに置いているのが少し気になります。これだとせっかくjQueryでprototypeとのコンフリクトを回避してもこれが衝突してしまうような。なんとなく、もったいない。
ところで、この言語分岐が、
lng['en'] = {
month : ['January', 'February', 'March', 'April', 'May', 'June', 'July'
, 'August', 'September', 'October', 'November', 'December'],
day : ['S','M','T','W','T','F','S'],
first: 0 // Sunday
};
lng['es'] = {
month : ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto'
,'Septiembre','Octubre','Noviembre','Diciembre'],
day : ['L','M','M','J','V','S','D'],
first: 1 // First day of week => Monday
};
こうなってますけど、これバリエーションを列挙するとかなりになるんですよね。プラグインのデータ集みたいな発展もありうるかも(笑;
久しぶりにコードにどっぷり浸ってるので少し幸せな今日この頃です(^^
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 |
![[Valid RSS]](http://jsgt.org/mt/archives/01/valid-rss.png "Validate my RSS feed"){kind=small}
