Question

我有一个jQuery datepicker，代码如下：

 <div id="test"></div>
 <asp:TextBox ID="txtRDate" runat="server" Width="120px"  ClientIDMode="Static"  AutoPostBack="True" OnTextChanged="txtRDate_TextChanged">
 </asp:TextBox>

Javascript代码是：

<script type="text/javascript">
$('#test').datepicker({
dateFormat: 'yy/mm/dd',
minDate: new Date(2017, 1, 1),
defaultDate: new Date(),

onSelect: function(date, obj){
$('#txtRDate').val(date);  //Updates value of date
$('#txtRDate').trigger('change');
}
});
</script>

当从datepicker中选择日期时，文本框的TextChanged会被触发并执行回发。

c＃代码背后：

     protected void txtRDate_TextChanged(object sender, EventArgs e)
     {
        GetData(txtRDate.Text);
     }

JQuery UI内联DatePicker在ASP.NET回发后丢失了选定的日期，如何保留它？

提前致谢。

enter image description here

Answer 1

我做了一些小改动，一切都在我的测试环境中有效我添加了moments.js（http://momentjs.com）lib并使用它将日期初始化为当前日期，如果文本框不为空。

对jQuery做了一些小改动，特别是目标元素。添加了第二个文本框，只是为了看到每次命中时服务器是连接“1”。

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

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                if ($("#txtRDate").val() == "") {
                    $("#txtRDate").val(moment().format("YYYY/MM/DD"))
                }
                $('#txtRDate').datepicker({

                    dateFormat: 'yy/mm/dd',
                    minDate: new Date(2017, 1, 1),
                    onSelect: function(date, obj){
                      $('#txtRDate').trigger('change');
                    }
                });
            });
        </script> 
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtRDate" AutoPostBack="true" runat="server"></asp:TextBox>
            <asp:TextBox ID="txtCount" runat="server"></asp:TextBox>
        </div>
        </form>
    </body>
    </html>

服务器端：

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace LaptopWeb
    {
        public partial class test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                txtCount.Text = txtCount.Text + " 1";
            }
        }
    }

Answer 2

它的一些小改动：

<script type="text/javascript">
    $('#test').datepicker({
        dateFormat: 'yy/mm/dd',
        minDate: new Date(2017, 1, 1),
        defaultDate: $('#txtRDate').val(),
        onSelect: function (date, obj) {
            $('#txtRDate').val(date);  //Updates value of date
            //Add the value to hidden field
            $('#HiddenField1').val(date);
            $('#txtRDate').trigger('change');
            
           
        }
        
    });

    $(document).ready(function () {
        //Assign the value from hidden field to textbox
     onLoad:   $('#txtRDate').val($('#HiddenField1').val());
    });
</script>

在ASP.NET回发后，JQuery UI内联DatePicker失去了选定的日期，如何保留它？

2 个答案: