広告
カレンダー
S M T W T F S
    123
45678910
11121314151617
18192021222324
252627282930 
<< November 2018 >>
アーカイブ
カテゴリー一覧
<< 2014年12月24日のつぶやき | main | 2014年12月25日のつぶやき >>
jQuery UI のDatepicker 日本語のデザインをいじる
Datepickerとは…ってここで説明するより下記を参照頂いた方が早いかな。
jQuery UI: DatePickerウィジェットで日付選択ボックスを作成するには? - Build Insider

Dreamweaverを使うと 挿入→jQuery UI→Datepickerで設置出来るのですが、日本語するのに下記のソースを読み込ませます。 …日本語化用のJSは色々あったのですが、以下以外何故かダメでした。
jquery.ui.datepicker-ja.js in subversion/trunk/plugins/jqueryui/js/i18n – Roundcube Webmail


で、このDatepickerをさらにCSSでカスタマイズするのに楽だったのが、まずGoogleクロームなどでDatepickerを表示させて時のHTMLソースを確保。

…一応下記に上げておきます。(やたら長かった。。。)
実際に利用しているCSSは「jquery.ui.theme.min.css」と「jquery.ui.theme.min.css」なんで、そこで使われているclass名とかID名を上書きする新たなCSSファイルをリンクさせれば自由度の高いカスタマイズが可能です。

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 315px; left: 236px; z-index: 1001; display: block;">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title"><span class="ui-datepicker-month">November</span>&nbsp;<span class="ui-datepicker-year">2014</span></div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">1</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">2</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">3</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">4</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">5</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">6</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">7</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">8</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">9</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">10</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">11</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">12</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">13</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">14</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">15</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">16</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">17</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">18</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">19</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">20</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">21</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">22</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">23</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">24</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">25</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">26</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">27</a></td>
<td class=" " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">28</a></td>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">29</a></td>
</tr>
<tr>
<td class=" ui-datepicker-week-end " data-handler="selectDay" data-event="click" data-month="10" data-year="2014"><a class="ui-state-default" href="#">30</a></td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
| メモ | 20:11 | comments(0) | trackbacks(0) |
コメント
コメントする









この記事のトラックバックURL
http://blog.haruhi.to/trackback/940696
トラックバック