datepicker

Contents

1. フォームでカレンダー入力を使いたい場合
2. jQuery UI Datepicker

フォームでカレンダー入力を使いたい場合

入力フォームで期間を設定する必要に迫られていたときに、手入力ではなくカレンダー入力を使うことになった。手入力でも良いが、バリデーションチェックやらエスケープやら、追加しないといけない処理が増えるので、読み取り専用でクリック一つで入力できた方がユーザパフォーマンスとしても都合が良い。そっちの方が楽。手間が増える開発はしない。

jQuery UI Datepicker

datepickerのライブラリを使うようだが、どれを使えば良いのか。色々とあるようだ。
個人的には、jQuery UI Datepickerが良い感じ。classとかにどんな処理加えるのかJSで書いてやってその外部ファイルを呼び出してやる。

年月日まで設定できるdatepickerと年月までの場合とを同ファイルで組み合わせて使う場合には、一工夫要る。
HTMLのclass属性で条件分岐させるが、別ファイルでclass属性を呼び出して、JSでライブラリのような形で、属性ごとに処理を書く。HTMLコンテンツをJSで加えて切り替えるとか、JSでincludeとかさせるわけでなく、class属性で元から処理を分けてやってそれを呼び出すっていう感じ。
この辺り、JSでHTMLコンテンツを動的に追加させようとか考えてたときに、冗長になるわ、可読性が無いわで良くないと思ってたが、引き出しが無いんでとりあえず一旦できるところでやって動かないか試してたが、無理だった。

ライブラリだから基本呼び出すところの記事が多い感じがする。
実際にJSのコードがこんな感じ。GitHubにあるdatepicker-ja.js。

/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO (kentaro@ranvis.com). */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ja = {
	closeText: "閉じる",
	prevText: "<前",
	nextText: "次>",
	currentText: "今日",
	monthNames: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	monthNamesShort: [ "1月","2月","3月","4月","5月","6月",
	"7月","8月","9月","10月","11月","12月" ],
	dayNames: [ "日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日" ],
	dayNamesShort: [ "日","月","火","水","木","金","土" ],
	dayNamesMin: [ "日","月","火","水","木","金","土" ],
	weekHeader: "週",
	dateFormat: "yy/mm/dd",
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: "年" };
datepicker.setDefaults( datepicker.regional.ja );

return datepicker.regional.ja;

} ) );

実際のところは、使い勝手の良いようにこれに手を加える。ライブラリの組み合わせやJSとか分からないことが多いから、手探りで覚えてる。

以上

2021-10-27basic, javascript