0

我正在使用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>
4

4 回答 4

0

尝试将脚本标签移动到您的 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>
于 2013-01-29T10:27:51.953 回答
0

一种解决方法。似乎这个日期选择器喜欢在表单上显示一个输入字段。奇怪。所以我做了一个小技巧。创建一个带有 id 和一个类的虚拟输入框并通过 css 隐藏它，瞧你的文本框可以是附加到日期选择器。我仍然没有解释为什么它必须以这种方式强制工作。它应该默认工作，因为文本框被呈现为输入框。你的作业要弄清楚......

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

在此处输入图像描述

于 2013-01-29T10:44:35.857 回答
-1

根据您的代码，您似乎没有包含任何 jquery 文件。

于 2013-01-29T09:54:25.407 回答
-1

尝试使用下面的代码

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

您需要做的是在浏览器中进入页面的源代码并找到它的 id，然后将 MainContent_txtCopyrightYear 替换为该 id。

于 2013-01-29T09:15:51.137 回答