トッカンソフトウェア

jQuery UIでカレンダー表示

jQuery UIを使用してカレンダーを表示してみます。

				
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jQuery Test</title>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
	<script type="text/javascript">
		$(function() {

			$.datepicker.setDefaults($.datepicker.regional['ja']);

			$('#date').datepicker();

			$('#date1').datepicker({
				showButtonPanel: true,
				changeMonth: true,
				changeYear: true,
				minDate: -3,
				maxDate: '+1M +7D',
				numberOfMonths: 2,
				showOn: "both",
				buttonText: "show",
				dateFormat: 'yymmdd'
			});

			$('#date2').datepicker({
				showOn: "both",
				buttonImage: "img.png"
			});
		});
	</script>
</head>
<body>
	オプション指定なし
	<br />
	<input id="date" type="text" />
	<br />
	<br />
	色々オプション指定
	<br />
	<input id="date1" type="text" />
	<br />
	<br />
	ボタンを画像
	<br />
	<input id="date2" type="text" />
</body>
</html>


			
ダイアログの時と同じようにjquery-ui.css、jquery-ui.min.js、jquery-ui.min.jsを参照すると使用できます。

日本語で表示する場合、上記に加えてjquery-ui-i18n.min.jsを参照し、以下を実行します。
				
$.datepicker.setDefaults($.datepicker.regional['ja']);

			


カレンダーを表示するには、以下だけで表示されるようになります。
				
$('#date').datepicker();

			
オプションは以下のようなものがあります(ほんとはもっとたくさんあります。公式ページ等で確認して下さい)。

オプション 説明
showButtonPanel カレンダーに「今日」などのボタンを付けます。
changeMonth 月をコンボボックスで選択できるようになります。
changeYear 年をコンボボックスで選択できるようになります。
minDate 選択可能範囲を指定します(過去)。
maxDate 選択可能範囲を指定します(過去)。
numberOfMonths 表示するカレンダー数を指定します。
showOn カレンダーの表示イベントを指定します(focus:選択時、button:ボタン押下時、both:両方)。
buttonText カレンダー表示ボタンを表示する場合、そのボタンの文字を指定します。
buttonImage カレンダー表示ボタンを表示する場合、そのボタンの画像を指定します。
dateFormat カレンダーでセットされる日付のフォーマットを指定します。yyyymmdd形式の場合、'yymmdd'


範囲指定では数値の場合は日数(例:-7)、文字列でMは月(例:'1M')、D(例:'1D')は日になります



実行イメージ






ページのトップへ戻る