Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Calendar > Datepicker hotkeys

• it-workz

  Posted on Jul 21, 2009 (permalink)

  Requirements
  RadControls for ASP .NET AJAX version	2008.1.415 and later
  .NET version	2.0 and later
  Visual Studio version	2005 and later
  Programming language	Javascript
  Browser support	all browsers supported by RadControls for ASP .NET AJAX

  
  PROJECT DESCRIPTION
  I've made a simple javascript that allows some keys to be used as hotkey in a datepicker.
  In this example if a + is pressed, the selected date jumps up a week, and if - is pressed it jumps down a week:
  

  <telerik:RadDatePicker ID="RadDatepicker1" runat="server" Skin="Office2007">

  <DateInput onkeydown="_hotkey_OnKeyDown(event)" />

  </telerik:RadDatePicker>

  <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

  <script language="javascript" type="text/javascript">

  //<![CDATA[

  function _hotkey_OnKeyDown(e)

  {

  if (e.keyCode == 107)

  {

  var dp = $find("<%=RadDatepicker1.ClientID%>");

  var date = dp.get_selectedDate();

  date.setDate(datum.getDate() +7);

  dp.set_selectedDate(date);

  }

  if (e.keyCode == 109)

  {

  var dp = $find("<%=RadDatepicker1.ClientID%>");

  var date = dp.get_selectedDate();

  date.setDate(datum.getDate() -7);

  dp.set_selectedDate(date);

  }

  }

  //]]>

  </script>

  </telerik:RadCodeBlock>

  Reply

• Answer Sebastian Sebastian

  Posted on Jul 24, 2009 (permalink)

  Hello Bob,
  
  Thank you for the submission.
  
  Since there were some discrepancies in the code (duplicated code sections inside the if blocks and the usage of non-initilized datum javascript variable), I updated the example and included some code to focus the date input once you selected a date from the popup calendar. I also preselect the today's date on initial load.
  
  Here is the final version of the sample:
  
  

  <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

  <script language="javascript" type="text/javascript">

  //<![CDATA[

  function _hotkey_OnKeyDown(evt)

  {

  var dp = $find("<%=RadDatepicker1.ClientID%>");

  var date = dp.get_selectedDate();

  if (evt.keyCode == 107)

  {

  date.setDate(date.getDate() + 7);

  dp.set_selectedDate(date);

  evt.cancelBubble = true;

  evt.returnValue = false;

  if (evt.stopPropagation)

  {

  evt.stopPropagation();

  evt.preventDefault();

  }

  }

  if (evt.keyCode == 109)

  {

  date.setDate(date.getDate() - 7);

  dp.set_selectedDate(date);

  evt.cancelBubble = true;

  evt.returnValue = false;

  if (evt.stopPropagation)

  {

  evt.stopPropagation();

  evt.preventDefault();

  }

  }

  }

  function DateSelected(sender, eventArgs)

  {

  sender.get_textBox().focus();

  }

  //]]>

  </script>

  </telerik:RadCodeBlock>

  
  

  <telerik:RadDatePicker ID="RadDatepicker1" runat="server" Skin="Office2007">

  <DateInput onkeydown="_hotkey_OnKeyDown(event)" />

  <ClientEvents OnDateSelected="DateSelected" />

  </telerik:RadDatePicker>

  
  

  protected void Page_Load(object sender, EventArgs e)

  {

  if (!Page.IsPostBack)

  {

  RadDatepicker1.SelectedDate = DateTime.Now;

  }

  }

  
  I updated your Telerik points for the involvement.
  
  Kind regards,
  Sebastian
  the Telerik team

  
  Instantly find answers to your questions on the new Telerik Support Portal.
  Check out the tips for optimizing your support resource searches.

  Reply

Back to Top

Home / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > Calendar > Datepicker hotkeys