埋め込み
常に最新
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/dater.min.js" ></script> <link rel="stylesheet" href="http://nolib.kikisoftware.com/res/dater.css" />
1.1.2
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/dater.1.1.2.min.js" ></script> <link rel="stylesheet" href="http://nolib.kikisoftware.com/res/arc/dater.1.1.2/dater.css" />
1.1.1
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/dater.1.1.1.min.js" ></script> <link rel="stylesheet" href="http://nolib.kikisoftware.com/res/arc/dater.1.1.1/dater.css" />
1.1.0
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/dater.1.1.0.min.js" ></script> <link rel="stylesheet" href="http://nolib.kikisoftware.com/res/arc/dater.1.1.0/dater.css" />
1.0.0
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/dater.1.0.0.min.js" ></script> <link rel="stylesheet" href="http://nolib.kikisoftware.com/res/arc/dater.1.0.0/dater.css" />
必要なライブラリ
概要
Daterはinput textを直感的な日付入力フォームに変更します。
可変な表示月数のカレンダーによる入力はもちろん、入力した数値から候補となる日付をリストアップし、そこから選択することもできます。
inputの表示とサーバー送信時に、それぞれ異なる日付フォーマットを使用することができます。
内部で使用しているclassを変更することで、見た目の調整を行う事ができます。
フォーカスのオン/オフの時のイベントハンドラを登録することができます。
表示される日付コンソールはメディアクエリを使用して画面の小さい端末用に表示の仕方を変えるように工夫しています。
res/以下のコンテンツの配置を変えるときは、css内のurl指定やカレンダーアイコン画像のURL(引数のicon_src設定で変更可能です)に注意してください。
- 1.1.2
- ウィンドウの幅が十分に広くないときにアイコンの位置がずれるバグに対応
- 1.1.1
- deprecate対応
サンプル
表示バリエーション
※異なる組み合わせも可能です
<form> <p class="onesample"> <input id="dater1" type="text" name="inputdate1" value="2014-07-04" class="likeabootstrap" /> (YYYY-MM-DD 漢字曜日)</p> <p class="onesample"> <input id="dater2" type="text" name="inputdate2" value="02072014" class="likeabootstrap" /> (DD MMM YYYY)</p> <p class="onesample onecal"> <input id="dater3" type="text" name="inputdate3" class="likeabootstrap" /> (MM/DD/YYYY アイコンなし 1カレンダー)</p> </form>
.onesample{ height: 40px; } .onecal div.dater_console{ width: 240px; } .onecal div.dater_console_right{ width: 130px; } .onecal div.dater_calendar_control{ margin-left: 0px; } .onecal div.dater_year_box{ float: none; margin: 3px auto 0 auto; } .onecal div.dater_month_box{ float: none; margin: 5px auto 8px auto; } /** 以下のCSSはinputのスタイル用で、カレンダーの機能や見た目には影響ありません **/ .likeabootstrap{ -webkit-appearance: none; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; -webkit-rtl-ordering: logical; -webkit-transition-delay: 0s, 0s; -webkit-transition-duration: 0.15s, 0.15s; -webkit-transition-property: border-color, box-shadow; -webkit-transition-timing-function: ease-in-out, ease-in-out; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; background-color: rgb(255, 255, 255); background-image: none; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; box-sizing: border-box; color: rgb(85, 85, 85); cursor: auto; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; height: 34px; letter-spacing: normal; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 12px; padding-right: 12px; padding-top: 0px; text-align: start; text-indent: 0px; text-shadow: none; text-transform: none; transition-delay: 0s, 0s; transition-duration: 0.15s, 0.15s; transition-property: border-color, box-shadow; transition-timing-function: ease-in-out, ease-in-out; vertical-align: middle; width: 177px; word-spacing: 0px; writing-mode: lr-tb; }
//以下をscriptのjqueryロード後の処理に記述します var dtr1 = new Dater({ id: "dater1", calweeklang: 'ja'}); var dtr2 = new Dater({ id: "dater2", informat: 1, outformat: 1, outdemiliter: ' ', outstrmonth: 1, sendformat: 1, sendstrmonth: 1}); var dtr3 = new Dater({ id: "dater3", displayicon: false, informat: 2, outformat: 2, outdemiliter: '/', sendformat: 2 calmin: 0, calmax: 0});
特殊な日付設定
<form> <p class="onesample"> <input id="dater4" type="text" name="inputdate1" value="2014-06-04" class="likeabootstrap" /> (YYYY-MM-DD 漢字曜日)</p> <p class="onesample"> <input id="dater5" type="text" name="inputdate2" value="2014-06-05" class="likeabootstrap" /> (DD MMM YYYY)</p> <p class="onesample"> <input id="dater6" type="text" name="inputdate3" value="2014-06-06" class="likeabootstrap" /> (MM/DD/YYYY)</p> </form>
.onesample{ height: 40px; } .onesample .goldenday{ background-color: #FAD67B; } /** 以下のCSSはinputのスタイル用で、カレンダーの機能や見た目には影響ありません **/ .likeabootstrap{ -webkit-appearance: none; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; -webkit-rtl-ordering: logical; -webkit-transition-delay: 0s, 0s; -webkit-transition-duration: 0.15s, 0.15s; -webkit-transition-property: border-color, box-shadow; -webkit-transition-timing-function: ease-in-out, ease-in-out; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; background-color: rgb(255, 255, 255); background-image: none; border-bottom-color: rgb(204, 204, 204); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 1px; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; box-sizing: border-box; color: rgb(85, 85, 85); cursor: auto; display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; height: 34px; letter-spacing: normal; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 12px; padding-right: 12px; padding-top: 0px; text-align: start; text-indent: 0px; text-shadow: none; text-transform: none; transition-delay: 0s, 0s; transition-duration: 0.15s, 0.15s; transition-property: border-color, box-shadow; transition-timing-function: ease-in-out, ease-in-out; vertical-align: middle; width: 177px; word-spacing: 0px; writing-mode: lr-tb; }
//以下をscriptのjqueryロード後の処理に記述します var dtr4 = new Dater({ id: "dater4", disablesaturdays: true, disablesundays: true}); var dtr5 = new Dater({ id: "dater5", disables: ['20140615']}); var dtr6 = new Dater({ id: "dater6", specialdayslist: {'20140615': 'goldenday'}, specialdayscal: {'20140615': 'goldenday'}});
設定
- 未指定:必須条件:文字列id
- Daterにするinput要素のid属性値を指定します。idのない要素をDaterにすることはできません。
- 未指定:true条件:true|falsesuggestbasedcalendar
- trueに設定すると入力値から日付を推察するための基準となる日付を、現在表示しているカレンダーの基準年月にします。falseの場合は本日日付を使用します。
- 未指定:id+'_'条件:文字列inputname
- Daterはform送信用にhiddenのinput要素を持ちますが、指定したidを持つinput要素のname属性をこのhidden要素のname属性に設定し、元のinput要素のname属性をここで指定した値に書き換えます。
- 未指定:id+'_hidden'条件:文字列hiddenid
- form送信用に追加するhiddenのinput要素のid属性を設定します。
- 未指定:true条件:true|falsedisplayicon
- trueに設定するとカレンダーアイコンをインプットの右に表示します。
- 未指定:0条件:0->yyyymmdd 1->ddmmyyyy 2->mmddyyyyinformat
- 指定のフォーマットに従って、ユーザーからの入力を日付に解釈します。
- 未指定:0条件:0->yyyymmdd 1->ddmmyyyy 2->mmddyyyyoutformat
- 入力が確定された時点で、指定のフォーマットに従って表示内容を変更します。
- 未指定:'-'条件:文字列outdemiliter
- 入力確定時に表示される年月日の間を指定した文字列で区切ります。
- 未指定:0条件:0->数値 1->文字列outstrmonth
- 入力確定時に表示される月部分を指定の方法で表示します。
- 未指定:4条件:0以上の整数outydigit
- 入力確定時に表示される年部分の桁数を指定します。
- 未指定:true条件:true|falseoutmzero
- 入力確定時に表示される月部分の数値を0埋めするか指定します。
- 未指定:true条件:true|falseoutdzero
- 入力確定時に表示される日部分の数値を0埋めするか指定します。
- 未指定:0条件:0->yyyymmdd 1->ddmmyyyy 2->mmddyyyysendformat
- form送信される内容を、指定のフォーマットに従って変更します。
- 未指定:'-'条件:文字列senddemiliter
- form送信される年月日の間を指定した文字列で区切ります。
- 未指定:0条件:0->数値 1->文字列sendstrmonth
- form送信される月部分を指定の方法で表示します。
- 未指定:4条件:0以上の整数sendydigit
- form送信される年部分の桁数を指定します。
- 未指定:true条件:true|falsesendmzero
- form送信される月部分の数値を0埋めするか指定します。
- 未指定:true条件:true|falsesenddzero
- form送信される日部分の数値を0埋めするか指定します。
- 未指定:0条件:0->yyyymmdd 1->ddmmyyyy 2->mmddyyyydaykeyby
- 入力不可日付や特別なスタイルをあてる日付を指定する時のフォーマットを指定します。
- 未指定:[]条件:文字列の配列disables
- 入力不可とする日付を、daykeybyで指定した区切り文字なしのフォーマットで記述した文字列の配列で指定します。
- 未指定:false条件:true|falsedisablesaturdays
- trueを指定すると、全ての土曜日が入力不可となります。
- 未指定:false条件:true|falsedisablesundays
- trueを指定すると、全ての日曜日が入力不可となります。
- 未指定:{}条件:キーが日付、値がclass名の連想配列specialdayslist
- サジェストリストの各日付のうち、daykeybyで指定した区切り文字なしのフォーマットで記述した文字列に合致する日付に、値で指定したclassを割り当てます。
- 未指定:{}条件:キーが日付、値がclass名の連想配列specialdayscal
- カレンダーの各日付のうち、daykeybyで指定した区切り文字なしのフォーマットで記述した文字列に合致する日付に、値で指定したclassを割り当てます。
- 未指定:-1条件:0以下の整数calmin
- 基準月を0とし、それ以前の何か月分のカレンダーを表示するかを負の整数で指定します。
- 未指定:1条件:0以上の整数calmax
- 基準月を0とし、それ以後の何か月分のカレンダーを表示するかを正の整数で指定します。
- 未指定:'en'条件:'en'->2文字の英文字 'ja'->1文字の漢字calweeklang
- カレンダーの曜日部分を指定したフォーマットで表示します。
- 未指定:{ydigit:4, strmonth:1, mzero:true, dzero:true}条件:オブジェクトconsole
- カレンダー上部にある年月コントローラーのスタイルを設定します。
{ ydigit:年桁数 strmonth:月表示 0:数値 1:文字 mzero:月を0埋めするか dzero:日を0埋めするか }
- 未指定:'dater_input'条件:文字列input_class
- idで指定したinput要素に設定されるclass名を指定します。
- 未指定:'dater_icon'条件:文字列icon_class
- アイコンとなるimg要素に設定されるclass名を指定します。
- 未指定:'res/dater-icon.png'条件:文字列icon_src
- アイコンとなるimg要素に設定されるsrc属性を指定します。
- 未指定:'dater_console'条件:文字列console_class
- フォーカス時に表示されるコンソールボックスの外枠に設定されるclass名を指定します。
- 未指定:'dater_console_left'条件:文字列console_left_pane_class
- コンソールボックスの左ペインに設定されるclass名を指定します。
- 未指定:'dater_console_right'条件:文字列console_right_pane_class
- コンソールボックスの右ペインに設定されるclass名を指定します。
- 未指定:'dater_suggest_list'条件:文字列suggest_list_class
- コンソールボックス内にあるサジェストリストを構成するul要素に設定されるclass名を指定します。
- 未指定:'dater_suggest_list_selected'条件:文字列suggest_list_selected_class
- サジェストリストを構成するli要素のうち、選択されているli要素に設定されるclass名を指定します。
- 未指定:'dater_suggest_list_hover'条件:文字列suggest_list_hover_class
- サジェストリストを構成するli要素のうち、マウスオーバーしているli要素に設定されるclass名を指定します。
- 未指定:'dater_suggest_list_disable'条件:文字列suggest_list_disable_class
- サジェストリストを構成するli要素のうち、選択不可のli要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_block'条件:文字列calendar_block_class
- コンソールボックス内にあるカレンダーの外枠となるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_control'条件:文字列calendar_control_class
- カレンダーを構成する年月コントローラーの外枠となるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_year_box'条件:文字列year_box_class
- カレンダーを構成する年月コントローラーの年部分の外枠となるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_year_prev'条件:文字列year_prev_class
- カレンダーを構成する年月コントローラーの年部分の前年へ移動ボタンとなるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_yaer_next'条件:文字列year_next_class
- カレンダーを構成する年月コントローラーの年部分の次年へ移動ボタンとなるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_month_box'条件:文字列year_class
- カレンダーを構成する年月コントローラーの月部分のテキストの外枠となるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_year_box'条件:文字列month_box_class
- カレンダーを構成する年月コントローラーの月部分の外枠となるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_month_prev'条件:文字列month_prev_class
- カレンダーを構成する年月コントローラーの月部分の前月へ移動ボタンとなるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_month_next'条件:文字列month_next_class
- カレンダーを構成する年月コントローラーの月部分の次月へ移動ボタンとなるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_month'条件:文字列month_class
- カレンダーを構成する年月コントローラーの月部分のテキストの外枠となるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_header'条件:文字列calendar_header_class
- カレンダーを構成する月カレンダーのヘッダの外枠となるdiv要素に設定されるclass名を指定します。
- 未指定:'dater_calendar'条件:文字列calendar_class
- カレンダーを構成する月カレンダーの外枠となるtable要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_sunday'条件:文字列calendar_sunday_class
- 月カレンダーの日曜日を表す日付の外枠となるtd要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_saturday'条件:文字列calendar_saturday_class
- 月カレンダーの土曜日を表す日付の外枠となるtd要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_onday'条件:文字列calendar_onday_class
- 月カレンダーの平日を表す日付の外枠となるtd要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_today'条件:文字列calendar_today_class
- 月カレンダーの今日を表す日付の外枠となるtd要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_selected_day'条件:文字列calendar_selected_day_class
- 月カレンダーの選択された日付の外枠となるtd要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_out_of_month'条件:文字列calendar_out_of_month_class
- 月カレンダーの月外日を表す日付の外枠となるtd要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_hover_day'条件:文字列calendar_hover_day_class
- 月カレンダーのマウスオーバーしている日付の外枠となるtd要素に設定されるclass名を指定します。
- 未指定:'dater_calendar_disable_day'条件:文字列calendar_disable_day_class
- 月カレンダーの入力不可日付の外枠となるtd要素に設定されるclass名を指定します。
- 未指定:-条件:-setOnFocus(function(){})
- 引数にコールバック関数を指定することで、input要素にフォーカスがあたった時点で実行される処理を記述することができます。
- 未指定:-条件:-setOnBlur(function(pre, aft){})引数は[v1.1.0 以上]
- 引数にコールバック関数を指定することで、input要素からフォーカスが外れた時点で実行される処理を記述することができます。引数はフォーカスが当たったときの値と、外れた時の値です。
- 未指定:-条件:-setValue(str)[v1.1.0 以上]
- カレンダー状態も含めて安全に値をセットすることができます。