Flatpickrは他のライブラリに依存していないDateTimePickerです。
document
Github
日本語の設定

コンストラクタ

let flatpickrs = flatpickr(selector, options);
let flatpickr = flatpickr(elem, options);

オブション *

optionはHTML要素のdata属性で指定することができる。

• altInput
  ユーザに見せるため入力コントロールを設置するか。
  サーバーに送信するデータが入力されるコントールはコンストラクタで指定したHTML要素。
  それはあらかじめhiddenにする。
  使い方 example  

• altFormat
  altInputで生成されたHTML要素に表示される日時のフォーマット

• altInputClass
  altInputで生成されたHTML要素に適用されるCSSクラス名

• allowInput
  入力コントロールから手入力で日時を入力することを許可するか

• clickOpens
  入力コントロールをクリックすると自動的にカレンダーを表示するか

• dateFormat
  カレンダーから選択した際に入力コントロールに入力される日時のフォーマット
  使い方 example

• defaultDate 入力コントロールにデフォルトで入力されている日時
  使い方 example

• disable
  選択不可能な日付 *

• enable
  選択可能な日付 *

• enableTime
  時刻を指定可能にするか

• enableSeconds
  秒数を指定可能にするか

• hourIncrement
  時間を増加させる単位

• inline
  inlineで表示させるか

• maxDate
  選択することができる最大の日時

• minDate
  選択することができる最小の日時

• minuteIncrement
  分を増加させる単位

• nextArrow
  次の月を表示するアイコン

• noCalendar
  カレンダーを表示しない
  時刻のみを選択する際に利用する

• onChange *

• onClose *

• onOpen *

• onReady *

• onValueUpdate

• onDayCreate

• parseDate
  文字列をDateオブジェクトに変換する関数

• prevArrow
  前の月を表示するアイコン

• shorthandCurrentMonth
  月を短縮形で表示するか

• static
  カレンダーがスクロールしないとき、これをtrueにするとスクロールするかもしれない

• time_24hr   時刻選択を24時間表記で選択するか

• utc
  utcフォーマットにするか

• weekNumbers
  週番号を表示するか

• wrap
  input groupを作成する際に利用する
  Custom elements and input groups

API

• changeMonth(monthNum, is_offset=true)
  月を指定した分だけ移動する
  is_offsetをfalseにすると指定した月に移動する

• clear()
  リセットする

• close()
  カレンダーを閉じる

• destroy()
  flatpickrインスタンスを削除

• formatDate(formatStr, dateObj)

• jumpToDate(date)
  指定した日時に移動

• open()
  カレンダーを開く

• parseDate(date)
  指定した文字列をDateオブジェクトにする

• redraw()

• set(option, value)

• setDate(date)
  現在選択している日時を指定する

• toggle()
  トグル

Event *

• onChange
  日時を変更したとき
  function(dates, datestring, Flatpickr){}

• onOpen
  カレンダーが開いたとき
  function(dates, datestring, Flatpickr){}

• onClose
  カレンダーが閉じたとき
  function(dates, datestring, Flatpickr){}

• onReady
  カレンダーが選択可能になったとき
  function(dates, datestring, Flatpickr){}

• onValueUpdate

• onDayCreate *
  カレンダーの日付セルが生成されたとき
  function(dates, datestring, Flatpickr, spanElem){}

要素 *

• input
  紐づいているinput

• calendarContainer
  カレンダー

• prevMonthNav

• nextMonthNav

• currentMonthElement

• currentYearElement

• days

カレンダーの年月の表示順序を変える

以下のCSSで変更することができる。

.flatpickr-current-month {
    display: flex;
    justify-content: center;
}

.cur-year {
    order: 1
}

.cur-month:before  {
     content: "年 "
}

.cur-month {
    order: 2
}

example

PikaDay.jsメモ

vue-flatpickr