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')は日になります
実行イメージ
ページのトップへ戻る