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

jQuery UI の datepicker trigger を画像でなくてフォントアイコンで指定

jQuery UI の datepicker を使ってるWebサイトで、わざわざアイコンのボタンによる picker 呼出しをするデザインがなんか釈然としない。

https://jqueryui.com/datepicker/#icon-trigger

にあるようなカレンダーアイコンをクリックで呼び出すもの。これより入力フィールドをクリック、focusされた時に呼び出すのでわざわざアイコンがあるのが
釈然としない。

jqueryui.com サイトにあるサンプルは、アイコン画像も gif でありこのように画像サイズを気にしながら準備するのも煩わしい。

このアイコンをGIFでなくて、フォントアイコンで描画させてサイズ調整しても描画が乱れないようにできないだろうかと考えて試してみる。

まず。jQuery UI datepicker のデモページに書いてあるコードは

$( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date"
});

と書いてあって、これで input タグの後ろに自動的に次の img タグが描画される。

<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="Select date" title="Select date">

この img タグ生成させる代わりに、buttonタグ生成にさせたい。そこで、buttonImage と buttonImageOnly を指定しないようにする。

$( "#datepicker" ).datepicker({
      prevText:"前月", nextText:"翌月",
      changeMonth: true, monthNamesShort: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
      showOn: "button",
      buttonText: "Select date"
});

この段階で、
f:id:posturan:20170415183235j:plain
ということになる。

フォントアイコンとして、Fontello - icon fonts generator から必要なフォントファイルをダウンロードして
次のように CSS を用意する。

@font-face{
	font-family: 'fontello';
	src: url('../../fontello/font/fontello.eot');
	src: url('../../fontello/font/fontello.eot#iefix') format('embedded-opentype'),
	     url('../../fontello/font/fontello.woff') format('woff'),
	     url('../../fontello/font/fontello.ttf') format('truetype'),
	     url('../../fontello/font/fontello.svg#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}
.ui-datepicker-trigger{
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	font-size: 16[f:id:posturan:20170415184856j:plain]px;
	display: inline-block;
	text-decoration: inherit;
	cursor: pointer;
	color: #3456ff;
}

そして、datepicker設定の buttonText は、fontello の約束ではタグBODYに書くコードでアイコンを指定するので、

$(function(){
   $("#date").datepicker({
      prevText:"前月", nextText:"翌月",
      changeMonth: true, monthNamesShort: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
      showOn: "button",
      buttonText: "&#xe860;"
   }).datepicker("setDate", moment().format('YYYY/MM/DD'));
});

すると buttonタグとしてフォントアイコン埋め込みのボタンになる。 ( HTML-BODY に背景色指定 )

f:id:posturan:20170415184320j:plain

このままでもいいけど、どうせならボタンとしての形状でなくて、アイコン画像としてフラットな描画にしたいので、CSSで以下のように追加する

.ui-datepicker-trigger{
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
   display: inline-block;
   text-decoration: inherit;
   cursor: pointer;
   color: #3456ff;
   /* 追加 */
   background-color: rgba(0,0,0,0);
   border: none;
}

background-color と border を指定しなおしてしまう。透過させたいので、rgba で指定する。

f:id:posturan:20170415184856j:plain

このようになる。