本文へ移動

日付設定

概要

日付で条件を絞り込む際に使用します。以下サンプルは jQuery の Datepicker を利用しています。用途によって適時変更してください。
※デザインを改変に関してはjQueryサイトを参考にしてください。

デザイン

以下はサンプルです。用途を定めてデザインしてください。

西暦 / INPUT

用途：案件ごとに設定してデザインしてください。

  • 年
  • 月
  • 日
<div class="datepickerVal seireki">
<ul>
<li><input type="text" value="" class="year xs">年</li>
<li><input type="text" value="" class="month xs">月</li>
<li><input type="text" value="" class="date xs">日</li>
</ul>
<input type="text" value="" class="datepicker" style="display:none;">
</div>

西暦 / SPAN

用途：案件ごとに設定してデザインしてください。

  • 年
  • 月
  • 日
<div class="datepickerVal seireki spanElm">
<ul>
<li><span class="year"></span>年</li>
<li><span class="month"></span>月</li>
<li><span class="date"></span>日</li>
</ul>
<input type="text" value="" class="datepicker" style="display:none;">
</div>

和暦 / INPUT

用途：案件ごとに設定してデザインしてください。

  • 年
  • 月
  • 日
<div class="datepickerVal">
<ul>
<li><input type="text" value="" class="year xs">年</li>
<li><input type="text" value="" class="month xs">月</li>
<li><input type="text" value="" class="date xs">日</li>
</ul>
<input type="text" value="" class="datepicker" style="display:none;">
</div>

和暦 / SPAN

用途：案件ごとに設定してデザインしてください。

  • 年
  • 月
  • 日
<div class="datepickerVal spanElm">
<ul>
<li><span class="year"></span>年</li>
<li><span class="month"></span>月</li>
<li><span class="date"></span>日</li>
</ul>
<input type="text" value="" class="datepicker" style="display:none;">
</div>

改変対象ファイル

CSS:
_ul.scss 内に改変対象箇所があります。
_ul.scssは、本番へは反映せずに、必要なUIのコードを_modules.scssに追加してください。
Javascript:
datePickers()関数
必要なUIのコードをライブラリー (/temp/js/tips.js) から本番 (/common/js/tips.js) に追加してください。
また、本UIはjQueryを利用しているため、アクセシビリティ未対応です。
設置の際は検討の上HEAD内の[for Datepicker]を参考にしてください。