Jquery Datepicker 无法在控件中工作

发布于 2024-11-24 06:28:30 字数 628 浏览 0 评论 0原文

我正在尝试在控件中使用简单的日期选择器。当用户单击文本框时,应显示日历。但是,日历没有弹出。

这是我的代码。

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Activity.ascx.cs" Inherits="Website.Controls.Activity"  %>


    <script type="text/javascript" src="assets/libs/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $('#<%= DateHtmlInputText.ClientID %>').datepicker();
    });
    </script>

    <div id="activity">
       <asp:TextBox ID="DateHtmlInputText" CssClass="datePicker" runat="server" />
    </div>

I am trying to use a simple datepicker in a control. When the user clicks on the textbox, the calendar should be displayed. But, the calendar isn't popping up.

Here is my code.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Activity.ascx.cs" Inherits="Website.Controls.Activity"  %>


    <script type="text/javascript" src="assets/libs/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $('#<%= DateHtmlInputText.ClientID %>').datepicker();
    });
    </script>

    <div id="activity">
       <asp:TextBox ID="DateHtmlInputText" CssClass="datePicker" runat="server" />
    </div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

很酷不放纵 2024-12-01 06:28:30

您应该看一下 jQuery UI Date Picker,他们有您可以使用/应用的工作示例。如果您不使用完整的 UI 库,请确保包含所有依赖项。您可以使用示例下方的“查看源代码”链接来查看该示例的制作方式的 HTML/JavaScript。

jQuery UI DatePicker

.NET TextBox 控件示例

<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
    $(document).ready(function () {
        $('#<%= TextBox1.ClientID %>').datepicker();
    });
</script>

You should take a look at jQuery UI Date Picker, they have working examples that you can use/apply. Make sure that you include all the dependencies if you don't use the complete UI library. You can use the "view source" link below the example to see the HTML/JavaScript of how the example was made.

jQuery UI DatePicker

Example with .NET TextBox Control

<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
    $(document).ready(function () {
        $('#<%= TextBox1.ClientID %>').datepicker();
    });
</script>
娇纵 2024-12-01 06:28:30

确保您在页面/母版页中包含正确的 JavaScript 引用,并确保您在控件标记中使用 updatepanel,那么您应该在页面中包含以下 JavaScript 结束请求处理程序

function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            jQuery(document).ready(function() {
                jQuery("#txttdate").datepicker({ minDate: 0 });

                $('.timepicker_input').timepicker({
                    showPeriod: true,
                    showLeadingZero: true
                });
  });

编辑

如果您不这样做使用 updatepanel 那么您还应该将 datpicker() 调用包含在其中

jQuery(document).ready(function() 
{
}

,以确保您的函数仅在完成加载后才执行

还访问 Jquery Datepicker UI 根据我们同行的建议以获得更多见解

希望它可以帮助您

Make sure that you include proper JavaScript references in your page/masterpage and also ensure of you are using updatepanel in your control markup then you should include the following JavaScript end request handler in your page

function pageLoad(sender, args) {
        if (args.get_isPartialLoad()) {
            jQuery(document).ready(function() {
                jQuery("#txttdate").datepicker({ minDate: 0 });

                $('.timepicker_input').timepicker({
                    showPeriod: true,
                    showLeadingZero: true
                });
  });

EDIT

If you are not using updatepanel then you should also enclose the datpicker() call in

jQuery(document).ready(function() 
{
}

it will make sure that your function will execute only after complete load

also visit Jquery Datepicker UI as suggested by our peer for more insights

Hope it may help you

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文