[Javascript] input name="date"を使いたくない人の為のカレンダーライブラリ

2019年9月9日

Javascript テクノロジー プログラミング

日付を入力する入力フォームは思った以上に利用頻度が高い。 今現在、会社の経理仕訳情報の登録システムを構築しているのだが、当たり前のように日付の登録が存在する。 PCブラウザを使っていると、inputタグにtype="date"をセットするだけで、簡単にカレンダー表示ができ、便利に日付が登録できるのだが、入力後にサーバーにデータPOSTすると、"yyyy-mm-dd"の形式になり、検証はしていないが、ブラウザによってこの仕様は変わることがあるらしい。 また、スマートフォンブラウザではカレンダーが表示されない場合もあり、非常に不便に感じる機能である。 そんな時の為に簡単にカレンダー機能をinputタグのtext項目に設置できるようにライブラリを作っておきました。

Howto

HTMLソースのheadタグ(またはbody上部)にライブラリを登録 <script src="ajax.js"></script> <script src="calendar.js"></script> HTMLソースの下部(表示アクションのinputタグよりも下)に以下の実行関数を設置。 <script> new $$calendar({ target : "[name='date']", start_event : "focus", default_date_type : "today", default_date_string : "date" }); </script>  

補足事項

このカレンダーは、期間選択はできません。 単一の年月日をinputタグに登録する為のライブラリです。 ソース下部の実行オプションは以下のように設定できます。 target : ".input-date", // 起動(表示)タイミングのエレメント(input=text , button ...) start_event : "focus", // [click , focus] default_date_type : "today" , // [blank:未入力 , today:ブランクの場合に当日の日付 , string:任意(指定)の値 , query:url-queryの任意の値] default_date_string : "2019/08/01", // [type=string:yyyy/mm/dd , type=query:date] margin_top : "4px", // カレンダーを下にずらすマージン値 view_position : "element-bottom", // [center:画面中央 , element-bottom:基点の直下] view_type : "", // [] flg_date_active : "past", // [all:未来過去すべての日付選択可能 , past:過去のみ選択可能 , future:未来のみ選択可能] format_output : "yyyy/mm/dd", // [yyyy/mm/dd , yyyy/m/d , yyyy-m-d], click_date : function(){} "target" : カレンダー表示を起動するイベント用のボタンまたは入力フォーム。 "start_event" : targetのどのイベントで起動するかを設定できます。 "default_date_type" : inputタグが基本タグの場合に、そのタグのvalue値がブランクの場合に、デフォルトで値のセットができます。(今日の日付または、任意の日付でセットできます。) "default_date_string" : 上記のtypeで任意の値または、URLのクエリ値などがセットできます。 "margin_top" : 入力項目やボタンにピッタリくっつくのが嫌な場合はこの値を入れて下方向にずらすことができます。 "view_position" : 表示位置をコントロールできますが、画面からはみ出る場合は、強制的に画面中央に表示するようになります。 "flg_date_active" : ログデータなどの閲覧は、過去の日付しか選択しなくていいし、予定登録であれば、未来の日付のみで良し、それ以外はすべてを対象にするように3パターンの設定ができます。 "format_output" : 出力の際の日付フォーマットを登録します。月と日を2桁にするのか、0パディングは要らないのかもセットできるようにしています。 "click_date" : カレンダーの日付をクリックすると、inputタグに値を登録してカレンダー表示を閉じますが、その際に任意のコードを実行させることができます。 とりあえず、僕がこれまで作ってきたカレンダーの3回目の焼き直しなので、想定出来る機能はある程度網羅しているので、非常に便利に使えると思います。 デザインが気に入らない人は、cssファイルやcalendar.htmlファイルを修正することで、お好きな表示に切り替えることができます。 ※htmlファイルを変更する場合は、DOM構造を変更する場合はclass名などを注意してくださいね。

Github

ソースコード一式をgithubにアップしておきました。 cloneしてお使いください。 https://github.com/yugeta/calendar

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。