hide calendar depend on ASP:TEXTBOX

Question

User1741069310 posted

HI

I finding a way to hide ASP:calendar in case of mouseout ASP:TEXTBOX

visible ASP:calendar in case of mouseover ASP:TEXTBOX

<asp:TableCell>From&nbsp;:<asp:TextBox runat="server" ID="LastUpdateDateTimeFrom" Format="yyyy-MM-dd" AutoPostback="True" TextChanged="LastUpdateDateTimeFrom_TextChanged" /><br />
<asp:Calendar id="LastUpdateDateTimeLastUpdateDateTimeFromCal" runat="server" FirstDayOfWeek="Sunday" Enabled="True" Format="yyyy-MM-dd" OnSelectionChanged="DateFrom_Selection_Change"></asp:Calendar>
</asp:TableCell>

Thanks

Francis SZE

Answer 1

User61956409 posted

Hi Francis SZE,

finding a way to hide ASP:calendar in case of mouseout ASP:TEXTBOX

visible ASP:calendar in case of mouseover ASP:TEXTBOX

You can refer to the following code snippets to hide asp:Calendar control.

From&nbsp;:<asp:TextBox runat="server" ID="LastUpdateDateTimeFrom" Format="yyyy-MM-dd" AutoPostBack="True" OnTextChanged="LastUpdateDateTimeFrom_TextChanged" onmouseout="myfunc()" /><br />

<script>
    function myfunc() {
        var fromdate = document.getElementById('<%=LastUpdateDateTimeFrom.ClientID%>').value;

        //your code logic here
        if (fromdate != "") {
            document.getElementById('<%=LastUpdateDateTimeLastUpdateDateTimeFromCal.ClientID%>').style.visibility = "hidden";
        }
    }
</script>

Test Result:

Note:

When the loses focus from asp:TextBox "LastUpdateDateTimeFrom", which will cause page postback, and the asp:Calendar control would be displayed again. If possible, you can hide the asp:Calendar control within LastUpdateDateTimeFrom_TextChanged event.

With Regards,

Fei Han