logo标签列表

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

javascriptandroidjquerydatepickercordova
3

我尝试在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>

我收到了一个警告...但是无法将其存储为同一页上的字符串

5个回答
7
为什么要惊慌失措？ 始终依赖于设备的解释，有些安卓设备甚至无法使用。
有很多插件、附加组件等可供选择。
我个人喜欢并使用 mobiscroll：链接。
编辑：Mobiscroll 现在是付费的，但有许多免费的前端移动框架，可能所有这些都有日期选择器，例如 jQuery Mobile-datepicker。
Enoque Duarte，是的，我已经检查了演示。我注意到你不能在星期六和星期天选择日期？为什么呢？ - user
我有点困惑，我们应该从这里复制文件吗？我们需要什么？我记得昨天看到一个网站，说它需要特定的JS和一些Zepto JS等等...但现在我找不到那个页面了，请指导我！ - user
1
没问题，你需要包含的js和.css取决于你选择的日期选择器样式，另外还需要包含jquery+jquerymobile，你可以在这里下载所有文件：https://github.com/acidb/mobiscroll。检查index.html，保留<header>，删除所有的<body>，然后将从http://demo.mobiscroll.com/datetime定制的datepicker的HTML + js粘贴进去。现在看一下<header>，例如，如果你不使用翻译，可以删除所有xx.i18n.xx文件，然后如果你使用iOS样式，可以删除android.css和.js等文件。 - Enoque Duarte
什么是翻译？我只会在Android上使用。 - user
2
翻译是将日期月份等内容翻译成其他语言，例如西班牙语、法语等。由于 JavaScript 代码的当前设置，您无法选择星期六和星期日，请查看以下行：invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },，无效属性定义了星期天（第0天）和星期六（第6天）不可选。 - Enoque Duarte
显示剩余3条评论
2

看起来你的currentField未定义。在运行它之前，你有检查过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"/>

非常好用！！希望能帮到你！

2
我想要发生的事情很简单 - 我只需要在点击某个字段时显示一个日期选择器。
然而，和Aleks一样，我不知道在我的HTML中应该放什么，如何在HTML中使用它，以及在一些输入中调用日期选择器应该放什么。 插件的文档不完整。
我从这个测试项目中找到了解决方案。步骤如下：
  • 前提条件：已安装 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()便捷函数。
  • 将以下内容添加到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时触发单击事件时，它不起作用。有什么想法吗？ - Jay Shukla
1
这是我的工作实现。输入类型为文本，只读。
$('.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();
        });
    });
好的，执行的代码有错误吗？无论如何，我会尝试这段代码并让你知道。 - user
witpok，你能告诉我它是如何工作的吗？我在我的HTML中有这个<input type="text" class="nativedatepicker"/>，但我只得到了一个文本框，我也可以输入字母。 - user
你需要在输入属性中添加readonly="readonly"，并通过将输入绑定到触摸事件来获取焦点。顺便说一下，我在Android上使用此输入，并在iOS上将其替换为input type="date"。它在旧的Android手机上不太可靠，但在iOS上运行得非常好。 - witpok
1
现在，我没有具体想要实现日期选择器的需求...是啊，谢谢，我可以使用这个<input type="date">也可以呢..嗯，我的主要意图是要有一个与安卓相同的复制品。 - user
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接