デモ:日付入力のフルオプション例

jQuery toolsによる「日付入力のフルオプション例」の動作デモです。

サンプルコード

HTMLのサンプル

<form id="flight">
<label> 
	到着日 <br />  
	<input type="date" name="arrival" value="今日" /> 
</label>
<label> 
	出発日 <br /> 
	<input type="date" name="departure" data-value="1" value="明日以降" /> 
</label>
</form>

CSSのサンプル

#example #flight,
#example  .active,
#calroot {
	border-radius:4px;		
}

#example #flight {
	font-family:sans-serif;	
	background:#333 url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/calendar/h80.png);
	height:56px;
	padding:12px 0 12px 30px;
	color:#ddd;
	font-size:11px;
	width:520px;
	margin:0 auto;
	box-shadow:0 0 10px #666;
}

#example #flight label {
	float:left;
	width:215px;
	display:block;
	padding:6px;
	border:1px solid transparent;
	margin-right:30px;
}

#example #flight .active {
	background-color:#fff;
	color:#333;
	border:1px solid #ccc;
	border-bottom:0;
}

#example .active input {
	color:#333;
	text-shadow:none;
}

/* 日付入力 */
#example .date {		
	float:left;
	display:block;
	border:0;
	background-color:transparent;
	font-size:18px;
	color:#fff;
	text-shadow:0 0 1px #000;
	width:180px;
	cursor:pointer;
}

/* 日付入力のトリガー */
#example .caltrigger {
	display:block;
	width:30px;
	height:32px;
	float:left;
	background:url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/calendar/icon.jpg) no-repeat 0 0;
	margin-top:-8px;
	border-radius:3px;
}
#example .active .caltrigger {
	background-position: 0 -32px;		
}

/* カレンダーのルート */
#calroot {
	font-family:sans-serif;
	background-color:#fff;
	border:1px solid #ccc;
	border-width:0 1px 1px;
	padding-top:10px;
	height:160px;
	width:227px;	
	display:none;
	margin:0 0 0 -7px;
	
	-moz-border-radius-topleft:0;
	-moz-border-radius-topright:0;	
	-webkit-border-top-left-radius:0;
	-webkit-border-top-right-radius:0;		
}

/* カレンダー・ヘッダ */
#calroot #calhead {	
	padding:2px 0;
	height:22px;
} 

#calroot #caltitle {
	font-size:14px;
	color:#0150D1;	
	float:left;
	text-align:center;
	width:160px;
	line-height:20px;
	text-shadow:0 1px 0 #ddd;
}

#calroot #calnext,
#calroot #calprev {
	display:block;
	width:20px;
	height:20px;
	background:transparent url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/calendar/prev.gif) no-repeat scroll center center;
	float:left;
	cursor:pointer;
	margin-left:9px;
}

#calroot #calnext {
	background-image:url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/calendar/next.gif);
	float:right;
	margin-right:9px;
}

#calroot #calprev.caldisabled,
#calroot #calnext.caldisabled {
	visibility:hidden;	
}

/* 年・月セレクタ */
#calroot #caltitle select {
	font-size:10px;	
}

/* 日付 */
#calroot #caldays {
	height:14px;
	border-bottom:1px solid #ddd;
}
#calroot #caldays span {
	display:block;
	float:left;
	width:32px;
	text-align:center;
	font-size:11px;
}

/* container for weeks */
#calroot #calweeks {
	background-color:#fff;
	margin-top:4px;
}

/* 1週間 */
#calroot .calweek {
	clear:left;
	height:22px;
}

/* 1日 */
#calroot .calweek a {
	display:block;
	float:left;
	width:31px;
	height:20px;
	text-decoration:none;
	font-size:11px;
	margin-left:1px;
	text-align:center;
	line-height:20px;
	color:#666;
	-moz-border-radius:3px;
	-webkit-border-radius:3px; 		
} 
/* フォーカスしたときなど */
#calroot .calweek a:hover, .calfocus {
	background-color:#ddd;
}
/* 日曜 */
#calroot a.calsun {
	color:red;		
}
/* 異なる月 */
#calroot a.caloff {
	color:#ccc;		
}
#calroot a.caloff:hover {
	background-color:rgb(245, 245, 250);		
}
/* 選択できない日 */
#calroot a.caldisabled {
	background-color:#efefef !important;
	color:#ccc	!important;
	cursor:default;
}
/* 現在の日 */
#calroot #calcurrent {
	background-color:#498CE2;
	color:#fff;
}
/* 今日 */
#calroot #caltoday {
	background-color:#999;
	color:#fee;
	font-weight: bold;
}

Javascriptのサンプル

$(function() {
		$.tools.dateinput.localize("ja", {
			months: "睦月,如月,弥生,卯月,皐月,水無月,文月,葉月,長月,神無月,霜月,師走",
			shortMonths:  "1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月",
			days:         "日曜日,月曜日,火曜日,水曜日,目標日,金曜日,土曜日",
			shortDays:    "日,月,火,水,木,金,土"
		});

		$(":date").dateinput({
			format: "mm/dd/yy",
			selectors: true,
			yearRange: [-2, 2],
			lang: "ja",
			offset: [0, 0],
			speed: 100,
			firstDay: 0, // 0なら日曜、1なら月曜
			min: -1,
			max: 30,
			trigger: true,
			
			// 日付が変更されたら・・
			change: function (){
				var isoDate = this.getValue("yyyy-mm-dd");
//				alert(isoDate+"に日付が変更されました");
			},
			// カレンダーが表示されたら
			onShow: function (){
				this.today(); // 今日へ移動
			},
			// カレンダーが非表示になったら
			onHide: function (){
			},
			// カレンダーが表示される前に
			onBeforeShow: function (){
				this.addDay(3);        // 日付を3つ足す
				this.setMin(-30,true); // 最小値を設定
				this.setMax(30,true);  // 最大値を設定
			},

			css: {
				prefix: "cal",
				input: "date",

				// ids
				root: 0,
				head: 0,
				title: 0, 
				prev: 0,
				next: 0,
				month: 0,
				year: 0, 
				days: 0,
				
				body: 0,
				weeks: 0,
				today: 0,		
				current: 0,
				
				// classnames
				week: 0, 
				off: 0,
				sunday: 0,
				focus: 0,
				disabled: 0,
				trigger: 0
			} 
		});

		// 2つのイベントをバインド
		$(":date").bind("onShow onHide", function()  {
			$(this).parent().toggleClass("active"); 
		});

		// when first date input is changed
		$(":date:first").data("dateinput").change(function() {
			
		// we use its value for the seconds input min option
		$(":date:last").data("dateinput").setMin(this.getValue(), true);
	});
});