The CalendarExtender control is awesome. My only issue with it is that, when the textbox date field is entered by tabbing (using the keyboard), the calendar pops up and the user is
forced to use the mouse to make a selection, even if the selection is today. Many users like to be able to hit a key or a couple keys to select a date close to today without having to take their hands off the keyboard.
I solved this by adding a simple javascript fuction that is shared below in case anyone else has a similar need. The result is a CalendarExtender control that you can tab into, hit an arrow to initialize the selection with today's date, then continue (if
you wish) to use up, down, and side arrows to move back one week, forward one week, or by single day before or after. Please post any improvements.
mike.macarth...
Member
10 Points
15 Posts
Changing date selection in CalendarExtender using up, down, left, right arrow keys
Dec 19, 2007 11:12 PM|LINK
The CalendarExtender control is awesome. My only issue with it is that, when the textbox date field is entered by tabbing (using the keyboard), the calendar pops up and the user is forced to use the mouse to make a selection, even if the selection is today. Many users like to be able to hit a key or a couple keys to select a date close to today without having to take their hands off the keyboard.
I solved this by adding a simple javascript fuction that is shared below in case anyone else has a similar need. The result is a CalendarExtender control that you can tab into, hit an arrow to initialize the selection with today's date, then continue (if you wish) to use up, down, and side arrows to move back one week, forward one week, or by single day before or after. Please post any improvements.
function DateField_KeyDown(dateField, calendarExtenderName) { lastKeyCodeEntered=window.event.keyCode; if ((lastKeyCodeEntered == '37') //keyCode 37=left arrow || (lastKeyCodeEntered == '38') //keyCode 38=up arrow || (lastKeyCodeEntered == '39') //keyCode 39=right arrow || (lastKeyCodeEntered == '40')) //keyCode 40=down arrow { var dtbehav = $find(calendarExtenderName); var enteredDate = dtbehav.get_selectedDate(); if (enteredDate == null) { enteredDate = new Date(); } else { advanceValue = 0; switch (lastKeyCodeEntered) { case 37: advanceDays = -1; break; case 38: advanceDays = -7; break; case 39: advanceDays = 1; break; case 40: advanceDays = 7; break; } enteredDate.setDate(enteredDate.getDate() + advanceDays); } dateField.value = (enteredDate.getMonth()+1) + "/" + enteredDate.getDate() + "/" + enteredDate.getFullYear(); dtbehav.set_selectedDate(dateField.value); } }Then I simply wired the above javascript function to my textbox's "onkeydown" event in the (server-side) Page_Load for my page:
txtDateReceived.Attributes.Add("onkeydown", "DateField_KeyDown(this,'" + myCalendarExtenderID.ClientID + "')");
sandeep.rajp...
Member
4 Points
2 Posts
Re: Changing date selection in CalendarExtender using up, down, left, right arrow keys
Apr 08, 2009 01:50 AM|LINK
brilliant,you are a champion.
jmanuel28
Member
2 Points
1 Post
Re: Changing date selection in CalendarExtender using up, down, left, right arrow keys
Oct 16, 2012 06:33 PM|LINK
Great! That was helpful, thank you!
pmcs
Member
61 Points
32 Posts
Re: Changing date selection in CalendarExtender using up, down, left, right arrow keys
Jan 31, 2013 01:56 AM|LINK
Hi,
I am a little new at this...
I am assuming that I would put this:
txtDateReceived.Attributes.Add("onkeydown", "DateField_KeyDown(this,'" + myCalendarExtenderID.ClientID + "')");
In the page load of the .aspx.cs page. Where does the Java Script go ? Do you save it as a file and reference it somehow? If so,
how do you reference it. Or, can you enter the java script directly in the .aspx (the ASP) page somehow?
I get what you are doing, but I am not sure how to reference the Java Script ?
Thank You in advance for your help !
Eric
pmcs
Member
61 Points
32 Posts
Re: Changing date selection in CalendarExtender using up, down, left, right arrow keys
Jan 31, 2013 02:24 AM|LINK
O.K., figured it out and posting for the benefit of others..
This goes in the .aspx page (asp page):
<asp:TextBox ID="reviewStartDate" runat="server"></asp:TextBox>
<ajaxtoolkit:calendarextender
ID="CalendarExtender1"
TargetControlID="reviewStartDate"
runat="server"
/>
<script type="text/javascript">
function DateField_KeyDown(dateField, calendarExtenderName) {
lastKeyCodeEntered = window.event.keyCode;
if ((lastKeyCodeEntered == '37') //keyCode 37=left arrow
|| (lastKeyCodeEntered == '38') //keyCode 38=up arrow
|| (lastKeyCodeEntered == '39') //keyCode 39=right arrow
|| (lastKeyCodeEntered == '40')) //keyCode 40=down arrow
{
var dtbehav = $find(calendarExtenderName);
var enteredDate = dtbehav.get_selectedDate();
if (enteredDate == null) {
enteredDate = new Date();
}
else {
advanceValue = 0;
switch (lastKeyCodeEntered) {
case 37:
advanceDays = -1;
break;
case 38:
advanceDays = -7;
break;
case 39:
advanceDays = 1;
break;
case 40:
advanceDays = 7;
break;
}
enteredDate.setDate(enteredDate.getDate() + advanceDays);
}
dateField.value = (enteredDate.getMonth() + 1) + "/" + enteredDate.getDate() + "/" + enteredDate.getFullYear();
dtbehav.set_selectedDate(dateField.value);
}
}
</script>
AND this would go in the page load of the .aspx.cs page:
protected void Page_Load(object sender, EventArgs e)
{
ErrorLogData logdata = new ErrorLogData();
try
{
lblErrorMessage.Text = string.Empty;
lblDisableMessage.Text = string.Empty;
reviewStartDate.Attributes.Add("onkeydown", "DateField_KeyDown(this,'" + CalendarExtender1.ClientID + "')");
ect.
Thanks.
Eric
pmcs
Member
61 Points
32 Posts
Re: Changing date selection in CalendarExtender using up, down, left, right arrow keys
Jan 31, 2013 02:42 AM|LINK
Is there a way that I can store the Javascript as a file and reference it somehow, for cleaner code ?
Thanks,
Eric