formの日付の入力補助にカレンダー

jquery-uiを使うかBootstrapを使うかで色々と変わる

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