Bootstrapでカレンダー
「type="date"」を指定する
<input type="date" />
Jqueryでカレンダー
「$(〇〇〇).datepicker();」でカレンダーの読み込み設定を行う
※「jquery-ui.min.js」と「jquery-ui.css」の読み込み必要
<input type="text" class="this-is-datepicker" />
<script>
$.datepicker.regional['ja'] = {
isRTL: false,
prevText: '<前',
nextText: '次>',
monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
dayNamesMin: ['日','月','火','水','木','金','土'],
weekHeader: '週',
dateFormat: 'yy-mm-dd',
firstDay: 0,
showMonthAfterYear: true,
yearSuffix: '年'
};
var opt = ({
onSelect : function() {
// alert($(this).attr('name') + ' = ' + $(this).val());
}
});
$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$('.this-is-datepicker').datepicker(opt);
</script>
▼読み込むJSファイルとCSSの例
・//code.jquery.com/ui/1.12.1/jquery-ui.min.js
・//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css
・公式:jQuery - 各JSファイルやCSSのURLがある
・参考:Datepicker | jQuery UI 1.10 日本語リファレンス | js STUDIO