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

尝试移动HTML元素下方的Scripts标记。还要在脚本周围添加$(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

一种解决方法。看起来这个datepicker喜欢在form.Strange上显示一个输入字段。所以我执行了一个小技巧。创建一个虚拟输入框，带有id和类并通过css隐藏它瞧你的文本框可以附加到datepicker。我仍然没有解释为什么它必须以这种方式强制工作。它应该只是默认工作，因为文本框被渲染为输入框。你的作业要弄清楚....

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

enter image description here

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 个答案: