jQuery 移动日历答案

【问题标题】：Jquery Mobile CalendarjQuery 移动日历
【发布时间】：2015-11-13 09:50:06
【问题描述】：

我从这里使用移动 jQuery 日历：http://demos.jquerymobile.com/1.4.1/datepicker/

看起来很简单，但我无法使用 onSelect 函数来捕捉所选日期。

我拥有的是这样的：

<link rel="stylesheet"  href="http://code.jquery.com/mobile/git/jquery.mobile-git.css" />
<link rel="stylesheet" href="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.css" />
<link rel="stylesheet" href="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.theme.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="/jquery-mobile-datepicker-wrapper-master/external/jquery-ui/datepicker.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script src="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.js"></script>
<script>

    $( document ).ready(function() {
        $('.date-input-inline').datepicker({
            onSelect: function(dateText, inst) {
                alert("Date is : " + dateText);
            }
        });
    });
</script>

然后是 HTML：

<body>
<input type="text" class="date-input-inline" data-inline="true" data-role="date">

正如您所期望的那样，这在我的网页上为我提供了一个输入字段和一个日历。

问题是，当我点击一个日期时，我得到no alert显示所选日期。

如何从这个日历中获取选定的日期，如果没有初始化，它是如何工作的？

脚本 src 中的文件正是取自 https://github.com/arschmitz/jquery-mobile-datepicker-wrapper 的文件

这里说 - https://github.com/arschmitz/jquery-mobile-datepicker-wrapper，它在 data-role="date" 上自动初始化。另外应该使用 date，而不是 datepicker。我试过了，但没有任何区别。

【问题讨论】：

标签： jquery-mobile datepicker

【解决方案1】：

我尝试了您提供的代码，它可以按您的意愿工作。

我什至创建了a working jsfiddle

JsFiddle 创建过程

对于这 2 个 css 文件，我复制了 css 部分中的代码，前面带有文件名的注释：

<link rel="stylesheet" href="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.css" />
<link rel="stylesheet" href="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.theme.css" />

选择 jQuery 1.9.1 并添加 http://code.jquery.com/mobile/git/jquery.mobile-git.css 和 http://code.jquery.com/mobile/git/jquery.mobile-git.js 作为外部资源。

对于最后2个js文件

<script src="/jquery-mobile-datepicker-wrapper-master/external/jquery-ui/datepicker.js"></script>
<script src="/jquery-mobile-datepicker-wrapper-master/jquery.mobile.datepicker.js"></script>

我只是将代码复制到 JavaScript 部分。

最后我添加了你的代码：

$( document ).ready(function() {
        $('.date-input-inline').datepicker({
            onSelect: function(dateText, inst) {
                alert("Date is : " + dateText);
            }
        });
    });

结论

如果您测试the jsfid，您将看到弹出窗口显示正常。请注意，一旦您实际选择了日期，就会出现弹出窗口。

您的问题出在其他地方，而不是代码。您的安全设置或浏览器。如果您有未发布的其他代码可能会干扰运行。确保将您自己的示例剥离干净，就像在 fid 中一样。检查控制台是否有错误，甚至可以验证your html

【讨论】：

非常感谢您花时间做这件事。我不确定它是否与我的设置 100% 相同。我没有任何额外的 JS，但它对我不起作用。我会把所有东西都删掉再试一次。

【解决方案2】：

您是否在移动环境中运行它，例如Phonegap 还是 Cordova？如果是，请尝试在普通浏览器中运行并删除 Cordova 或 Phonegap 插件，看看是否可以这样调试。

最可能的问题是其他 Javascript 中的一些错误阻止了所需的选项。

如果您没有执行上述操作，或者这不是问题所在，请删除“onSelect”位并尝试更改。

$( document ).ready(function() {
        $('.date-input-inline').datepicker({
            /* Insert any configuration parameters here, such as changeYear: true, */
        });

    $('.date-input-inline').change(function() {
        var datevalue = $(this).val() ;
        alert (datevalue);
    });
});

【讨论】：

【解决方案3】：

您可以使用 change jquery 事件来检测字段何时发生变化，就像 brianlmerritt 所说的那样。

$( document ).ready(function() {
        $('.date-input-inline').datepicker({
            /* Insert any configuration parameters here, such as changeYear: true, */
        });

    $('.date-input-inline').change(function() {
        var datevalue = $(this).val() ;
        alert (datevalue);
    }); 
});

但是，我认为对于移动设备，最好的方法是使用本机日期选择器。

您可以使用字段类型=“日期”进行测试吗？例如：

<input type="date" class="date-input-inline" data-inline="true" data-role="date">

尝试在真实的移动设备中进行测试

【讨论】：