After creating a custom calendar control that works smoothly for the most part, I encountered an issue. Whenever it is posted, the control disappears even when the user is still hovering over it. I want users to be able to change months, dates, or anything else without the divCalendarDropDown disappearing unexpectedly. Any suggestions on how to fix this?
<%@ 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>
<!-- CSS styles go here -->
</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>