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

<span>日付を選択してください:</span><input type='text' class='datepicker'>
// 現在日付
const today = dayjs().format('YYYY/MM/DD');
// 現在日付から1年後の日付
const maxDate = dayjs().add(1, 'year').format('YYYY/MM/DD');

// datepickerの生成
$('.datepicker').datepicker({
  minDate: today, // 最小選択可能日(現在日付以降)
  maxDate: maxDate // 最大選択可能日(1年後まで)
});

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