ASP自定义日历控件在回发时消失

本文关键字:消失 自定义 日历 控件 ASP | 更新日期: 2023-09-27 18:03:37

我已经创建了一个自定义日历控件,它在大多数情况下工作完美。我的问题是,每当它发布,控制消失,即使当用户仍然悬停。我希望他们能够改变月份,日期,等等,而不让divCalendarDropDown消失。有什么建议吗?

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DateTimePickerObject.ascx.cs" Inherits="DateTimePicker.DateTimePickerObject" %>
<script type="text/javascript">
    var canHover = true;
    var calendarControl = $(".calendarControl"), flip = $(".divCalendarDropDown"),
    state = $.cookie("ToggleStatus");
    function setCalendarVisibility(className) {
        if (canHover) {
            var dropDown = document.getElementById("divCalendarDropDown");
            dropDown.className = className;
        }
    };
    function OnClick_Calendar() {
        var dropDown = document.getElementById("divCalendarDropDown");
        if (dropDown.style.height >= 1) {
            canHover = true;
            dropDown.className = 'divHidden';
        }
        else {
            canHover = false;
            dropDown.className = 'divNormal';
        };
    };
</script>
<style type="text/css">
    .textboxCalendar {
        position: relative;
        display: block;
        width: 215px;
    }
    .imgCalendar {
        position: absolute;
        left: 225px;
        top: 0px;
        margin: 0px 5px 0px 4px;
        height: 20px;
        width: auto;
    }
    .imgCalendar:hover {
        margin: 0px 7px 0px 4px;
        height: 21px;
    }
    div {
        float: left;
        width: 250px;
        top: 0px;
        margin-top: -2px;
        -webkit-transition:all ease-in-out 1s;
        -moz-transition:all ease-in-out 1s;
        -ms-transition:all ease-in-out 1s;
        -o-transition:all ease-in-out 1s;
        transition:all ease-in-out 1s;
        border-collapse: separate;
    }
        div:hover {
        }
    .divNormal {
        height: 0px;
        overflow: visible;
    }
    .divHidden {
        height: 0px;
        overflow: hidden;
    }
    .calendar {
        background-color: whitesmoke;
        position: relative;
        font-family: 'Segoe UI', Tahoma;
        opacity: 1;
    }
        .calendar a {
            font-weight: bolder;
        }
    .calendar th {
        font-weight: bold;
        color: #2C5A96;
    }
    .nextPrevStyle {
    }
    .dayHeaderStyle {
    }
    .dayStyle {
        background-color: #E3ECF7;
    }
    .otherMonthDayStyle {
        background-color:  #fbfbfb;
    }
    .selectedDayStyle {
    }
    .titleStyle {
        background-color: #E3ECF7;
    }
    .todayDayStyle {
        background-color: #fbdf93;
    }
    .weekendDayStyle {
        background-color:  #c5d6f1;
    }
    .calendarControl {
        position: relative;
        z-index: 1;
        height: auto;
        width: 252px;
    }
</style>
<div class="calendarControl">
    <asp:TextBox runat="server" ID="textboxCalendar" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');" onBlur="textboxCalendar_OnBlur()" ReadOnly="True" CssClass="textboxCalendar"></asp:TextBox>
    <span id="spanCalendar" class="spanCalendar"><img id="imgCalendar" src="calendar.png" alt="Calendar" class="imgCalendar" onclick="OnClick_Calendar();"/></span>
    <div id="divCalendarDropDown" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">
        <asp:Calendar runat="server" ID="calendarMain" OnSelectionChanged="calendarMain_SelectionChanged" CssClass="calendar" NextPrevFormat="CustomText" NextMonthText=">>" PrevMonthText="<<" SelectionMode="Day" >
            <NextPrevStyle CssClass="nextPrevStyle" />
            <DayHeaderStyle CssClass="dayHeaderStyle" />
            <DayStyle CssClass="dayStyle" />
            <OtherMonthDayStyle CssClass="otherMonthDayStyle" />
            <SelectedDayStyle CssClass="selectedDayStyle" />
            <TitleStyle CssClass="titleStyle" />
            <TodayDayStyle CssClass="todayDayStyle" />
            <WeekendDayStyle CssClass="weekendDayStyle" />
        </asp:Calendar>
    </div>
</div>

ASP自定义日历控件在回发时消失

我想把这个放在评论中,但我还不能;)

我不认为你可以禁用回发到服务器与asp:Calendar控件,所以尝试添加一个默认类到你的DIV "divCalendarDropDown" -例如

<div id="divCalendarDropDown" class="divNormal" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">

如果这不起作用,我会尝试添加另一个动作的DIV像onblur on onload -例如

<div id="divCalendarDropDown" onload="setCalendarVisibility('divNormal');" onMouseOver="setCalendarVisibility('divNormal');" onMouseOut="setCalendarVisibility('divHidden');">

希望这对你有帮助!JM