- とか、偉そうに書いてるけど、ほんの数行変更しただけです。すみません。
- css
.x-date-holiday a{
color: #CC00CC;
}
.x-date-sunday a{
color: #FF0000;
}
// 名前空間の定義
Ext.namespace('Triplex');
// 祭日表示対応日付フィールド
Triplex.DateFieldWithHoliday = Ext.extend(Ext.form.DateField, {
// 日付の書式を日本語で指定
format: "Y年m月d日",
// 祭日一覧を配列形式で指定
holidays: ['2009/11/23', '2009/12/23'],
// トリガーの変更
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
// 呼び出すDataMenuクラスをオリジナルのものに変更
this.menu = new Triplex.DateMenuWithHoliday({
hideOnClick: false
});
}
this.onFocus();
Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.disabledDatesRE,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue)),
holidays: this.holidays
});
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
}
});
Ext.reg('datefieldwithholiday', Triplex.DateFieldWithHoliday);
// 日付メニューをオーバーライド
Triplex.DateMenuWithHoliday = Ext.extend(Ext.menu.DateMenu, {
// イニシャライザをオーバーライド
initComponent : function(){
this.on('beforeshow', this.onBeforeShow, this);
if(this.strict = (Ext.isIE7 && Ext.isStrict)){
this.on('show', this.onShow, this, {single: true, delay: 20});
}
Ext.apply(this, {
plain: true,
showSeparator: false,
// 呼び出すDatePickerをオリジナルのものに変更
items: this.picker = new Triplex.DatePickerWithHoliday(Ext.applyIf({
internalRender: this.strict || !Ext.isIE,
ctCls: 'x-menu-date-item',
id: this.pickerId
}, this.initialConfig))
});
this.picker.purgeListeners();
Ext.menu.DateMenu.superclass.initComponent.call(this);
/**
* @event select
* Fires when a date is selected from the {@link #picker Ext.DatePicker}
* @param {DatePicker} picker The {@link #picker Ext.DatePicker}
* @param {Date} date The selected date
*/
this.relayEvents(this.picker, ['select']);
this.on('select', this.menuHide, this);
if(this.handler){
this.on('select', this.handler, this.scope || this);
}
}
});
// 日付ピッカーをオーバーライド
Triplex.DatePickerWithHoliday = Ext.extend(Ext.DatePicker, {
// private
update : function(date, forceRefresh){
if(this.rendered){
var vd = this.activeDate, vis = this.isVisible();
this.activeDate = date;
if(!forceRefresh && vd && this.el){
var t = date.getTime();
if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
this.cells.removeClass('x-date-selected');
this.cells.each(function(c){
if(c.dom.firstChild.dateValue == t){
c.addClass('x-date-selected');
if(vis){
Ext.fly(c.dom.firstChild).focus(50);
}
return false;
}
});
return;
}
}
var days = date.getDaysInMonth(),
firstOfMonth = date.getFirstDateOfMonth(),
startingPos = firstOfMonth.getDay()-this.startDay;
if(startingPos < 0){
startingPos += 7;
}
days += startingPos;
var pm = date.add('mo', -1),
prevStart = pm.getDaysInMonth()-startingPos,
cells = this.cells.elements,
textEls = this.textNodes,
// convert everything to numbers so it's fast
day = 86400000,
d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(),
today = new Date().clearTime().getTime(),
sel = date.clearTime(true).getTime(),
min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
ddMatch = this.disabledDatesRE,
ddText = this.disabledDatesText,
ddays = this.disabledDays ? this.disabledDays.join('') : false,
ddaysText = this.disabledDaysText,
format = this.format;
var holidays = this.holidays ? this.holidays.join('') : false;
if(this.showToday){
var td = new Date().clearTime(),
disable = (td < min || td > max ||
(ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
(ddays && ddays.indexOf(td.getDay()) != -1));
if(!this.disabled){
this.todayBtn.setDisabled(disable);
this.todayKeyListener[disable ? 'disable' : 'enable']();
}
}
var setCellClass = function(cal, cell){
cell.title = '';
var t = d.getTime();
cell.firstChild.dateValue = t;
if(t == today){
cell.className += ' x-date-today';
cell.title = cal.todayText;
}
if(t == sel){
cell.className += ' x-date-selected';
if(vis){
Ext.fly(cell.firstChild).focus(50);
}
}
// disabling
if(t < min) {
cell.className = ' x-date-disabled';
cell.title = cal.minText;
return;
}
if(t > max) {
cell.className = ' x-date-disabled';
cell.title = cal.maxText;
return;
}
if(ddays){
if(ddays.indexOf(d.getDay()) != -1){
cell.title = ddaysText;
cell.className = ' x-date-disabled';
}
}
if(ddMatch && format){
var fvalue = d.dateFormat(format);
if(ddMatch.test(fvalue)){
cell.title = ddText.replace('%0', fvalue);
cell.className = ' x-date-disabled';
}
}
// 日曜日の表示を変更
if(d.getDay() == 0){
cell.className += ' x-date-sunday';
}
// 祭日の表示を変更
if (holidays.indexOf(d.dateFormat('Y/m/d')) != -1) {
cell.className += ' x-date-holiday';
}
};
var i = 0;
for(; i < startingPos; i++) {
textEls[i].innerHTML = (++prevStart);
d.setDate(d.getDate()+1);
cells[i].className = 'x-date-prevday';
setCellClass(this, cells[i]);
}
for(; i < days; i++){
var intDay = i - startingPos + 1;
textEls[i].innerHTML = (intDay);
d.setDate(d.getDate()+1);
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
}
var extraDays = 0;
for(; i < 42; i++) {
textEls[i].innerHTML = (++extraDays);
d.setDate(d.getDate()+1);
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
}
this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
if(!this.internalRender){
var main = this.el.dom.firstChild,
w = main.offsetWidth;
this.el.setWidth(w + this.el.getBorderWidth('lr'));
Ext.fly(main).setWidth(w);
this.internalRender = true;
// opera does not respect the auto grow header center column
// then, after it gets a width opera refuses to recalculate
// without a second pass
if(Ext.isOpera && !this.secondPass){
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
this.secondPass = true;
this.update.defer(10, this, [date]);
}
}
}
}
});