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

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

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

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

jqueryui.com　サイトにあるサンプルは、アイコン画像も 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"
});

この段階で、

ということになる。

フォントアイコンとして、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 の約束ではタグＢＯＤＹに書くコードでアイコンを指定するので、

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

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

このままでもいいけど、どうせならボタンとしての形状でなくて、アイコン画像としてフラットな描画にしたいので、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 で指定する。

このようになる。