Web開発者必見! jQuery UI ウィジェット3選

日付の入力をカレンダーから直感的に - UI/Datepicker

UI/Datepickerは日付の入力を簡易化するカレンダーを提供するウィジェット。カレンダーを生成し、日付を選択するとフォームに日付が書き込まれるユーザインタフェースだ。$('#date').datepicker()というように、datepicker()メソッドを呼び出して使用する。

HTMLファイル - datepicker.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Datepicker</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    $('#div-datepicker').css( 'margin-top', '150px'); 
    $('#date').datepicker();
    $('#div_date').datepicker();
}

);
-->
</script>
</head>

<body>

<h1>Datepicker</h1>

<div id="input-datepicker">
    <p>
        input: <input type="text" id="date">
    </p>
</div>

<div id="div-datepicker">
    <p>
        div:
        <div id="div_date"></div>
    </p>
</div>

</body>

</html>

図1: Windows XP SP3 / Internet Explorer 7でアクセス

図2: FreeBSD 8-current / Firefox 3でアクセス

inputからdatepicker()メソッドを呼び出した場合は、入力フォームをクリックすることでカレンダーが表示されるようになっている。ただしこのままでは月や曜日が日本語表示になっておらず、日付を指定してもmm/dd/yyyy形式になってしまうため使いにくい。嬉しいことにjQuery/DatepickerにはLocalizationプラグインが用意されており、該当のJavaScriptファイルを読み込むだけでカレンダーのローカライズが完了するようになっているので活用しよう。

HTMLファイル - datepicker_ja.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Datepicker</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript" src="./js/i18n/ui.datepicker-ja.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    $('#div-datepicker').css( 'margin-top', '150px'); 
    $('#date').datepicker();
    $('#div_date').datepicker();
}

);
-->
</script>
</head>

<body>

<h1>Datepicker</h1>

<div id="input-datepicker">
    <p>
        input: <input type="text" id="date">
    </p>
</div>

<div id="div-datepicker">
    <p>
        div:
        <div id="div_date"></div>
    </p>
</div>

</body>

</html>

図3: Windows XP SP3 / Internet Explorer 7でアクセス。曜日と月が日本語で表示されるようになった

図4: FreeBSD 8-current / Firefox 3でアクセス。Firefox上でも問題なく表示される

現段階においてjQuery UI + ThemeRollerを使用してinputからdatepicker()を呼び出した場合、曜日が見えなくなってしまうことがあるようだ(divから呼び出した場合は発現しない)。

この現象はThemeRollerから出力されたjquery-ui-themeroller.cssを自分で修正することである程度回避することができる。次のサンプルは曜日と月選択UIが重ならないようにしつつサイズを調節したものだ。適宜参考にしてほしい。

HTMLファイル - datepicker_size.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/jquery-ui-themeroller.css" rel="stylesheet" type="text/css">
<title>jQuery UI 1.5.1 Demos / Datepicker</title>
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/jquery-ui-personalized-1.5.1.min.js"></script>
<script type="text/javascript" src="./js/i18n/ui.datepicker-ja.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() 
{
    $('#date').datepicker(
    {
        beforeShow : function()
        {
            $('#ui-datepicker-div').css( 'font-size', '70%' ) ;
        }
    });
}
);
-->
</script>
<style type="text/css">
<!--
.ui-datepicker-next, .ui-datepicker-prev, .ui-datepicker-header select
{
    top: 12em;
}
-->
</style> 
</head>

<body>

<h1>Datepicker</h1>

<div id="input-datepicker">
    <p>
        input: <input type="text" id="date">
    </p>
</div>


</body>

</html>

図5: カレンダー内の文字サイズを70%に、月選択UIを下に移動し曜日と重ならないようにした