从 asp.net 用户控件中的 jquery datepicker 发送更改事件？

Question

我在 asp.net 用户控件中有一个 jquery datepicker。

我需要设置一个更改指示器（它不必是 onchange，任何事件名称都可以，只要我可以从包含控件的页面的 .aspx 中引用它来执行特定于该控件的 javascript在日历上选择新日期时在该页面上进行控制。）

这是初始化我的日期选择器的 javascript。

    calendarcontrol.datepicker({
        altField: calendarcontroldate,
        navigationAsDateFormat: true,
        onSelect: function(dateText, inst) { alert(dateText); },
        nextText: 'MM',
        prevText: 'MM'
    });

datepicker 初始化正常，并且当它像上面那样设置时，警报确实会按预期弹出日期选择，但是当我尝试通过控制参数传递它或调用页面的 javascript 将它发送到页面时直接运行，它根本没有触发。

我需要做些什么来为内部日历选择设置一个控制事件，以便我的页面可以捕获它并在必要时执行进一步的 javascript？我的控件运行良好，我需要做的最后一件事是在用户控件中选择新日期时在页面上显示一个事件。

非常感谢。我越来越好，但 jquery 对我来说仍然很神秘。

编辑：好的，让它像这样工作：

    // init main datepicker
    calendarcontrol.datepicker({
        altField: calendarcontroldate,
        navigationAsDateFormat: true,
        onSelect: window[hfSelectDate],
        nextText: 'MM',
        prevText: 'MM'

    });

其中 hfSelectDate 是函数的传入字符串（我通过参数设置它，所以我可以在 aspx 中使用它。）

感谢您为我指明正确的方向！

Answer 1

您可以在原始文本输入元素上添加onchange 事件。每当从日历中选择新日期或手动输入日期时，都会触发该事件。

您还可以使用 jQuery change() 方法来附加该事件处理程序：

calendarcontrol.datePicker({...})
               .change(function() { alert('value changed'); });

Answer 2

您设置页面的方式似乎对您不利。在 aspx 页面中初始化您的日期选择器，就像我在发布的链接中所做的那样。如果您在 aspx 页面上初始化您的日期选择器，那么您不必担心关于发送任何内容，因为您将完全控制您的 aspx 页面。您的选择功能将在 aspx 页面中您想要的位置准确触发，然后直接在该功能内执行其他操作。无需发送任何东西。

1.将css类附加到ascx控件中具有日期选择器的文本框。

ascx

 <asp:UpdatePanel runat="server">
    <ContentTemplate>
   <asp:TextBox ID="TextBox1" runat="server" CssClass="myclass"></asp:TextBox>
  </ContentTemplate>
  </asp:UpdatePanel>

2.在母版页中引用附加的 css 类。我已经初始化了两次日期选择器来处理更新面板。 aspx

        <script type="text/javascript">
        $(document).ready(function () {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        // Place here the first init of the DatePicker   

        $('.myclass').datepicker({
            altField: "",
            navigationAsDateFormat: true,
            onSelect: function (dateText, inst) {

               //here directly excute further javascript code.Piece of cake.
             .

            },
            nextText: 'MM',
            prevText: 'MM'
        });


    });

    function InitializeRequest(sender, args) { }
    function EndRequest(sender, args) {
        // after update occur on UpdatePanel re-init the DatePicker 

        $('.myclass').datepicker({
            altField: "",
            navigationAsDateFormat: true,
            onSelect: function (dateText, inst) {
              //here directly excute further javascript code.Piece of cake.


            },
            nextText: 'MM',
            prevText: 'MM'
        }) ;


    }

Example