読者です 読者をやめる 読者になる 読者になる

期間指定をするjQueryプラグイン::jquery.daterangepickerを作った

jquery.daterangepickerを作りました。
(ありきたりな名前でしょうもない!というのは百も承知で、それ以上に的確な名前が無いのが現状)

githubに公開しました。
https://github.com/sugilog/jquery.daterangepicker

リポジトリをcloneして、フォルダ内にあるsample.htmlを開いていただければ、挙動を確認できます。

まだまだREADMEとか書いてないけど、(っていうか、今日つくりはじめて、今日公開したので)今後バグ修正とか含め、充実させていきます。

f:id:sugilog:20120121232311p:image

もう少し説明

なにをしたいかというと、日付の期間(2011/12/25から2012/01/24)みたいなことを、selectボックス(プルダウン)を使わずにできるようにしたい、ということ。
jQueryであれば、datepickerは用意されてるし、daterangepickerもいつくかあるのですが、自分自身の要求を満たしきってくれなかったので、自作しました。

ターゲットとしては、業務アプリ系のウェブサービスになるかと思います。

  • 表示で参考にしているのは、admobで使用している期間指定のウィジェット
    • 期間の始まりと期間の終わりを指定するカレンダーがそれぞれあり、指定した期間はハイライトされている
    • かつ、プリセットで用意しておいた期間をワンクリックで反映させる、というような挙動
できること
  • カレンダーから、日付を選べます
    • 選んだ日付は、期間を指定するフォーム要素に反映します
  • 期間内の日付はハイライトされます
  • プリセットから、ワンクリックで期間を指定できます
  • 表示のon/offをtoggleできます
  • スタイルシートは表示に関係する部分以外はすべて外出しなので、カスタマイズ可能です。
できないこと
  • カレンダー表示中に、フォーム要素側を編集したときに、カレンダーに表示されません
    • まだ対応していないだけです
  • プリセットで期間を反映させても、カレンダーはその月に移動しません
    • これもまだ対応していないだけです
  • daterangepicker呼び出し時に、デフォルトの日付を指定することはできません
    • フォーム要素側を正の値としています
  • プリセットのデフォルトはまだありません。
    • 自作してください(今月くらいは追加する予定です)
  • フォームに反映させる時の日付のフォーマットは、"2011/01/02"のような形式で固定しています
    • formatのプラグイン入れるのも、自作するのもめんどくさかったからで、ニーズがあれば対応して、オプションで指定できるようにします
  • 多言語化もしていません
  • jQuery UIのテーマとは、無関係な状態です
    • ニーズがあれば対応します
  • 多分、まだまだバグがあるはずです


ということで、アドバイスなどあれば、ぜひぜひいただけますととてもうれしいです。
うひょーと喜びますヽ(´ー`)ノ