| <%@ Page Language="VB" AutoEventWireup="false" CodeFile="datepicker.aspx.vb" Inherits="import_datepicker" %> |
| <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> |
| |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title>Untitled Page</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager> |
| <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> |
| <script type="text/javascript"> |
| function mngRequestStarted(ajaxManager, eventArgs) |
| { |
| if(eventArgs.EventTarget == "excelLink") |
| { |
| eventArgs.EnableAjax = false; |
| } |
| } |
| var currentTextBox = null; |
| var currentDatePicker = null; |
| |
| //This method is called to handle the onclick and onfocus client side events for the texbox |
| function showPopup(sender, e) |
| { |
| //this is a reference to the texbox which raised the event |
| currentTextBox= sender; |
| |
| //this gets a reference to the datepicker, which will be shown, to facilitate |
| //the selection of a date |
| var datePicker = $find("<%= RadDatePicker1.ClientID %>"); |
| |
| //this variable is used to store a reference to the date picker, which is currently |
| //active |
| currentDatePicker = datePicker; |
| |
| //this method first parses the date, that the user entered or selected, and then |
| //sets it as a selected date to the picker |
| datePicker.set_selectedDate(currentDatePicker.get_dateInput().parseDate(sender.value)); |
| |
| //the code lines below show the calendar, which is used to select a date. The showPopup |
| //function takes three arguments - the x and y coordinates where to show the calendar, as |
| //well as its height, derived from the offsetHeight property of the textbox |
| var position = datePicker.getElementPosition(sender); |
| datePicker.showPopup(position.x, position.y + sender.offsetHeight); |
| } |
| |
| //this handler is used to set the text of the TextBox to the value of selected from the popup |
| function dateSelected(sender, args) |
| { |
| if(currentTextBox != null) |
| { |
| //currentTextBox is the currently selected TextBox. Its value is set to the newly selected |
| //value of the picker |
| currentTextBox.value = args.get_newValue(); |
| } |
| } |
| |
| //this function is used to parse the date entered or selected by the user |
| function parseDate(sender, e) |
| { |
| if(currentDatePicker != null) |
| { |
| var date = currentDatePicker.get_dateInput().parseDate(sender.value); |
| var dateInput = currentDatePicker.get_dateInput(); |
| |
| if(date == null) |
| { |
| date = currentDatePicker.get_selectedDate(); |
| } |
| |
| var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat()); |
| sender.value = formattedDate; |
| } |
| } |
| </script> |
| </telerik:RadCodeBlock> |
| <div> |
| <asp:Label runat="server" ID="statusLbl"></asp:Label><br /> |
| <asp:TextBox ID="TextBox1" runat="server" onclick="showPopup(this, event);" onfocus="showPopup(this, event);" onblur="parseDate(this, event)"></asp:TextBox> |
| <asp:TextBox ID="TextBox2" runat="server" onclick="showPopup(this, event);" onfocus="showPopup(this, event);" onblur="parseDate(this, event)"></asp:TextBox> |
| <asp:TextBox ID="TextBox3" runat="server" onclick="showPopup(this, event);" onfocus="showPopup(this, event);" onblur="parseDate(this, event)"></asp:TextBox> |
| <telerik:RadDatePicker ID="RadDatePicker1" Style="display: none;" MinDate="01/01/1990" AutoPostBack="true" |
| MaxDate="12/31/2100" runat="server"> |
| <ClientEvents OnDateSelected="dateSelected" /> |
| </telerik:RadDatePicker> |
| |
| </div> |
| </form> |
| </body> |
| </html> |