程序员经验分享-hwhale

带有 jQ​​uery 日期选择器 OnTextChanged 的​​文本框未触发

2024-06-19

我有一个带有 OnTextChanged 事件的 asp:textbox，当从绑定到它的 jQuery 日期选择器中选择新日期时，我想触发该事件，但在选择日期时，OnTextChanged 永远不会触发。如果我“手动”更改文本，它会触发，但我想强制用户从日期选择器中选择日期。每次更改日期时，我都需要运行服务器端代码。我尝试在日期选择器上使用 onSelect 方法，但无法让它调用该方法。

这是我的客户端代码：

 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>

非常感谢任何帮助

更新：被要求包含 TextChanged 函数。最初没有发布它，因为它没有触发该方法，并且认为它不会影响解决方案，但无论如何，它是：

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

我测试了您的代码，当在日期选择器上选择日期时，将触发 TextChanged 服务器端方法。

我所做的一个微小的改变是重构 jquery 以驻留在 $(document).ready() 函数中

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

请参阅下面的完整代码。

<%@ 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>

和服务器端

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

根据以下评论进行编辑：

要允许 TextChanged 事件在回发后继续触发，您可以使用

.live() 如果不使用现在最新版本的 jquery已弃用 http://api.jquery.com/live/

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

or .on() http://api.jquery.com/on/使用最新版本的 JQuery 1.7 及更高版本

$('body').on('click', '.datepicker', function() {
    $(this).datepicker({
        constrainInput: true, dateFormat: 'dd D M yy'
    }).focus();
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

aspnet

jQueryUI

带有 jQ​​uery 日期选择器 OnTextChanged 的​​文本框未触发 的相关文章

随机推荐

热门标签