YUI calendar dialog 拓展

-------------------------yahooCalendarDialog.js-----------------------------------------------
function hibuCalendar(options){
    var ops = {
        dateInputId: null,
        calendarImgId: null,
        dialog: null,
        calendar: null,
        containerClass: 'hibuDatepicker',
        headerText: 'Please Pick Date',
        calendarId: 'cal' + ybApp.getRandomStr(),
        dialogId: 'dialog' + ybApp.getRandomStr(),
        isStartDate: false,
        selectedDate: null
    }

    $.extend(ops, options);

    function initialize(ops){
        initDialog(ops);
        initCalendar(ops);
        bindEvent(ops);
    }

    function bindEvent(ops){
        $("#" + ops.calendarImgId).click(function(){
            ops.dialog.show();
        });
    }

    function isAncestor(el){
        return ($(el).parents("." + ops.containerClass).length > 0);
    }

    function initDialog(ops){
        if(!ops.dialog){
            $(document).click(function(e){
                var el = e.target;
                var dialogEl = ops.dialog.element;
                if (el != dialogEl && !isAncestor(el) && el.id != ops.calendarImgId) {
                    ops.dialog.hide();
                }
            });

            ops.dialog = new YAHOO.widget.Dialog(ops.dialogId, {
                visible:false,
                context:[ops.calendarImgId, "tl", "bl"],
                draggable:false,
                close:true
            });
            ops.dialog.setHeader(ops.headerText);
            ops.dialog.setBody('<div id="'+ ops.calendarId +'"></div>');
            ops.dialog.render(document.body);
            $(ops.dialog.element).addClass(ops.containerClass);

            ops.dialog.showEvent.subscribe(function() {
                if (YAHOO.env.ua.ie) {
                    ops.dialog.fireEvent("changeContent");
                }
            });
            //hide for IE7
            var dialogObj = $("#" + ops.dialogId);
            dialogObj.hide();
            $("#" + ops.calendarImgId).click(function(){
                dialogObj.show();
            });
        }
    }

    function initCalendar(ops){
        if (!ops.calendar) {
            var navConfig = {
                strings : {
                    month: "Choose Month",
                    year: "Enter Year",
                    submit: "OK",
                    cancel: "Cancel",
                    invalidYear: "Please enter a valid year"
                },
                monthFormat: YAHOO.widget.Calendar.SHORT,
                initialFocus: "year"
            };
            
           
            
            ops.calendar = new YAHOO.widget.Calendar(ops.calendarId, {
                iframe:false,          // Turn iframe off, since container has iframe support.
                hide_blank_weeks:true, // Enable, to demonstrate how we handle changing height, using changeContent
                navigator: navConfig
            });
            
            //ops.calendar.render();
            ops.calendar.selectEvent.subscribe(function() {
                
                if (ops.calendar.getSelectedDates().length > 0) {

                    var selDate = ops.calendar.getSelectedDates()[0];
                    var dStr = selDate.getDate();
                    var mStr = selDate.getMonth() + 1;
                    var yStr = selDate.getFullYear();
                    
                    if(setRange(ops.isStartDate,selDate)){
                        var selectDate = mStr + "/" + dStr + "/" + yStr;
                        $("#" + ops.dateInputId).val(selectDate);
                        $("#" + ops.dateInputId).attr("date",$("#" + ops.dateInputId).val());
                        ops.calendar.cfg.setProperty("pagedate", selectDate.replace(/\/\w+\//, "/"));
                        ops.calendar.cfg.setProperty("selected", selectDate);
                    }else{
                        changeCalendarSelect();
                    }
                } else {
                    $("#" + ops.dateInputId).val("");
                }
                ops.dialog.hide();
            });

            ops.calendar.renderEvent.subscribe(function() {
                ops.dialog.fireEvent("changeContent");
            });
            ops.dialog.hide();
        }
        
        var date;
        if(ops.selectedDate != "" && ops.selectedDate != null){
            date = ops.selectedDate;
        }else{
            if(ops.isStartDate){
                date = formatDate(ybApp.filter.startDate);
                $("#tDatePickerFrom").val(date);
            }else{
                date = formatDate(ybApp.filter.endDate);
                $("#tDatePickerTo").val(date);
            }
        }
        ops.calendar.cfg.setProperty("pagedate", date.replace(/\/\w+\//, "/"));
        ops.calendar.cfg.setProperty("selected", date);
        
        ops.calendar.render();
    }
    
    initialize(ops);
    return ops;
}

---------------------------------------------------------------------------------------------------------------------------------

function initCalendar(){
    var inputStartDate = ($("#tDatePickerFrom").val() != "") ? $("#tDatePickerFrom").val() : null;
    var inputEndDate = ($("#tDatePickerTo").val() != "") ? $("#tDatePickerTo").val() : null;

    startCalendar = new hibuCalendar({
        dateInputId: "tDatePickerFrom",
        calendarImgId: "startCalendarImg",
        selectedDate: inputStartDate,
        isStartDate: true
    });
    endCalendar = new hibuCalendar({
        dateInputId: "tDatePickerTo",
        calendarImgId: "endCalendarImg", //here
        selectedDate: inputEndDate
    });
}

changeCalendar(startCalendar.dialog, startCalendar.calendar, endCalendar.dialog, endCalendar.calendar);

function changeCalendar(startDialog, startCalendar, endDialog, endCalendar){
    var inputStartDate = ($("#tDatePickerFrom").val() != "") ? $("#tDatePickerFrom").val() : null;
    var inputEndDate = ($("#tDatePickerTo").val() != "") ? $("#tDatePickerTo").val() : null;
    $("#tDatePickerFrom").attr("date",inputStartDate);
    $("#tDatePickerTo").attr("date",inputEndDate);
    startCalendar = new hibuCalendar({
        dateInputId: "tDatePickerFrom",
        calendarImgId: "startCalendarImg",
        selectedDate: inputStartDate,
        dialog: startDialog,
        calendar: startCalendar
    });
    endCalendar = new hibuCalendar({
        dateInputId: "tDatePickerTo",
        calendarImgId: "endCalendarImg",
        selectedDate: inputEndDate,
        dialog: endDialog,
        calendar: endCalendar
    });
}

function changeCalendarSelect(startOrEnd){
    if(startOrEnd == "start"){
        setRange(true, new Date($("#tDatePickerFrom").val()));
        $("#tDatePickerFrom").attr("date",$("#tDatePickerFrom").val());
    }else{
        setRange(false, new Date($("#tDatePickerTo").val()));
        $("#tDatePickerTo").attr("date",$("#tDatePickerTo").val());
    }
    validateDate();
    changeCalendar(startCalendar.dialog, startCalendar.calendar, endCalendar.dialog, endCalendar.calendar);
}

----------------------------------------------------------------------------------------------------------------

<span class="dateFrom">
                <span class="boldData"><h:outputText
                        value="#{msg['common.filter.from']}" />:</span> <span
                        class="hibuDatepicker filterInput"><input
                    id="tDatePickerFrom" class="ybInputStartDate ybInputDate inputField" value=""
                    size="8" οnchange="changeCalendarSelect('start');"/> <span id="startCalendarImg" class="ybPickStartDate hibuCalendarPop" title="From">&#160;&#160;&#160;&#160;&#160;&#160;</span>
                </span>
            </span>
            <span class="dateTo">
                <span class="dateTo">
                    <span class="boldData"><h:outputText
                            value="#{msg['common.filter.to']}" />:</span> <span
                        class="hibuDatepicker filterInput"> <input
                        id="tDatePickerTo" class="ybInputEndDate ybInputDate inputField" value=""
                        size="8" οnchange="changeCalendarSelect('end');"/> <span id="endCalendarImg" class="ybPickEndDate hibuCalendarPop" title="To">&#160;&#160;&#160;&#160;&#160;&#160;</span>
                    </span>
                </span>
            </span>