<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">

<span>開始日:</span><input type='text' class='datepicker js-startDate'><br>
<span>終了日:</span><input type='text' class='datepicker js-endDate'>
// 現在日付
const today = dayjs().format('YYYY/MM/DD');
// 現在日付から1年後の日付
const maxDate = dayjs().add(1, 'year').format('YYYY/MM/DD');

// 共通設定
$.datepicker.setDefaults({
  minDate: today, // 最小選択可能日(現在日付以降)
  maxDate: maxDate // 最大選択可能日(1年後まで)
});

// 開始日の入力欄
const $startDate = $('.js-startDate');
// 終了日の入力欄
const $endDate = $('.js-endDate');

// 開始日のカレンダー
$startDate.datepicker();

// 終了日のカレンダー
$endDate.datepicker();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js
  3. https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.13/dayjs.min.js