期間指定をするjQueryプラグイン::jquery.daterangepickerを作った
jquery.daterangepickerを作りました。
(ありきたりな名前でしょうもない!というのは百も承知で、それ以上に的確な名前が無いのが現状)
githubに公開しました。
https://github.com/sugilog/jquery.daterangepicker
リポジトリをcloneして、フォルダ内にあるsample.htmlを開いていただければ、挙動を確認できます。
まだまだREADMEとか書いてないけど、(っていうか、今日つくりはじめて、今日公開したので)今後バグ修正とか含め、充実させていきます。
もう少し説明
なにをしたいかというと、日付の期間(2011/12/25から2012/01/24)みたいなことを、selectボックス(プルダウン)を使わずにできるようにしたい、ということ。
jQueryであれば、datepickerは用意されてるし、daterangepickerもいつくかあるのですが、自分自身の要求を満たしきってくれなかったので、自作しました。
ターゲットとしては、業務アプリ系のウェブサービスになるかと思います。
- 表示で参考にしているのは、admobで使用している期間指定のウィジェット
- 期間の始まりと期間の終わりを指定するカレンダーがそれぞれあり、指定した期間はハイライトされている
- かつ、プリセットで用意しておいた期間をワンクリックで反映させる、というような挙動
できること
- カレンダーから、日付を選べます
- 選んだ日付は、期間を指定するフォーム要素に反映します
- 期間内の日付はハイライトされます
- プリセットから、ワンクリックで期間を指定できます
- 表示のon/offをtoggleできます
- スタイルシートは表示に関係する部分以外はすべて外出しなので、カスタマイズ可能です。
できないこと
- カレンダー表示中に、フォーム要素側を編集したときに、カレンダーに表示されません
- まだ対応していないだけです
- プリセットで期間を反映させても、カレンダーはその月に移動しません
- これもまだ対応していないだけです
- daterangepicker呼び出し時に、デフォルトの日付を指定することはできません
- フォーム要素側を正の値としています
- プリセットのデフォルトはまだありません。
- 自作してください(今月くらいは追加する予定です)
- フォームに反映させる時の日付のフォーマットは、"2011/01/02"のような形式で固定しています
- formatのプラグイン入れるのも、自作するのもめんどくさかったからで、ニーズがあれば対応して、オプションで指定できるようにします
- 多言語化もしていません
- jQuery UIのテーマとは、無関係な状態です
- ニーズがあれば対応します
- 多分、まだまだバグがあるはずです
ということで、アドバイスなどあれば、ぜひぜひいただけますととてもうれしいです。
うひょーと喜びますヽ(´ー`)ノ