Many data entry forms have one or more text fields that the user should fill with a date value. Many sites have a button near these fields that when clicked pops up a new small window with a calendar, to help the user select the date. When the user clicks on a day (rendered as a hyperlink), this popup calendar window is closed and the selected date is shown in the input textbox control of the parent window. This feature can be easily reproduced in ASP.NET by using the Calendar control and a bit of client-side javascript code.
First of all, let's write the parent window's ASPX code. All we need is the input TextBox server control and a HTML button:
As you see, when the button is pressed it calls a javascript procedure that expects in input the name of the textbox control that will be filled with the selected date, and the width and height of the popup calendar window that will be opened. Here's the javascript code, defined within the page's <HEAD> section:
<script language=javascript>
function PopupPicker(ctl,w,h)
{
var PopupWindow=null;
settings='width='+ w + ',height='+ h + ',location=no,directories=no,
' menubar=no,toolbar=no,status=no,scrollbars=no,resizable=no,
' dependent=no';
PopupWindow=window.open('DatePicker.aspx?Ctl=' + ctl,'DatePicker',
' settings);
PopupWindow.focus();
}
</script>
The procedure above uses window.open to open the popup window with the specified size, and with no scrollbar, menu, toolbar, status bar, and makes it not resizable. The first parameter is the Url of the page to load into the new window, and from the code above you see that it loads a DatePicker.aspx page with a Ctl parameter in the querystring, whose value is that passed in input to the PopupPicker procedure.
It's quick, easy and you get access to all the articles on DevX.
This registration/login is to allow you to read articles on devx.com. Already a member?
To become a member of DevX.com create your Member Profile by completing the form below. Membership is free!
If you have a hot tip and we publish it, we'll pay you. However, due to accounting overhead we no longer pay $10 for a single tip submission. You must accumulate 10 acceptable tips to receive payment. Be sure to include a clear explanation of what the technique does and why it's useful. If it includes code, limit it to 20 lines if possible. Submit your tip here.
