【Javascript】jquery.uiのdatepickerの日本語対応
Category JavaScript
/ Tagged jQuery
2010/06/16
こちらもご覧ください
【jQuery】日付カレンダー入力 datepickerの日本語対応
サンプル
日付入力欄：
書き方例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Datepicker</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" />
<style type="text/css">
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width:auto;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function() {$("#DPSample").datepicker({regional: "ja", changeYear: true, changeMonth: true});});</script>
</head>
<body>
<p>日付入力欄： <input id="DPSample" type="text" /></p>
</body>
</html>
6行目: jquery.uiのテーマの中で好きなCSSを使用。
8行目: デフォルトでは width:49%; となっていて、日本語版では大きすぎて、レイアウトが崩れる。
10行目: jQuery本体
11行目: jQuery.ui本体
12行目: jQuery.ui datepicker 日本語化js
13行目: 任意のinput要素に日付入力機能を持たせる。オプションの「regional: “ja”」で日本語化。
コメント