デモページ
デモページでは、いろいろなオプションを設定した Datepicker のフィールドの動きを確認できます。これらのフィールドは、デフォルトのオプションとして以下のようなものを設定済みです。
var datepicker_option = {
dateFormat: 'yy/mm/dd',
dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
monthNames: ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
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 を指定しており、３番目のフィールドが 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);
})
;
} );
.android フォルダは、エミュレータフォルダが作成される場所なので、それは完全に移動されています。 .android フォルダ これはたぶん一般的なもので、ANDROID_SDK_HOME=D:\sdkhome という環境変数を作成して移動しました。D:\sdkhome は事前に作成して実行すると、設定する前に作成したエミュレータは AVD マネージャから見えなくなりました。元々のファイル郡は、.android\avd の中にありましたが、トラブルは嫌なので新規で作成しました。
※ エミュレータが作成されるので、ここが容量をとても喰うと思います。 .AndroidStudio2.3 フォルダ これを実行するとこんなダイアログが出ました。
Android Studio がバージョンアップ時にいつも表示するアレです。 ここの中身を移動したい場合は、Android Studio\bin\idea.properties の中の設定を変更します
ただ、これも勝手に C:\Users\ユーザ名\.gradle\daemon\3.3 という空のフォルダを作成しちゃってますので注意して下さい。 参考にした記事 Changing IDE default directories used for config, plugins, and caches storage
つまり、
META 要素による、X-UA-Compatible の設定は、それより前に IE の判断の邪魔になるようなものがあると、設定しない動作になるので、X-UA-Compatible はできるだけ先頭にする必要があります。これは、VBScript 以外の対応においてもきちんと対応すべき重要な仕様です。
IEの、右上の歯車アイコンで開くメニューの中に、『互換表示設定』という項目がありますが、これは意図的にある条件にあてはまるページを IE8 より前のIE 互換で表示するものですが、その条件が大きく分けて２通りあります。
1) 登録したサイト
2) イントラネット
これによって自動的に古い IE とコンパチブルになるようになっていて、しかもこれで運用したほうが
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
