表示バリエーション

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

<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 アイコンなし １カレンダー)</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'}});