ダウンロード

埋め込み

常に最新

<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" />

必要なライブラリ

jQuery

ライブラリ内でのjQueryの利用範囲
  • DOM要素の取得
  • 属性の設定
  • スタイルの設定
  • イベントハンドラの登録

概要

Daterはinput textを直感的な日付入力フォームに変更します。

可変な表示月数のカレンダーによる入力はもちろん、入力した数値から候補となる日付をリストアップし、そこから選択することもできます。

inputの表示とサーバー送信時に、それぞれ異なる日付フォーマットを使用することができます。

内部で使用しているclassを変更することで、見た目の調整を行う事ができます。

フォーカスのオン/オフの時のイベントハンドラを登録することができます。

表示される日付コンソールはメディアクエリを使用して画面の小さい端末用に表示の仕方を変えるように工夫しています。

res/以下のコンテンツの配置を変えるときは、css内のurl指定やカレンダーアイコン画像のURL(引数のicon_src設定で変更可能です)に注意してください。

1.1.2
  • ウィンドウの幅が十分に広くないときにアイコンの位置がずれるバグに対応
1.1.1
  • deprecate対応

サンプル

表示バリエーション

(YYYY-MM-DD 漢字曜日)

(DD MMM YYYY)

(MM/DD/YYYY アイコンなし 1カレンダー)

※異なる組み合わせも可能です

<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});

特殊な日付設定

(土日入力不可)

(2014年06月15日入力不可)

(2014年06月15日に指定したスタイルを適用する)

<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|false
suggestbasedcalendar
trueに設定すると入力値から日付を推察するための基準となる日付を、現在表示しているカレンダーの基準年月にします。falseの場合は本日日付を使用します。
未指定:id+'_'条件:文字列
inputname
Daterはform送信用にhiddenのinput要素を持ちますが、指定したidを持つinput要素のname属性をこのhidden要素のname属性に設定し、元のinput要素のname属性をここで指定した値に書き換えます。
未指定:id+'_hidden'条件:文字列
hiddenid
form送信用に追加するhiddenのinput要素のid属性を設定します。
未指定:true条件:true|false
displayicon
trueに設定するとカレンダーアイコンをインプットの右に表示します。
未指定:0条件:0->yyyymmdd 1->ddmmyyyy 2->mmddyyyy
informat
指定のフォーマットに従って、ユーザーからの入力を日付に解釈します。
未指定:0条件:0->yyyymmdd 1->ddmmyyyy 2->mmddyyyy
outformat
入力が確定された時点で、指定のフォーマットに従って表示内容を変更します。
未指定:'-'条件:文字列
outdemiliter
入力確定時に表示される年月日の間を指定した文字列で区切ります。
未指定:0条件:0->数値 1->文字列
outstrmonth
入力確定時に表示される月部分を指定の方法で表示します。
未指定:4条件:0以上の整数
outydigit
入力確定時に表示される年部分の桁数を指定します。
未指定:true条件:true|false
outmzero
入力確定時に表示される月部分の数値を0埋めするか指定します。
未指定:true条件:true|false
outdzero
入力確定時に表示される日部分の数値を0埋めするか指定します。
未指定:0条件:0->yyyymmdd 1->ddmmyyyy 2->mmddyyyy
sendformat
form送信される内容を、指定のフォーマットに従って変更します。
未指定:'-'条件:文字列
senddemiliter
form送信される年月日の間を指定した文字列で区切ります。
未指定:0条件:0->数値 1->文字列
sendstrmonth
form送信される月部分を指定の方法で表示します。
未指定:4条件:0以上の整数
sendydigit
form送信される年部分の桁数を指定します。
未指定:true条件:true|false
sendmzero
form送信される月部分の数値を0埋めするか指定します。
未指定:true条件:true|false
senddzero
form送信される日部分の数値を0埋めするか指定します。
未指定:0条件:0->yyyymmdd 1->ddmmyyyy 2->mmddyyyy
daykeyby
入力不可日付や特別なスタイルをあてる日付を指定する時のフォーマットを指定します。
未指定:[]条件:文字列の配列
disables
入力不可とする日付を、daykeybyで指定した区切り文字なしのフォーマットで記述した文字列の配列で指定します。
未指定:false条件:true|false
disablesaturdays
trueを指定すると、全ての土曜日が入力不可となります。
未指定:false条件:true|false
disablesundays
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 以上]
カレンダー状態も含めて安全に値をセットすることができます。