SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

【Javascript】jquery.uiのdatepickerの日本語対応

こちらもご覧ください

【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”」で日本語化。

関連するメモ

コメント