【问题标题】:Single Calendar control with multiple textboxes具有多个文本框的单个日历控件
【发布时间】:2011-07-19 17:00:57
【问题描述】:

我有一个 GridView,其中包含多个日期列。 对于日期,我使用文本框。我想使用 ajaxToolkit:CalendarExtender 使插入日期更容易。但是如果我在每个 ItemTemplate 中放置一个 ajaxToolkit:CalendarExtender,它会使我的页面变慢。您能否告诉我如何将一个 ajaxToolkit:CalendarExtender 用于所有文本框?我想,当用户单击文本框时,应该会出现日历。当然,日历应该出现在文本框旁边的某个地方。 谢谢。

【问题讨论】:

    标签: c# javascript asp.net


    【解决方案1】:

    我建议你使用jQuery插件。访问http://jqueryui.com/demos/datepicker/

    这个插件可以帮助你。

    【讨论】:

    • 感谢您的回答。你能给我一个小例子如何使用它吗?谢谢。
    【解决方案2】:

    我不认为有方法或简单的方法可以做到这一点。您可以考虑使用另一个组件。你知道来自 jquery ui 的 datapicker 吗?这是一个不错、免费、干净、快速的日历组件。使用它,您可以在文本框中应用 css 样式并通过 jquery 执行日历过滤它,使用 datepicker,如下所示:

    gridview 中的文本框:

    <asp:TextBox ID="txtDate1" runat="server" CssClass="date" />
    <asp:TextBox ID="txtDate2" runat="server" CssClass="date" />
    <asp:TextBox ID="txtDate3" runat="server" CssClass="date" />
    

    在你的网络表单的底部,你可以做一个 jquery 脚本

    <script language='javascript'>
       $(function() { // <- page_load in client side with jQuery
          // get all inputs that has .date css style and apply datepicker
          $("input.date").datepicker(); 
       });
    </script>
    

    阅读有关 jquery ui 的更多信息以了解如何在您的应用程序上设置它(基本上,添加一个 javascript 文件和 css 文件)


    看看这些链接:

    http://www.jquery.com http://jqueryui.com/demos/datepicker/

    PS:对不起我的英语!

    【讨论】:

    • 感谢您的回答。如果我在用户控件中有我的控件,我可以将您提供的脚本放在母版页中吗?或者它应该放在我使用日历的每个 ascx 中?我在哪里可以获得“日期”的CSS?另外,您的解决方案与 Ethem Kuloglu 提到的插件有什么关系吗?
    • IE 给我错误:网页错误详细信息用户代理:Mozilla/4.0(兼容;MSIE 8.0;Windows NT 5.1;Trident/4.0;.NET CLR 2.0.50727;.NET CLR 3.0.4506.2152; .NET CLR 3.5.30729;.NET4.0C;.NET4.0E;IE0006_ver1;EN_US) 时间戳:2011 年 7 月 19 日星期二 20:13:37 UTC 消息:对象不支持此属性或方法行:16630跨度>
    • 嗯...你应该在你的页面中有一次这个脚本。日期的 css 仅让 jquery 知道具有这种样式的字段将应用 datepicker 组件。这与 Enthem 提到的插件相同。问题是,您需要添加 jquery 引用(在 jquery.com 中获取此 javascript),然后需要添加 jquery ui 引用(ui.jquery.com)。 jQuery UI 工作需要 jQuery。
    • 我添加了 在我的母版页开头,我在母版页正文中有这个: 在母版页的末尾,我有这个:
    猜你喜欢
    • 2011-04-11
    • 2011-03-12
    • 2019-04-21
    • 1970-01-01
    • 2012-04-21
    • 1970-01-01
    • 2011-06-11
    • 1970-01-01
    • 2019-02-13
    相关资源
    最近更新 更多