【问题标题】:Can't pop up a datepicker using javascript无法使用 javascript 弹出日期选择器
【发布时间】:2014-08-06 13:10:31
【问题描述】:

我想在使用 jQuery、appery.io 框架的网站中添加一个日期选择器。谁能建议一个链接或教程来做到这一点?尝试在一个网站中弹出一个日期选择器,现在它只在这样的输入框中显示当前日期:

<input type="text" name="cal" id="cal_id".....>

用到的javascript库有jquery-1.8.2.js、jquery-1.8.2.min.js、jquery.mobile-1.3.0.js等

我尝试了来自http://jqueryui.com/datepicker/ 的 JQuery UI 日期选择器。添加了 javascript 文件:code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css、code.jquery.com/jquery-1.10.2.js、code.jquery.com/ui/1.10 .4/jquery-ui.js。添加脚本如下:

<script>
            $(function () {
                $("#datepicker").datepicker();
            });

        </script>

在输入框中做了如下修改:

<input type="text" name="cal" id="datepicker"...>

它不工作或弹出网站中的日期选择器。我是 javascript 和 appery.io 的新程序员,我想我正在做一些非常愚蠢的事情或缺少一些非常基本的东西。请帮忙。

[我还尝试了来自http://www.javascriptkit.com/script/script2/timestamp.shtmlhttp://javascriptcalendar.org/javascript-date-picker.phphttp://www.kean.edu/~cpd/calendar/zapatec/zpcal/doc/wizard.html..nothing 的其他一些日期选择器似乎对我有用。]

当我尝试刷新页面时,它显示'Uncaught TypeError: undefined is not a function'和'Uncaught TypeError: Cannot read property 'activePageClass' of undefined'。

更新:现在只有在我刷新页面时才会弹出日期选择器!所以当我导航到这个日历页面并点击输入框时,它不起作用或没有弹出日期选择器。但是,如果我在浏览器中刷新页面,那么它就可以了!!请帮忙!

【问题讨论】:

  • 您在浏览器控制台中遇到什么错误?
  • 没有错误!它只是没有做任何事情!
  • 你的脚本对我有用
  • 它正在工作。这是冲突的,因为 datepicker() 函数在另一个 js 文件中,而且我重新排列了 css 文件的顺序。谢谢。
  • 哦!只有当我刷新页面时它才有效!因此,当我导航到此日历页面时,它不起作用或不会弹出日期选择器。但是,如果我在浏览器中刷新页面,那么它就可以了!!任何想法? @Alexandru Severin,@j08691

标签: javascript jquery html datepicker


【解决方案1】:

您的脚本对我有用。你添加了 jquery-ui.css 吗?

将此添加到您的网站:

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>                       
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

DEMO

测试: jQuery-2.0.2、jQuery-UI-1.10.3

编辑:
根据您的 cmets,我推断您的日历是在调用脚本后动态添加的。您的 jquery 函数仅影响页面加载时找到的元素,对于动态添加的元素,您需要查看 Jquery 的 live 函数。

尝试将您的脚本替换为:

$(function () {
    $(document).on('click', "#datepicker", function (e){
        $(this).datepicker();
    });
});

【讨论】:

  • 我不确定发生了什么问题。日历没有弹出或没有任何反应。当我尝试刷新页面时,它显示“未捕获类型错误:未定义不是函数”和“未捕获类型错误:无法读取未定义的属性 'activePageClass'”。可能是因为我同时附加了 jquery-2.0.2.js/jquery-1.10.2.js 和 jquery-1.8.2.js 吗?
  • @MSI - “可能是因为我同时附加了 jquery-2.0.2.js/jquery-1.10.2.js 和 jquery-1.8.2.js 吗?”可能。不应在同一页面中包含多个版本的 jQuery。
  • 哦!只有当我刷新页面时它才有效!因此,当我导航到此日历页面时,它不起作用或不会弹出日期选择器。但是如果我在浏览器中刷新页面,那么它就可以了!!任何想法? @Alexandru Severin,@j08691
  • 您是如何导航到该页面的?日期选择器是动态添加的吗?
  • 当我从另一个页面导航时,我会通过如下的 onclick 函数进行操作:“Appery.navigateTo('CalendarPage', { reverse: false });”
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-01
  • 1970-01-01
  • 2013-06-28
  • 1970-01-01
  • 2023-04-09
  • 2013-02-05
相关资源
最近更新 更多