Bootstrap-Datepickerで複数のformatを指定する

環境

• Bootstrap-Datepicker ver.1.9を使用(1.10でも動作確認済)

やりたいこと

複数のformatで入力したい。
例えば、'yyyy/mm/dd' でも 'yyyymmdd' でも入力可能にしたい。
しかし、設定ではformatは1つしか設定できない。

解決方法

※moment.js を使用（現在開発が終了しています。新規プロジェクトの場合、同等の別ライブラリを使ってください）

format : {
	// 入力欄の表示の際の整形処理
	toDisplay(data, format, language) 
	{
		return moment(date).format('YYYY/MM/DD');
	},
	// 入力値のDateへのパーズ処理
	toValue(data, format, language)
	{
		// YYYY/MM/DDでもYYYYMMDDでも受け付ける
		const m = moment.utc(date, ['YYYY/MM/DD', 'YYYYMMDD']);
		const dt = m.isValid()? m.toDate() : null;
		return dt;
	},
}

上記のように、toDisplay関数とtoValue関数を設定する。

toDisplayは、入力欄に表示したい日付文字列を返すようにする。
toValueは、入力欄の文字列を日付に変換して返すようにする。nullを返すと当日として扱われる。

注意点

	const m = moment.utc(date, ['YYYY/MM/DD', 'YYYYMMDD']);

上記部分で「utc」としているのは、入力値をUTCとして処理しないと、Bootstrap-Datepicker内部ではDateオブジェクトからgetUTCMonth()とかして月の数値を求めており、時差の分ずれてしまうことがある為。

utcにしないと、例えば'2023/04/01'と入力しているのに2023/03/31がカレンダー上で選択される。