ERP/TradeManage/Scripts2/DateSelectBox.js

/// <reference path="../Scripts/MicrosoftAjax.js" />
/// <reference path="../Scripts/jquery.min.js" />
/// <reference path="jquery.easyui.min.js" />



DateSelectBox = function () {
    this.ControlID = "Window_DateSelectBox";
    this.ParentElement = null; //要加入的父容器
    var My = this;
    var cmdPrevMonth = My.ControlID + "_" + "cmdPrevMonth";
    var txtYear = My.ControlID + "_" + "txtYear";
    var listYearName = My.ControlID + "_" + "listYearName";
    var txtMonth = My.ControlID + "_" + "txtMonth";
    var listMonthName = My.ControlID + "_" + "listMonthName";
    var cmdNextMonth = My.ControlID + "_" + "cmdNextMonth";
    var ListDateDay = My.ControlID + "_" + "ListDateDay";
    var cmdPrevYear = My.ControlID + "_" + "cmdPrevYear";
    var cmdPrevMonth2 = My.ControlID + "_" + "cmdPrevMonth2";
    var cmdDay = My.ControlID + "_" + "cmdDay";
    var cmdNextMonth2 = My.ControlID + "_" + "cmdNextMonth2";
    var cmdNextYear = My.ControlID + "_" + "cmdNextYear";
    var cmdClose = My.ControlID + "_" + "cmdClose";
    var cmdMenu = My.ControlID + "_" + "cmdMenu";

    var SelectYear = 0;
    var SelectMonth = 0;
    var SelectDate = null;
    var ListDate = new Array();

    var EventHandler = new Sys.EventHandlerList();

    //#region 加载
    this.Load = function () {
        Init();
        var CurrentDate = new Date();
        SelectYear = CurrentDate.getFullYear();
        SelectMonth = CurrentDate.getMonth() + 1;
        BindDateTime();

        $("#" + txtYear + ",#" + txtMonth, My.ParentElement).hover(function () {
            $(this).css("background-color", "#ffd700");
        }, function () {
            $(this).css("background-color", "");
            });

        $("#" + cmdPrevYear, My.ParentElement).live("click", function () {
            SelectYear -= 1;
            $("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
            $("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
            $("#" + listYearName, My.ParentElement).hide();
            $("#" + listMonthName, My.ParentElement).hide();
            BindDateTime();
        });
        $("#" + cmdNextYear, My.ParentElement).live("click", function () {
            SelectYear += 1;
            $("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
            $("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
            $("#" + listYearName, My.ParentElement).hide();
            $("#" + listMonthName, My.ParentElement).hide();
            BindDateTime();
        });

        $("#" + cmdPrevMonth + ",#" + cmdPrevMonth2, My.ParentElement).live("click", function () {
            SelectMonth -= 1;
            if (SelectMonth == 0) { SelectMonth = 12; SelectYear--; }
            $("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
            $("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
            $("#" + listYearName, My.ParentElement).hide();
            $("#" + listMonthName, My.ParentElement).hide();
            BindDateTime();
        });
        $("#" + cmdNextMonth + ",#" + cmdNextMonth2, My.ParentElement).live("click", function () {
            SelectMonth += 1;
            if (SelectMonth == 13) { SelectMonth = 1; SelectYear++; }
            $("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
            $("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
            $("#" + listYearName, My.ParentElement).hide();
            $("#" + listMonthName, My.ParentElement).hide();
            BindDateTime();
        });

        $('#' + listYearName, My.ParentElement).live("change", function () {
            SelectYear = parseInt($(this).val());
            $("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
            $("#" + listYearName, My.ParentElement).hide();
            BindDateTime();
        });
        $('#' + listMonthName, My.ParentElement).live("change", function () {
            SelectMonth = parseInt($(this).val());
            $("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
            $("#" + listMonthName, My.ParentElement).hide();
            BindDateTime();
        });

        $("#" + txtYear, My.ParentElement).click(function () {
            BindListYear();
            $("#" + txtYear, My.ParentElement).hide();
            $("#" + listYearName, My.ParentElement).show();
            $("#" + listMonthName, My.ParentElement).hide();
            $("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
        });
        $("#" + txtMonth, My.ParentElement).click(function () {
            $("#" + txtMonth, My.ParentElement).hide();
            $("#" + listMonthName, My.ParentElement).show();
            $("#" + listYearName, My.ParentElement).hide();
            $("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
            $("#" + listMonthName, My.ParentElement).val(SelectMonth);
        });


        $("#" + cmdClose, My.ParentElement).live("click", function () {
            $.fancybox.close();
        });

        $("#" + ListDateDay + " :checkbox", My.ParentElement).live("click", function () {
            var cDate = $(this).val();
            if (this.checked == true) {
                ListDate.push(cDate);
            } else {
                for (var i = ListDate.length - 1; i >= 0; i--) {
                    if (ListDate[i] == cDate) { Array.removeAt(ListDate,i); break; }
                }
            }
            OnSelectChange();
        });



    }
    //#endregion
    //#region 初始化
    function Init() {
        if (My.ParentElement == null) My.ParentElement = $(document.body);
        if ($("#" + My.ControlID, My.ParentElement).length > 0) return;
        var htmlString = new Sys.StringBuilder();
        htmlString.append("<div style='display: none;'>");
        htmlString.append("<div id='" + My.ControlID + "' title='选择' style='width: auto; height: auto;' >");
        htmlString.append('<table style="border-width: 1px; width: 160px; border-color: #5f9fd1;background-color: #5f9fd1;">');
        htmlString.append('<tr>');
        htmlString.append('<td style="width: 100%; background-color: #ffffff;">');
        htmlString.append('<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;height: 20px; border-color: #5f9fd1;">');
        htmlString.append('<tr>');
        htmlString.append('<td id="' + cmdPrevMonth + '" style="color: White; font-size: 12px; cursor: pointer; width: 16px;background-color: #5f9fd1;" title="向前翻1月" align="center">&lt;</td>');
        htmlString.append('<td  style="font-size: 12px; width: 65px; cursor: default;text-align: center;" title="点击这里选择年份">');
        htmlString.append('<span id="' + txtYear + '" style="width: 65px; text-align: center;">2012年</span>');
        htmlString.append('<select id="' + listYearName + '" style="width: 65px; font-size: 12px;display: none; "></select>');
        htmlString.append('</td>');
        htmlString.append('<td style="font-size: 12px; width: 50px; cursor: default;text-align: center;" title="点击这里选择月份">');
        htmlString.append('<span id="' + txtMonth + '" style="width: 50px;text-align:center;display: none;">2月</span>');
        htmlString.append('<select id="' + listMonthName + '" style="width: 50px; font-size: 12px;display: none; ">');
        htmlString.append('<option value="1" selected>1月</option>');
        htmlString.append('<option value="2" selected>2月</option>');
        htmlString.append('<option value="3" selected>3月</option>');
        htmlString.append('<option value="4" selected>4月</option>');
        htmlString.append('<option value="5" selected>5月</option>');
        htmlString.append('<option value="6" selected>6月</option>');
        htmlString.append('<option value="7" selected>7月</option>');
        htmlString.append('<option value="8" selected>8月</option>');
        htmlString.append('<option value="9" selected>9月</option>');
        htmlString.append('<option value="10" selected>10月</option>');
        htmlString.append('<option value="11" selected>11月</option>');
        htmlString.append('<option value="12" selected>12月</option>');
        htmlString.append('</select>');
        htmlString.append('</td>');
        htmlString.append('<td id="' + cmdNextMonth + '" style="color: White; font-size: 12px; cursor: pointer; width: 16px;background-color: #5f9fd1;" title="向后翻1月" align="center">&gt;</td>');
        htmlString.append('</tr>');
        htmlString.append('</table>');
        htmlString.append('</td>');
        htmlString.append('</tr>');
        htmlString.append('<tr><td>');
        htmlString.append('<table id="' + ListDateDay + '" border="1" cellspacing="1" style="width: 100%; background-color: #e4f8f9; border-top: 1px solid #e8e5d2; border-left: 1px solid #e8e5d2;border-right: 0px; border-bottom: 0px;" cellpadding="0">');
        htmlString.append('<tr id="' + cmdMenu + '" align="center" style="height:20px;cursor: move; background-color: #5f9fd1;border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2;">');
        htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: red; font-size: 12px">日</td>');
        htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">一</td>');
        htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">二</td>');
        htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">三</td>');
        htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">四</td>');
        htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: #ffffff; font-size: 12px">五</td>');
        htmlString.append('<td style="border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #e8e5d2;border-bottom: 1px solid #e8e5d2; color: red; font-size: 12px">六</td>');
        htmlString.append('</tr>');
        htmlString.append('</table>');
        htmlString.append('</td></tr>');
        htmlString.append('<tr><td>');
        htmlString.append('<table border="0" cellspacing="0" cellpadding="0" bgcolor="#e4f8f9" style="width:100%;">');
        htmlString.append('<tr>');
        htmlString.append('<td align="left">');
        htmlString.append('<input id="' + cmdPrevYear + '" style="border-width: 1px; border-style: outset; width: 20px;font-size: 12px;cursor: pointer;" title="向前翻1年" value="<<" type="button" />');
        htmlString.append('<input id="' + cmdPrevMonth2 + '" style="border-width: 1px; border-style: outset;width: 20px; font-size: 12px;cursor: pointer;" title="向前翻1月" value="<" type="button" />');
        htmlString.append('</td>');
        htmlString.append('<td align="center" style="width:40px;">');
        htmlString.append('</td>');
        htmlString.append('<td align="right">');
        htmlString.append('<input id="' + cmdNextMonth2 + '" style="border-width: 1px; border-style: outset; height: 20px;width: 20px; font-size: 12px;cursor: pointer;" title="向后翻1月" value=">" type="button" />');
        htmlString.append('<input id="' + cmdNextYear + '" style="border-width: 1px; border-style: outset; height: 20px; width: 20px; font-size: 12px;cursor: pointer;" title="向后翻1年" value=">>" type="button" />');
        htmlString.append('</td>');
        htmlString.append('</tr>');
        htmlString.append('</table>');
        htmlString.append('</td></tr>');
        htmlString.append('</table>');
        htmlString.append("</div>");
        htmlString.append("</div>");
        My.ParentElement.append(htmlString.toString());
    }
    //#endregion
    //#region 显示
    this.Show = function (obj) {
        ListDate = obj;
        if (ListDate == null) ListDate = new Array();
        //SelectDate = null;
        //var CurrentDate = new Date();
        //SelectYear = CurrentDate.getFullYear();
        //SelectMonth = CurrentDate.getMonth() + 1;
        //$("#" + listMonthName, My.ParentElement).hide()
        //$("#" + listYearName, My.ParentElement).hide();
        BindDateTime();
        $.fancybox({
            'autoScale': false,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'href': '#' + My.ControlID,
            'onStart': function () {
            }
        }, 0);
    }
    //#endregion
    //#region 绑定年份下拉框
    function BindListYear() {
        var html = new Sys.StringBuilder();
        for (var i = SelectYear - 20; i < SelectYear; i++) {
            html.append("<option value='" + i + "'>" + i + "年</option>");
        }
        for (var i = SelectYear; i < SelectYear + 20; i++) {
            if (i == SelectYear) { html.append("<option value='" + i + "' selected>" + i + "年</option>"); }
            else { html.append("<option value='" + i + "'>" + i + "年</option>"); }
        }
        $('#' + listYearName, My.ParentElement).html(html.toString());
    }
    //#endregion
    //#region 绑定日期
    function BindDateTime() {
        var SelectDateTime = Date.parseInvariant(SelectYear + "-" + SelectMonth + "-1", "yyyy-M-d");
        $("#" + txtYear, My.ParentElement).html(SelectYear + "年").show();
        $("#" + txtMonth, My.ParentElement).html(SelectMonth + "月").show();
        var week = SelectDateTime.getDay();
        var day = SelectDateTime.getDate() - week;
        var StartDate = CloneDate(SelectDateTime);
        StartDate.setDate(day);
        var html = new Sys.StringBuilder();
        var index = 0;
        var CurrentYear = 0;
        var CurrentMonth = 0;
        var CurrentDay = 0;
        if (SelectDate != null) {
            CurrentYear = SelectDate.getFullYear();
            CurrentMonth = SelectDate.getMonth() + 1;
            CurrentDay = SelectDate.getDate();
        }
        var ToDate = new Date();
        var ToYear = ToDate.getFullYear();
        var ToMonth = ToDate.getMonth() + 1;
        var ToDay = ToDate.getDate();

        for (var i = 1; i < 40; i++) {
            if (index == 0) html.append('<tr align="center" name="DataGridRow">');
            var month = StartDate.getMonth() + 1;
            var year = StartDate.getFullYear();
            day = StartDate.getDate();
            var cDate = year + "-" + month + "-" + day;
            var checkState = 0;
            $(ListDate).each(function () {
                if (this == cDate) { checkState=1; return false; }
            });
            var FontColor = "";
            if (index == 0 || index==6) FontColor = "color: red;";
            var TdColor = "background-color: #e0e0e0;";
            if (year == ToYear && month == ToMonth && day == ToDay) TdColor = "background-color: #ffd700;";
            if (year == CurrentYear && month == CurrentMonth && day == CurrentDay) TdColor = "background-color: #00ffff;";
            html.append('<td style="width: 20px; height: 20px; font-weight: bold;' + FontColor + TdColor + 'font-size: 12px;cursor: pointer; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff;border-right: 1px solid #e8e5d2; border-bottom: 1px solid #e8e5d2;" month="' + month + '" title="' + month + '月' + day + '日">' + day + '<input type="checkbox" value="' + cDate + '"');
            if (checkState == 1) html.append(" checked='checked'");
            html.append(" /></td>");
            index++;
            if (index == 7) { html.append('</tr>'); index = 0; }
            StartDate.setDate(day + 1);
        }
        html.append('<td colspan="3" align="right"><input id="' + cmdClose + '" style="border-width: 1px; border-style: outset; height: 30px;width:99%; font-size: 12px;cursor: pointer; "	value="关闭" type="button" /></td></tr>');
        $("#" + ListDateDay + " tr[name='DataGridRow']", My.ParentElement).remove();
        $("#" + ListDateDay, My.ParentElement).append(html.toString());
    }
    //#endregion
    //#region 复制日期
    function CloneDate(datetime, s) {
        var dt = new Date();
        dt.setFullYear(datetime.getFullYear());
        dt.setMonth(datetime.getMonth());
        dt.setDate(datetime.getDate());
        dt.setHours(datetime.getHours());
        dt.setMinutes(datetime.getMinutes());
        dt.setSeconds(datetime.getSeconds());
        dt.setMilliseconds(datetime.getMilliseconds());
        return dt;
    }
    //#endregion

    //#region 点击确定时触发
    this.SelectChange = function (handler) {
        EventHandler.addHandler('SelectChange', handler);
    }
    //#endregion
    //#region 点击确定时触发
    function OnSelectChange() {
        var h = EventHandler.getHandler('SelectChange');
        if (h) h(ListDate);
    }
    //#endregion

}