ダイアログの初期値をフィールドから取得し、変更した日付をフィールドへ戻しています ダイアログの表示では、オプション引数の後(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: ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
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 を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする
|
|
【jQuery UIの最新記事】
- Google がホスティングしている jQuery UI の CSS のテーマのチェックをする jQuery UI ボタン
- jQuery UI のタブを使用時に、前回開いたタブを localStorage に保存して、次回の表示に使用する
- jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする
- jQuery UI の Spinner のボタン部分だけを利用して、マウスでクリックしたままでイベントが継続する増減ボタンを作成する
- jQuery UI の Accordion Widget(アコーディオン)で、タイトルとコンテンツの指定方法
- jQuery : table の行をクリックして、jQuery UI のダイアログを表示し、行データをダイアログ内で変更して table の列にデータを戻す
- jQuery UI(tabs) の内部コードを書き換えて、タブ上でのキーボード処理をキャンセルする
- jQuery UI の slider と Google のホスティング
- jQuery UI の タブの表示切替でのアニメーション方法
