SQLの窓

2017年03月13日


jQuery UI の Datepicker Widget のオプション


デモページ

デモページでは、いろいろなオプションを設定した Datepicker のフィールドの動きを確認できます。これらのフィールドは、デフォルトのオプションとして以下のようなものを設定済みです。
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"
}

このオプションは、日本語としてカレンダーを利用する為に最低限必要なものです。


※ ▼ コンボボックスの幅を以下で最適化しています
.ui-datepicker-month, .ui-datepicker-year {
	width: 70px!important;
}
yearRange: "c-70:c" のオプションは、c が現在の年を示す相対範囲指定です。デモページでは、2) cは当年 c-3:c+3 にあたります。そして、1) dateRangeなし は、そのオプションを削除したもので、その場合は "c-10:c+10" を指定したのと同じ事になります。 ▼ "c-3:c+3" ▼ jQuery を使用して、JSON オブジェクトのクローンを作成
	var datepicker_option1 = $.extend(true, {}, datepicker_option);
	delete datepicker_option1.yearRange;

	$("#date_picker1_fld").datepicker( datepicker_option1 );
※ デモで複数のオプション作成の為、$.extend を使用しています

altField, altFormat, appentText, autoSize

altField と altFormat は、alternate(代わりの) フィールドの定義です。altField で右横にあるフィールドを id で参照します。altFormat では、そのフィールドで表示するフォーマットを指定します(ここでは日本語を使用しています。)

さらに、appentText で、DatePicker フィールドの後ろにテキストを追加し、autoSize で jQuery UI にDatePicker フィールドの幅を調整させます。
	var datepicker_option3 = $.extend(true, {}, datepicker_option);
	datepicker_option3.altField  = "#date_picker3_fld_alt";
	datepicker_option3.altFormat  = "yy年mm月dd日";
	datepicker_option3.appendText  = " altFormat で日本語表現 ";
	datepicker_option3.autoSize = true;

	$("#date_picker3_fld").datepicker( datepicker_option3 );

※ 二番目のフィールドは固定で 120px を指定しており、3番目のフィールドが autoSize です。

ボタンでカレンダーを表示させる

通常では、フィールドにカーソルが移動するとカレンダーが表示されますが、それでは他の画面部分が隠されてしまって、エンドユーザが操作しづらい場合があります。そういう場合にボタンを追加してその操作を行う方法です。ここでは、その目的のために showOn = "button" と buttonText = "開く" を指定しています。(showOn では、both というオプションがありますが、それでは意味が無いので button のみの動作、また、buttonText では無く buttonImage で画像ボタンにする事もできます)

月を変更可

★重要 : 表示したい月表現を monthNamesShort = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"] のように設定する必要がありました

誕生日の指定等、連続していない年月の指定の為、月をコンボボックスに変更します。



※ ▼ コンボボックスの幅を以下で最適化しています
.ui-datepicker-month, .ui-datepicker-year {
	width: 70px!important;
}
※ 月を変更可にした場合、これをしておかないと、年と月が入りきらずに二段になってしまいます。 前後の月を表示して選択可能にする これは、現実のカレンダーのように、表示できる場合は前月の最後と次月の最初を表示して選択できるようにするものです。そのために showOtherMonths = true と selectOtherMonths = true を両方設定しています。 jQuery.ajax による送信処理
	// *************************************
	// 送信 <input type="submit">
	// *************************************
	$("#frm").submit( function(event){
		// 本来の送信処理はキャンセル
		event.preventDefault();

		// 入力部分をプロテクト
		$("fieldset").eq(0).prop("disabled", true);

		// エラーメッセージエリアをクリア
		$(".error").next().text( "" );

		// 結果の表示エリアを全てクリア
		$("#result").html( "" );


		// 新規送信用オブジェクト
		var formData = new FormData();

		formData.append("datepicker1", $("#date_picker1_fld").val() );
		formData.append("datepicker2", $("#date_picker2_fld").val() );
		formData.append("datepicker3", $("#date_picker3_fld").val() );
		formData.append("datepicker3_alt", $("#date_picker3_fld_alt").val() );
		formData.append("datepicker4", $("#date_picker4_fld").val() );
		formData.append("datepicker5", $("#date_picker5_fld").val() );
		formData.append("datepicker6", $("#date_picker6_fld").val() );

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "./post_action.php",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );
			options.info("送信処理が完了しました");

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
			options.info("送信処理を失敗しました");
		})
		.always(function() {

			// 入力部分のプロテクトを解除
			$("fieldset").eq(0).prop("disabled", false);
		})
		;


	} );



タグ:datepicker jquery
【jQueryの最新記事】
posted by lightbox at 2017-03-13 14:27 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

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

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