jQuery UI datepicker 日本語 カレンダー

ここではjQuery UI datepickerの日本語カレンダーを実装する方法を解説しています。

calendar

head

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery.ui.datepicker-ja.js"></script>

CSSの選択
http://jqueryui.com/themeroller/

CSSはお好みのものをこちらから選択できます。
左側のメニューからGalleryから選択してください。
今回の例ではflickのCSSを選択しています。

読み込むCSSの変更
UI darknessを選択した場合

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />

このように読み込むCSSをお好みに合わせて変更してください。

jqueryとjqueryUIはGoogleから読み込んでいます。
https://developers.google.com/speed/libraries/devguide?hl=ja

日本語化
日本語化をするには、4行目の

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery.ui.datepicker-ja.js"></script>

を記述します。

日本語化した場合のレイアウトのずれを修正

<style type="text/css">
    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width:auto;
    }
</style>

日本語化した場合横幅が足りなくなってレイアウトが崩れてしまうので修正しています。

Script

$(function() {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true
    });
});

年と月をセレクトボックスに表示させています。

html

<input type="text" id="datepicker" />

Scriptで指定したエレメントと同じものを指定します。

これでテキストフィールドをクリックしたときにカレンダーを表示させることができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.