Triplex Systems★開発メモ

• ExtJSってｲｲ
• よし、今度のプロジェクトで使っちゃうぞー
• 日付フォーム、祭日対応してないじゃん！
• な、なんだってー

• とか、偉そうに書いてるけど、ほんの数行変更しただけです。すみません。
• css

.x-date-holiday a{
    color: #CC00CC;
}
.x-date-sunday a{
    color: #FF0000;
}

• JavaScript

// 名前空間の定義
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]);
	            }
	        }
        }
    }
});