2007年9月11日火曜日

Extでカレンダー表示

DatePickerをid属性と結びつければ表示される。とりあえず日付を選択したら日付をalertするようにしてみた。詳しい説明は不要ですね。

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Sample - DatePicker</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript"><!--
var DatePickerSample = function() {
var picker = false

return {
init : function() {
if (!picker) {
picker = new Ext.DatePicker({
dayNames:['日', '月', '火', '水',
'木', '金', '土'],
monthNames:['1月', '2月', '3月', '4月',
'5月', '6月', '7月', '8月',
'9月','10月','11月','12月'],
prevText:'先月',
nextText:'翌月',
todayText:'今日'
});
picker.render('calendarId');
picker.on('select', this.onSelect, this);
}
},

onSelect : function(picker, date) {
alert(date);
return true;
}
};

}();

Ext.onReady(DatePickerSample.init, DatePickerSample, true);
//--></script>
</head>
<body>
<div id='calendarId' />
</body>
</html>

0 件のコメント: