SQLの窓

2014年10月01日


jQuery UI の datepicker の基本オプションとダイアログ(datepicker)の利用

ダイアログの初期値をフィールドから取得し、変更した日付をフィールドへ戻しています

ダイアログの表示では、オプション引数の後(datepicker_option の次)に [150, 80] というような、x,y 座標を指定できます。指定しなければ画面中央に表示されます。指定した場合は、画面の左上からの座標になります。
Date:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn',
	yearRange: "c-70:c"
}
$(function() {
	$( "#datepicker" ).datepicker(datepicker_option);
	$( "#datetDialog" ).click(
		function() {
			$( "#datepicker" ).datepicker(
				"dialog",
				$("#datepicker").val(),
				function(sdate) {
					$("#datepicker").val( sdate );
				},
				datepicker_option
			);
		}
	);
});

</script>

Date: <input type="text" id="datepicker">
<br />
<input
	id="datetDialog"
	type="button"
	value="dialog">

関連する記事

ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする



posted by lightbox at 2014-10-01 22:25 | jQuery UI | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり