Foundation datepicker をインラインで常時表示しておきたい
表題の通りの記事です。
Web上での日付の選択ライブラリはいつまで経っても決定版が見つからず、色々使ってみてはやっぱり別のモノに浮気したり…を繰り返してるのです(>_<)。jQueryUI のdatepickerでもいいのですが、jQueryUI臭がしますし、せっかくなので別のモノを…と物色していたところ
Foundation datepickerを使ってみた
標準でも見た目がかわいいなと思って使ってみようと、開発中のシステムに組み込んだりして実験していたのですが、ある程度組み込んだところで、そのままだとインライン表示が出来ないことに気づきました(>_<)
Foundation Datepickerで常時カレンダーを表示しておきたい
一般的なDatepickerは、設定したinput欄をクリックするとカレンダーがポップアップする…という方式なのですが、今回はカレンダーを常に表示させておいて、クリックするとInput欄が変化する…ようなUIが作りたかったのです。
作者の方いわく「そんなの要る？」的なやりとりがあるのですが(^_^;
このスレッドで別の方が
以下引用―――
Actually, if you find line 48 in foundation-datepicker.js:
this.isInline = false;
and change it like so:
this.isInline = options.isInline;
then call the datepicker with the new option:
$('.datepicker').fdatepicker({isInline: true});と書いてくれてます。ライブラリに直接手を加える形になりますが、一応実現できそうです。（非推奨ですが）
foundation-datepicker.js の冒頭の標準option部(30行目あたり)を書き換える
this.isInline = false; ↓ this.isInline = options.isInline;
※このオプションがあるということは想定はされてた？
この変更を加えることで、fdatepickerを呼び出す際のオプションの
isInline: (true|false) が有効になります。
isInline: true で呼び出すと…
・fdatepickerを設定したDOMにdatepickerが差し込まれる(false(通常)だと/bodyの直前に、position:absoluteで差し込まれる)
・差し込まれるdatepickerに datepicker-inline というclassが付与される
ようです。
スタイルを追加
classが付与されることを利用して position のをrelativeに上書きし、幅を固定します。
<style>
.datepicker-inline{
position:relative;
margin: 0 auto;
width: 240px;
}
</style>
※幅を固定することでレスポンシブレイアウトの場合、表示幅によっては乱れてしまいます。
↑このように幅を狭くするとカレンダーが重なってしまう
※だから機能を排除したのでしょうか？
とりあえずこんな感じで…、カレンダーを常時表示させる という機能は実装出来ています。
とりあえず表示は出来ましたが、無理矢理なので非推奨ですかねえ。標準でインライン対応しているjQueryUIのdatepicker使っておいたほうがいい気もします(^_^;