Home/ Questions/Q 7411915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T06:27:37+00:00

I have a asp:textbox with a OnTextChanged event that I want to fire when

  • 0

I have a asp:textbox with a OnTextChanged event that I want to fire when ever a new date is selected from the jQuery datepicker that is bound to it but when selecting a date, the OnTextChanged never fires. It fires if I change the text ‘by hand’ but I want to force the user to select the date from the datepicker. I need to run server side code each time the date is changed. I have tried using the onSelect method on the datepicker but was unable to get it to call the method.

Here is my client side code:

 function pageLoad() {
    $(".datepicker").datepicker({
        constrainInput: true,
        dateFormat: 'dd D M yy'
    });
}

<asp:UpdatePanel runat="server" ChildrenAsTriggers="True">
<ContentTemplate>
    <asp:TextBox ID="txtPickupDate" runat="server" OnTextChanged="txtPickupDate_TextChanged" CssClass="datepicker"
       AutoPostBack="true" >
    </asp:TextBox>
    <asp:DropDownList ID="ddlPickupTime" runat="server" />
</ContentTemplate>

Greatly appreciate any help

Update: Was asked to include the TextChanged function. Didn’t post it initially as it isn’t firing the method and figured it didn’t affect the solution but regardless, here it is:

protected void txtPickupDate_TextChanged(object sender, EventArgs e)
    {
        DateTime pickupDate = DateTime.Parse(txtPickupDate.Text);
        //do things with the date
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I tested your code and the TextChanged server side method is being fired when the date is being selected on the datepicker.

    One slight change I made was refactoring the jquery to reside within $(document).ready() function

    <script type="text/javascript">
$(document).ready(function() {
    $(".datepicker").datepicker({
        constrainInput: true,
        dateFormat: 'dd D M yy'
    });
});
</script>

    See the entire code below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DatePickerTest.aspx.cs" Inherits="TestApp.DatePickerTest" %>

<!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></title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/smoothness/jquery-ui.css"/>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:TextBox ID="txtPickupDate" runat="server" OnTextChanged="txtPickupDate_TextChanged" CssClass="datepicker" AutoPostBack="true"></asp:TextBox>
</div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $(".datepicker").datepicker({
        constrainInput: true,
        dateFormat: 'dd D M yy'
    });
});
</script>

</body>
</html>

    And server side

    protected void txtPickupDate_TextChanged(object sender, EventArgs e)
{
        DateTime pickupDate = DateTime.Parse(txtPickupDate.Text); 
}

    EDIT as per comment below:

    To allow the TextChanged event to continue to fire after post back you can use

    .live() if not using the latest version of jquery as it is now deprecated

    $(function() {
    $('.datepicker').live('click', function() {
        $(this).datepicker({
            constrainInput: true, dateFormat: 'dd D M yy'
        }).focus();
    });
});

    or .on() with the latest version of JQuery 1.7 and upwards

    $('body').on('click', '.datepicker', function() {
    $(this).datepicker({
        constrainInput: true, dateFormat: 'dd D M yy'
    }).focus();
});
    • 0