Menu
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
}
998
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();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
