form入力でよくカレンダーから日付を選択してもらうUIがありますが、jQuery-UIなどが良く見られますね。

ただやはりjQueryを使わない環境もあると思うので、そんな時にはFlatpickrをオススメします。

chmln.github.io

— A lightweight and powerful datetimepicker

とあるように軽量化且つ、豊富なオプションでよほど複雑な構造を想定しない限り十分こちらでまかなえます。

基本的な使い方

特にオプション無しの場合以下の指定方法になります。

flatpickr("#myID", {});
flatpickr(".myClass", {}); // 複数インスタンスを作成
flatpickr(element, {}); // エレメントでの作成も

開始と終了で2つ日付選択が必要な時はclassでの選択等使い分けが可能です。 ちなみに後述にもありますが、1つのフォーム内での期間指定も可能です。

オプション

では、本家サイトにある例から幾つかオプションを紹介します。

日付 + 時間 DateTime

// flatpickr()の第二引数
{
enableTime: true
}

選択可能期間の制限 minDate and maxDate

// 2017年4月から5月までの選択に制限
{
minDate: "2017-04",
maxDate: "2017-05"
}

期間の選択 & 日付のデフォルト設定

{
mode: "range", // 期間指定モード
dateFormat: "Y-m-d",
defaultDate: ["2016-10-10", "2016-10-20"]  //  [ 開始日, 終了日 ]
}

時間のみの指定

{
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true // default が false で AM <=> PM 切替
}

日本語化

jsファイルを読み込んだあとflatpickrのインスタンス実行時に言語を指定してやればOKです

<!-- 以下はCDN経由 -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

{
locale:  ja
}

他にも、選択不可な日付を指定したり、カレンダーを常時表示したり、様々なオプションがあります。 公式ページの[Example]ページにコードと一緒に実際に触って使い勝手が確認できるものがありますので、雰囲気で分かると思います。