文本框使用jQuery日期选择器OnTextChanged不点火 [英] Textbox with jQuery datepicker OnTextChanged not firing

查看：632
本文介绍了文本框使用jQuery日期选择器OnTextChanged不点火的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个ASP：文本框与我想要当过一个新的日期是从选择日期时，绑定到它，但jQuery的日期选择器选择火OnTextChanged事件时，OnTextChanged永远不会触发。如果我更改文本手，但我想强制用户选择从日期选择日期它闪光。我需要运行服务器端的$ C $每次更改日期时间C。我一直在使用的日期选择器的ONSELECT方法尝试，但无法得到它要调用的方法。

下面是我的客户端code：

 功能页面加载（）{
    $（日期选择器）。日期选择器（{
        constrainInput：真实，
        DATEFORMAT：'DD D M YY'
    }）;
}＆LT; ASP：的UpdatePanel =服务器ChildrenAsTriggers =真＆GT;
＆LT;＆的ContentTemplate GT;
    ＆LT; ASP：文本框ID =txtPickupDate=服务器OnTextChanged =txtPickupDate_TextChanged的CssClass =日期选择器
       的AutoPostBack =真正的＆GT;
    ＆LT; / ASP：文本框＆GT;
    ＆LT; ASP：DropDownList的ID =ddlPickupTime=服务器/＆GT;
＆LT; /＆的ContentTemplate GT;

大大AP preciate任何帮助

更新：被要求包含框TextChanged功能。最初没有发布，因为它不点火的方法和想通这并没有影响到解决方案，但无论如何，在这里它是：

 保护无效txtPickupDate_TextChanged（对象发件人，EventArgs的发送）
    {
        日期时间pickupDate = DateTime.Parse（txtPickupDate.Text）;
        //做事情的日期
    }


当正在对日期选择器选择的日期被解雇

解决方案

我测试了code和框TextChanged服务器端的方法。

我做了重构jQuery来驻留在$（文件）。就绪一个细微的变化（）函数

 ＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
    $（日期选择器）。日期选择器（{
        constrainInput：真实，
        DATEFORMAT：'DD D M YY'
    }）;
}）;
＆LT; / SCRIPT＆GT;

看到整个code以下。

 ＆LT;％@页面语言=C＃AutoEventWireup =真codeBehind =DatePickerTest.aspx.cs继承=TestApp.DatePickerTest％GT;！＆LT; D​​OCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-1.4.2.js'>＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js＆GT;＆LT; / SCRIPT＆GT;＆LT;链接rel =stylesheet属性类型=文/ CSS的href =/ CSS / normalize.css/＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =/ CSS /结果-light.css/＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS的href =htt​​p://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/smoothness/jquery-ui.css/＆GT ;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; D​​IV＆GT;
    ＆LT; ASP：文本框ID =txtPickupDate=服务器OnTextChanged =txtPickupDate_TextChanged的CssClass =日期选择器的AutoPostBack =真＆GT;＆LT; / ASP：文本框＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
    $（日期选择器）。日期选择器（{
        constrainInput：真实，
        DATEFORMAT：'DD D M YY'
    }）;
}）;
＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;

和服务器端

 保护无效txtPickupDate_TextChanged（对象发件人，EventArgs的发送）
{
        日期时间pickupDate = DateTime.Parse（txtPickupDate.Text）;
}

编辑按下面的评论：

要允许TextChanged事件继续后门柱还击，你可以使用

.live（）如果不使用最新版本的jQuery像现在德precated 

  $（函数（）{
    $（'。日期选择器）。生活（'点击'，功能（）{
        $（本）.datepicker（{
            constrainInput：真，DATEFORMAT：'DD D M YY'
        }）。焦点（）;
    }）;
}）;

或。上（）使用jQuery 1.7及以上的最新版本

  $（'身体'）。在（'点击'，'.datepicker'，函数（）{
    $（本）.datepicker（{
        constrainInput：真，DATEFORMAT：'DD D M YY'
    }）。焦点（）;
}）;

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
    }

解决方案

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();
});

这篇关于文本框使用jQuery日期选择器OnTextChanged不点火的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆