ASP.NET Calendar - Knowledge Base

« Back to Knowledge Base list

Add a javascript function on a calendar button

Q:

How to add a javascript function on a calendar button?

A:

Simple datepicker, ASPX code:

<ASP:TextBox runat="server" id="txtDate" />
<obout:Calendar runat="server" id="Calendar1"
        DatePickerMode = "true"
        TextBoxId = "txtDate"
        DatePickerImagePath = "styles/icon2.gif" />


Use the following script at the end of your page,

// get the calendar control image object
var calendarButton = document.getElementById("_<%=Calendar1.ClientID%>Button");

// set a custom function on the mouseover event of the datepicker image
calendarButton.onmouseover = function(){Calendar1.setDate(new Date(), new Date())};

The script is adding a custom function to the mouseover event of the datepicker button.
When the mouse will be over the datepicker button, today's date will be automatically set.