Hatena::ブログ(Diary)

Cyokodog :: Diary

こちらのブログは更新を停止しております。最新の記事は以下ブログをご覧ください。
www.cyokodog.net

March 16, 2009

Date オブジェクトを拡張する jQuery.exDate.js

更新履歴

2009-03-25
addMonths メソッドでマイナス値を引数にした時の不具合を修正しました。

JavaScript の標準オブジェクトである Date オブジェクトに、各種拡張機能を追加したオブジェクトを返す jQuery プラグインを作ってみました。インスタンス化した Date オブジェクトに独自の拡張メソッドを追加する実装になっているので、Date.prototype の汚染も無く、Date オブジェクト純正メソッドとの併用が可能です。

インスタンスの生成

まず、下記のように記述し Date オブジェクトを生成します。引数を省略した場合は、現在日付時刻の Date オブジェクトが生成されます。

var date = $.exDate();

引数を指定することで任意の日付時刻のオブジェクトを生成できます。デフォルトフォーマットは yyyy/mm/dd です。

var date = $.exDate('2009/01/31');

第2引数にフォーマットを指定することができます。

var date = $.exDate('20090131 10:15:30','yyyymmdd hh:mi:ss');

toChar() メソッド

Date オブジェクト文字列に変換します。

var date = $.exDate('2009/01/31');
alert(date.toChar()); //2009/01/31

指定したフォーマットに変換することができます。

var date = $.exDate('2009/01/31');
alert(date.toChar('yyyy年mm月dd日です')); //2009年01月31日です

toDate() メソッド

日付を変更することができます。引数を省略すると実行時の日付時刻に変更されます。

var date = $.exDate('2009/01/31');
alert(date.toDate().toChar()); // 実行時の日付時刻

引数を指定することで任意の日付時刻に変更できます。

var date = $.exDate('2009/01/31');
alert(date.toDate('2009/03/10').toChar()); // 2009/03/10

第2引数にフォーマットを指定することができます。

var date = $.exDate('2009/01/31');
alert(date.toDate('20090310 10:15:30','yyyymmdd hh:mi:ss')
      .toChar('hh:mi'));  // 10:15

lastDay() メソッド

Date オブジェクトの保持する月の最終日を Date オブジェクト形式で返します。

var date = $.exDate('2009/01/10');
alert(date.lastDay().toChar()); // 2009/01/31

addMonths() メソッド

Date オブジェクトの保持する月に、引数に指定された月数を加算した結果を Date オブジェクト形式で返します。

var date = $.exDate('2009/01/10');
alert(date.addMonths(1).toChar()); // 2009/02/10

Date オブジェクトの保持する日が加算後の月に存在しない場合、加算後の月の最終日を持つ Date オブジェクトを返します。

var date = $.exDate('2009/01/31');
alert(date.addMonths(1).toChar());  // 2009/02/28
alert(date.addMonths(-2).toChar()); // 2008/11/30

12ヶ月以上の加算も可能です。

var date = $.exDate('2009/01/31');
alert(date.addMonths(13).toChar());  // 2010/02/28

Date オブジェクト純正メソッド

Date オブジェクトの純正メソッドも併用できます。


使用可能な書式
yyyy4 桁の西暦
mm2 桁の月(01 〜 12)
dd2 桁の日(01 〜 31)
hh242 桁の時間。24 時間表記。(01 〜 24)
hh2 桁の時間。12 時間表記。(01 〜 12)
mi2 桁の分(00 〜 59)
ss2 桁の秒(00 〜 59)
day曜日を返します。デフォルトは英語表記(Sunday 〜 Saturday)

導入方法

jquery.js と exdate.jsダウンロードし 下記順で読み込んでください。

<script type="text/javascript" src="/path/jquery.js"></script>  
<script type="text/javascript" src="/path/exdate.js"></script>  

任意の処理にてご使用ください。

$(function(){
    setInterval(function(){
        $('body').html($.exDate().toChar(
            '只今の日付時刻は yyyy 年 mm 月 dd 日 hh24 時 mi 分 ss 秒です'
        ))
    },1000)
});

サンプルページ


備考

addMonths や 書式定義などでオラクルを使われてる方は気付かれたかと思いますが、オラクルの日付系関数を参考に実装してます。

一応 jQueryプラグインとなってますが、jQuery の機能は $.extend ぐらいしか使ってないので非依存にするのは容易です。

このプラグインは デートピッカー(カレンダーを選択する UI) の実装をしてる際に、柔軟な書式指定、addMonths() や lastDay() のような汎用的な処理が欲しくなり作りました。

また、id:higeorange さんのこちらの記事を大変参考にさせて頂きました。

ありがとうございました。

akkun_choiakkun_choi 2009/07/13 17:52 こんにちは。
exDate.js是非使わせいただきたいのですが、
ライセンスはどのような形で公開されていますでしょうか。

cyokodogcyokodog 2009/07/13 22:23 コメントありがとうございます。
jQuery と同様、MITとGPLのデュアルライセンスしたいと思います。
ライセンス文言はソースファイル内に追記しときました。
不具合等ありましたら対応いたしますのでご連絡ください。

akkun_choiakkun_choi 2009/07/14 19:35 ご返答ご対応ありがとうございます!

Dateオブジェクトを与えてもexDate化されるようにしてみました
>|
// 31行目より
if(dateStr!=undefined){
+ if (dateStr instanceof Date){
+ date = dateStr;
+ }else{
var tmp={
...
date=new Date(tmp.y,tmp.m,tmp.d,tmp.h,tmp.mi,tmp.s);
+ }
}
|<

cyokodogcyokodog 2009/07/14 23:16 なるほど!
こちらのソースにも反映させてもらってもいいですかね(笑)
参考までにお伺いしたいのですが、どういったシュチュエーションの時にDate オブジェクトを引数で渡したいとなったのでしょうか?

akkun_choiakkun_choi 2009/07/22 12:13 もちろん、どうぞご自由にお使い下さい!

既存のソースですでにDateを生成してまして、
そのDateからexDateのtoCharを呼びたかったのです。

てっとり早く実装したかったのと、使い勝手良くなりそうだったのでこの方法にしました。

cyokodogcyokodog 2009/07/22 19:15 >どうぞご自由にお使い下さい!

ありがとうございます。

改善案等ありましたらこちらでも検討しますので、またよろしくお願いします。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/cyokodog/20090316/jQueryExDate