Popup Calendar problem - not working when change to addListener

Question

I'm having a problem putting Matt's Calendar Popup when using it for addEventListener. I'm doing it on ASP.net VB.

This aspx code works but only for IE

<script language="JavaScript" src="/Content/Scripts/CalendarPopup.js" type="text/javascript"></script>
        <script language="JavaScript" type="text/javascript">
            var cal = new CalendarPopup();
    </script>

<asp:TextBox ID="txtRequestDate" runat="server" MaxLength="10" Style="width: 70px; height: 15px;
                            border: 1px solid silver;"></asp:TextBox>

<a href="#" onclick="cal.select(document.forms['frmMain'].txtRequestDate,'aFrom','dd/MM/yyyy'); return false;"
                            name="aFrom" id="aFrom">Select</a>

But when I change it to addEventListener (so that it will work on Chrome)

Popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("selCalendar").addEventListener("click", showCalendar, false);
});


function showCalendar() {
    var cal = new CalendarPopup();
    //alert("After CalendarPopup");
    cal.select(window.document.forms['frmMain'].txtRequestDate,'aFrom','dd/MM/yyyy'); return false;
}

aspx code

<script type="text/javascript" src="../../Content/Scripts/Popup.js"></script>
<script type="text/javascript" src="../../Content/Scripts/CalendarPopup.js"></script>

<a href="#" id="selCalendar">Select</a></td>

Please help to fix this problem as I'm doing trying to do this for 2 days now. Thanks

Link of Matt Kruse's CalendarPopup.js ==> http://forge.ipsl.jussieu.fr/epoll/browser/trunk/root/static/js/CalendarPopup.js?rev=61

score 0 · Answer 1 · answered Sep 08 '21 at 08:52

0

For start one basic bug is that you do not get the correct id from your textbox

on the javascript code, replace the txtRequestDate with <%=txtRequestDate.ClientID%>

related : Accessing control client name and not ID in ASP.NET

answered Sep 08 '21 at 08:52

Aristos

66,005
16
114
150

Thanks for replying, Aristos but... I tried both codes inside Popup.js. Both didn't work `cal.select(window.document.forms['frmMain'].txtRequestDate.UniqueID,'aFrom','dd/MM/yyyy'); return false; }` and `cal.select(window.document.forms['frmMain'].<%=txtRequestDate.ClientID%>,'aFrom','dd/MM/yyyy'); return false;` – Tracer1 Sep 08 '21 at 09:12
@Tracer1 can you open please the debugger on the browser to see what javascript error do you get ? and go from there – Aristos Sep 08 '21 at 11:56

score 0 · Accepted Answer · answered Sep 08 '21 at 14:23

While this might not help?

If you just drop in a plane jane text box, and choose this:

Then without any code then you get this:

So, as a FYI, there is a nice date picker built in.

   <asp:TextBox ID="TextBox1" runat="server" TextMode="DateTimeLocal" Width="188px"></asp:TextBox>

So if you set txt mode, then you get this:

And if text mode = date, then this:

Now, this may or may not help you, but a nice date picker is built in - and no code or add-ins is required.

Popup Calendar problem - not working when change to addListener

2 Answers2