堆棧內存溢出
  簡體   English   中英

jQuery UI內聯DatePicker在ASP.NET回發后丟失選定的日期，如何保留它？

[英]JQuery UI inline DatePicker loses selected date after ASP.NET postback, How to keep it?

 原文  2017-04-07 18:50:23  3   2    javascript/ c#/ jquery/ datepicker

問題描述

我有一個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>

從日期選擇器中選擇日期時，文本框的TextChanged被觸發並執行回發。

C＃代碼背后： 

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

jQuery UI內聯DatePicker在ASP.NET回發后丟失選定的日期，如何保留它？

提前致謝。

在此處輸入圖片說明

2 個解決方案

解決方案1
 0  2017-04-08 18:28:58

我做了一些小的更改，它們都可以在我的測試環境中工作。
我添加了moments.js（ http://momentjs.com ）庫，並在文本框不為空的情況下使用它將日期初始化為當前日期。

對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";
            }
        }
    }

解決方案2
 0  2017-04-09 10:07:30

它進行了一些小的更改： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 回發后，jQuery UI和ASP.NET回發失敗 如何在回發ASP.Net Core后保持標簽處於活動狀態 ASP.Net MVC jQuery UI DatePicker日期格式 ASP.NET –回發后jQuery無法正常工作 ASP.Net JQuery UI將所選日期傳遞給模型 如何在jquery UI中設置內聯Datepicker的日期？ Asp.Net MVC中的JQuery UI datepicker 在ASP.NET中發生回發后是否不選擇第一個選項卡？ ASP.NET回發中的JQuery 如何在 ASP.NET 網絡表單中的特定 jQuery UI 選項卡中觸發回發
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM