Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

jQuery UI Datepicker

今回は、jQuery UIのDatepickerについて書きます。


Datepickerは、日付の入力を便利にするものです。
f:id:gupuru:20140218230215p:plain


このように書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery ui</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
		
<input type="text" id="datepicker">

<script>
$(function(){

	$('#datepicker').datepicker();

});
</script>
</body>
</html>

実行結果↓
f:id:gupuru:20140218230215p:plain
テキストフィールドをクリックすると、上の写真のようなカレンダーが出てきます。
そして、日付を選ぶと、このように入力されます↓↓
f:id:gupuru:20140218230607p:plain


「.datepicker();」と書けば、実装できます。

$('#datepicker').datepicker();


Datepickerには、他にもたくさんの機能があります。

ここからは、いくつかを紹介します。


アニメーションをつけることもできます。

$('#datepicker').datepicker({
		showAnim: 'bounce'
	});

上のようにすると、バウンドしながら、表示されます。
アニメーションには、他にも種類があります。詳しくは、こちらを見てください。


日付の表示方法も変更できます。

$('#datepicker').datepicker({
		dateFormat:"yy-mm-dd"
	});

f:id:gupuru:20140218232224p:plain
デフォルトでは、「02/12/2014」ですが、上のようにすると、「2014-02-04」となります。


日付を選択できる範囲を限定することも可能です。

	$('#datepicker').datepicker({
		minDate:-2,
		maxDate: "+1M"
	});

「minDate」は現在より何日前まで選択できるかの設定です。
「maxDate」は現在より何日後まで選択できるかの設定です。

以上で、終わりです。他にも、まだありますので、興味がある方は、調べてみてください。


参考サイト
Datepicker | jQuery UI