无法使用javascript弹出日期选择器

时间:2014-06-16 16:30:41

标签: javascript jquery html5 datepicker

我想在使用jQuery,appery.io框架的网站中添加一个datepicker。任何人都可以建议一个链接或教程来做这个吗?尝试在网站上弹出一个日期选择器,现在它只在这样的输入框中显示当前日期:

<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 datepicker。添加了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 0.4 / jQuery的ui.js。添加了脚本:

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

        </script>
输入框中的

进行了如下更改:

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

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

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

当我尝试刷新页面时,它会显示&#39; Uncaught TypeError:undefined不是函数&#39;和&#39; Uncaught TypeError:无法读取属性&#39; activePageClass&#39;未定义&#39;。

更新:现在只有刷新页面时才会弹出datepicker!因此,当我导航到此日历页面并单击输入框时,它不起作用或不会弹出日期选择器。但是,如果我在浏览器中刷新页面,那么它的工作原理!请帮忙!

1 个答案:

答案 0 :(得分: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

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

尝试用以下代码替换脚本:

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