How to access date picker input from codebehind?..

4 posts, 1 answers
  1. Amit
    Amit avatar
    88 posts
    Member since:
    Sep 2010

    Posted 27 Oct 2010 Link to this post

    Hey everyone,

    How to get the value selected from datepicker in codebehind?...

    Thanks
    Amit
  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 27 Oct 2010 Link to this post

    Hello Amit,

    To get the selected date, you access the SelectedDate.Value property. Just make sure the SelectedDate has a date, meaning it's not null, otherwise it will throw an error.

    I hope that helps.
  3. Abhishek
    Abhishek avatar
    21 posts
    Member since:
    Mar 2011

    Posted 14 Oct 2011 Link to this post

    Hi i am using only one datepicker control for two fields start date and end date asp.net text boxes.

    On save button click value of text box is empty. If i use datepicker.dbselecteddate then for both start date and enddate gets same value.

    How can i access the date value?
      Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click
           dim StartDate = rdpPopUp.DbSelectedDate ' Convert.ToDateTime(txtStartdate.Text)
            dim ClosureDate = rdpPopUp.DbSelectedDate 'Convert.ToDateTime(txtCloserDate.Text)
    End Sub

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                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
                    //see the methods exposed through the $telerik static client library here - http://www.telerik.com/help/aspnet-ajax/telerik-static-client-library.html

                    currentTextBox = sender.tagName == "INPUT" ? sender : $telerik.getPreviousHtmlNode(sender);

                    //this gets a reference to the datepicker, which will be shown, to facilitate
                    //the selection of a date
                    var datePicker = $find("<%= rdpPopUp.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(currentTextBox.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(currentTextBox);
                    datePicker.showPopup(position.x, position.y + currentTextBox.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>

    <tr>
                                                <td>
                                                    <asp:Label ID="Label5" runat="server" Text="Start Date"></asp:Label><cite>*</cite>
                                                </td>
                                                <td>
                                                    <telerik:RadDatePicker ID="rdpPopUp" Style="display: none;" DateInput-DateFormat="dd MMM yyyy"
                                                        MaxDate="31 dec 2100" runat="server">
                                                        <ClientEvents OnDateSelected="dateSelected" />
                                                    </telerik:RadDatePicker>
                                                    <asp:TextBox ID="txtStartdate" Width="125px" CssClass="radEnabledCss_Default" ReadOnly="true"
                                                        onclick="showPopup(this, event);" onfocus="showPopup(this, event);" onblur="parseDate(this, event)"
                                                        runat="server"></asp:TextBox>
                                                    <asp:Image ID="imgStartDate" runat="server" ImageUrl="~/Images/datePickerPopup.gif"
                                                        AlternateText="Click to open Calendar popup" onclick="showPopup(this, event)" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label6" runat="server" Text="Closure Date"></asp:Label><cite>*</cite>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtCloserDate" Width="125px" CssClass="radEnabledCss_Default" ReadOnly="true"
                                                        onclick="showPopup(this, event);" onfocus="showPopup(this, event);" onblur="parseDate(this, event)"
                                                        runat="server"></asp:TextBox>
                                                    <asp:Image ID="imgEnddate" runat="server" ImageUrl="~/Images/datePickerPopup.gif"
                                                        AlternateText="Click to open Calendar popup" onclick="showPopup(this, event)" />
                                                </td>
                                            </tr>
    <tr><td colspan="2"><telerik:RadButton ID="btnSave" runat="server" Text="Save" ToolTip="Click to Save"
                                        OnClientClicked="ValidateSave">
                                        <Icon PrimaryIconCssClass="rbSave" PrimaryIconLeft="4" PrimaryIconTop="6" />
                                    </telerik:RadButton></td></tr>

  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 18 Oct 2011 Link to this post

    Hello Abhishek,

    Try the following and let me know how it goes:
    Dim dt As DateTime = Convert.ToDateTime(rdpPopUp.SelectedDate)


    Regards,
    Maria Ilieva
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top