如何在 PhoneGap/Android 中实现日期选择器？答案

【问题标题】：How to implement the DATE PICKER in PhoneGap/Android?如何在 PhoneGap/Android 中实现日期选择器？
【发布时间】：2013-06-21 06:39:19
【问题描述】：

我尝试在 android 中实现日期选择器。我希望它获取数据并以文本格式显示

  <html>
  <head>
    <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
  <script type="text/javascript" charset="utf-8">

  function dateTest() {
      var myNewDate = new Date();

      window.plugins.datePicker.show({
          date : myNewDate,
          mode : 'date', // date or time or blank for both
          allowOldDates : true
      }, function(returnDate) {
        var newDate = new Date(returnDate);
            currentField.val(newDate.toString("dd/MMM/yyyy"));

            // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
            currentField.blur();
      });
  }
</script>
</head>
<body bgcolor="#ffffff">
<hr>DatePicker Test<hr><br>
     <input type="button" onClick ="dateTest()" value ="Today's Date!!" />
     <div id="view"></div>
</body>
</html>

我将其作为警报...但无法将其作为字符串存储在同一页面上

【问题讨论】：

标签： javascript android jquery datepicker cordova

【解决方案1】：

为什么要松开你的头？

<input type="date"> 总是取决于设备对它的解释，在某些 android 设备中它甚至不起作用，

有很多插件，插件，等等，

我个人喜欢，并使用mobiscroll：Link

编辑：Mobiscroll 现在已付费，但有大量免费的前端移动框架，并且可能所有这些框架都有一个日期选择器，例如 jQuery Mobile-datepicker。

【讨论】：

Enoque Duarte，是的，我已经检查了演示。我注意到您无法选择星期六和星期日的日期？为什么会这样？
我有一个困惑，我们应该从here复制文件吗？我们应该拥有什么？我记得……我昨天看到了这个网站……说它需要特定的 JS 和一些 zepto JS 等等……但是我现在找不到那个页面了……请指导我！！
当然没问题，你必须包含的js和.css取决于你选择的日期选择器样式，还需要包含jquery+jquerymobile，你可以在这里下载所有文件：github.com/acidb/mobiscroll，检查index.html，保留
，删除所有正文，然后从您在demo.mobiscroll.com/datetime 所做的定制日期选择器中粘贴 html + js 现在查看标题，例如，如果您不使用翻译，你可以删除所有xx.i18n.xx文件，然后如果你使用的是iOS样式，你可以删除android的.css和.js等
什么是翻译？我只会用于 android
translations 是将日期月份翻译成另一种语言的功能，例如西班牙语、法语等，由于 javascript 代码的当前设置，您无法选择周六和周日，请注意以下行：@987654328 @，无效属性定义第 0 天（星期日）和第 6 天（星期六）无效

【解决方案2】：

您的 currentField 似乎是未定义的。您在 AVD 上运行之前检查过 chrome 控制台吗？请尝试发布您尝试显示日期的元素。

现在，我假设您正在尝试执行以下代码的操作

$('.nativedatepicker').focus(function(event) {
            var currentField = $(this);
            var myNewDate = new Date(Date.parse(currentField.val())) || new Date();

            // Same handling for iPhone and Android
            window.plugins.datePicker.show({
                date : myNewDate,
                mode : 'date', // date or time or blank for both
                allowOldDates : true
            }, function(returnDate) {
                var newDate = new Date(returnDate);
                var newString = newDate.toString();
                newString = newString.substring(0,15);
                currentField.val(newString);
                // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
                currentField.blur();
            });
        });

元素如下

<input type="text" class="nativedatepicker" readonly value = "Fri Jun 21 2013"/>

像魅力一样工作！希望有帮助！！

【讨论】：

【解决方案3】：

我想要发生的事情很简单 - 我只想在单击某个字段时显示一个日期选择器。

但是，和 Aleks 一样，我不知道在我的 html 中放入什么，如何在 html 中使用它，以及我应该在 html 中放入什么以在某些输入上调用 datepicker。

plugin 的文档不完整。

我从test project 中找到了解决方案。步骤如下：

先决条件：已安装phonegap/cordova-cli
安装 Cordova 的 device 插件：$ cordova plugin add org.apache.cordova.device
安装 Dirk 的 datepicker 插件：$ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
从测试项目中复制nativedatepicker.js 并将其放在项目的js 文件夹中。此文件具有showDatePicker(), showDateTimePicker() 便利功能。
添加 ff。转至index.html 代码：

注意：当您在浏览器中测试时，日期选择器不会显示

....
    <div class="form-group">
      <label>Appointment</label>
      <input type="text" class="form-control datepicker" id="appointment">
    </div>
....
<script src="js/nativedatepicker.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript">
    (function($){
        $(document).ready(function () {
            $(document).on('click', '.datepicker', function () {
                showDatePicker($(this), 'date');
            });

            $(document).on('click', '.timepicker', function () {
                showDatePicker($(this), 'time');
            });

            $(document).on('click', '.datetimepicker', function () {
                if (device.platform === "Android")
                    showDateTimePicker($(this));
                else
                    showDatePicker($(this), 'datetime');
            });
        });
    })(jQuery);
</script>

【讨论】：

我在 ionic 应用程序中使用 android 的输入类型日期。它工作正常，但我将此输入设置为隐藏并在用户单击 div 时触发单击事件，因此它不起作用。有什么想法吗？

【解决方案4】：

这是我的工作实现。输入类型为文本，只读。

$('.nativedatepicker').focus(function(event) {
        var currentField = $(this);
        var myNewDate = new Date();
        window.plugins.datePicker.show({
            date : myNewDate,
            mode : 'date',
            allowOldDates : true
        }, function(returnDate) {
            var array = returnDate.split("/");
            var day = array[2], month = array[1];
            if (day <= 9)
                day = "0" + day;
            if (month <= 9)
                month = "0" + month;
            currentField.val(array[0] + "/" + month + "/" + day);
            currentField.blur();
        });
    });

【讨论】：

ok,执行的代码有错误吗？无论如何都会尝试此代码并让您知道。
witpok，你能告诉我它是如何工作的...我的 HTML 中有这个 <input type="text" class="nativedatepicker"/> 我只是得到一个文本框，我也可以输入字母。
您需要添加到输入属性 readonly="readonly" 我通过将输入绑定到触摸事件来获得焦点。而且，顺便说一句，我将此输入用于 android，并在 iOS 上将其替换为 input type="date"。它在较旧的 Android 手机上不可靠，但在 iOS 上运行良好。

【解决方案5】：

如果有可用的自定义日期选择器，为什么要实现自定义日期选择器？

您可以简单地使用<input type="date"> 来创建众所周知的iOS 日期选择器。

有关移动设备输入字段的更多信息，我建议：http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience

【讨论】：

现在，我没有任何具体的实现日期选择器的愿望......是的，谢谢，我也可以使用这个<input type="date"> na..好吧，我的主要意图是与 android 中相同的复制品。