在ASP.Net C＃中使用jquery日歷控件

Question

我正在使用http://www.eyecon.ro/datepicker/#download/datepicker.zip上的現成的壓光機控件。

日期選擇器的對象很容易提供。

在該示例中，有一個示例顯示日歷控件與文本框連接在一起，但是我的問題是它在HTML文本框上可以正常使用，但是當我嘗試使用ASP時，它並沒有與asp：textbox連接。

我的代碼是：

<head runat="server">
     <title></title>
     <link rel="stylesheet" media="screen" type="text/css" href="DatePicker/cssdatepicker.css" />
     <script type="text/javascript" src="DatePicker/js/datepicker.js"></script>
     <script type="text/javascript">


        $('#TextBox1').DatePicker({
            flat: true,
            date: '2008-07-31',
            current: '2008-07-31',
            calendars: 1,
            starts: 1
        });

  </script>
  </head> 
<body>
     <form id="form1" runat="server">
     <div>

         <asp:TextBox ID="TextBox1" runat="server">   </asp:TextBox>
    </div>
    </form>
</body>

Answer 1

嘗試將Scripts標記移到HTML元素下方。 還添加一個$(function(){ ... }); 在腳本周圍。 在jQuery .ready（）上閱讀此內容

保證傳遞給.ready（）的處理程序將在DOM准備就緒后執行，因此通常這是附加所有其他事件處理程序並運行其他jQuery代碼的最佳位置。

然后使用<%=(TextBox1.ClientID)%>來確保您始終獲得正確的ID。 這不會對您的項目產生太大影響，但是很高興知道。

還要確保在插件之前包含與插件兼容的jQuery版本。

<head runat="server">
     <title></title>
     <link rel="stylesheet" media="screen" type="text/css" href="DatePicker/cssdatepicker.css" />     
  </head> 
<body>
     <form id="form1" runat="server">
     <div>

         <asp:TextBox ID="TextBox1" runat="server">   </asp:TextBox>
    </div>

<script type="text/javascript" src="{PATH TO YOUR jQuery file}"></script>
<script type="text/javascript" src="DatePicker/js/datepicker.js"></script>
     <script type="text/javascript">

     $(function(){

        $('#<%=(TextBox1.ClientID)%>').DatePicker({
            flat: true,
            date: '2008-07-31',
            current: '2008-07-31',
            calendars: 1,
            starts: 1
        });
     });

  </script>

    </form>

</body>

Answer 2

一個變通辦法。似乎這個日期選擇器喜歡在表單上顯示一個輸入字段。奇怪，所以我做了一個小把戲。創建一個帶有id和一個類的虛擬輸入框，並通過css和voila隱藏它，您的文本框可以是附加到日期選擇器。 我仍然沒有解釋為什么在強制使用這種方法時它必須工作。由於文本框被渲染為輸入框，因此默認情況下它應該只工作。

   <link rel="stylesheet" media="screen" type="text/css" href="css/datepicker.css" />
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/datepicker.js"></script>
   <script type="text/javascript" src="js/eye.js"></script>
   <script type="text/javascript" src="js/utils.js"></script>
   <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>



        $('.inputDate').DatePicker({
            format: 'm/d/Y',
            date: $('.inputDate').val(),
            current: $('.inputDate').val(),
            starts: 1,
            position: 'r',
            onBeforeShow: function () {
                $('.inputDate').DatePickerSetDate($('.inputDate').val(), true);
            },
            onChange: function (formated, dates) {
                $('.inputDate').val(formated);
                if ($('#closeOnSelect input').attr('checked')) {
                    $('.inputDate').DatePickerHide();
                }
            }
        });




 <form id="form1" runat="server">
 <div>
     <input id="inputDate2" class="inputDate" type="text" value="06/14/2008"   style="display:none" />
     <asp:TextBox  ID="inputDate" runat="server" CssClass="inputDate" Text="06/14/2008" >   </asp:TextBox>
 <label id="closeOnSelect"><input type="checkbox" /> Close on selection</label>
</div>
    </form>

在此處輸入圖片說明

Answer 3

嘗試使用以下代碼

 $("#MainContent_txtCopyrightYear").datepicker({
                dateFormat: 'yy',
                changeMonth: true,
                changeYear: true,
                showOn: 'button',
                readonly: 'true',
                buttonImage: 'References/Images/calendar.gif',
                buttonImageOnly: true
            });

您要做的是在瀏覽器中進入頁面的源並找到其ID，然后用該ID替換MainContent_txtCopyrightYear。

Answer 4

根據您的代碼，您似乎沒有包含任何jquery文件。

在ASP.Net C＃中使用jquery日歷控件

問題描述

4 個解決方案

解決方案1
0 2013-01-29 10:27:51

解決方案2
0 2013-01-29 10:44:35

解決方案3
-1 2013-01-29 09:15:51

解決方案4
-1 2013-01-29 09:54:25

在ASP.Net C＃中使用jquery日歷控件

問題描述

4 個解決方案

解決方案1 0 2013-01-29 10:27:51

解決方案2 0 2013-01-29 10:44:35

解決方案3 -1 2013-01-29 09:15:51

解決方案4 -1 2013-01-29 09:54:25

解決方案1
0 2013-01-29 10:27:51

解決方案2
0 2013-01-29 10:44:35

解決方案3
-1 2013-01-29 09:15:51

解決方案4
-1 2013-01-29 09:54:25