如何在PhoneGap/Android中实现DATE PICKER

How to implement the DATE PICKER in PhoneGap/Android?

本文关键字：实现 DATE PICKER Android PhoneGap      更新时间：2023-09-26

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

我收到它作为警报。。。但无法将其作为字符串存储在同一页面

为什么要放松你的头？

<input type="date">在所有方面都取决于设备对它的解释，在一些安卓设备中，它甚至不起作用，

有很多插件，插件，不管怎样，对它来说，

我个人喜欢，并使用mobiscroll:链接

编辑：Mobiscroll现在是付费的，但有很多免费的前端移动框架，可能所有框架都有一个日期选择器，比如jQuery mobile日期选择器

您的currentField似乎未定义。在AVD上运行之前，你检查过镀铬控制台吗？请试着发布你试图在其中显示日期的元素。

现在，我假设你正在尝试做以下代码所做的

$('.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"/>

工作起来很有魅力！！希望它能有所帮助！！

我想做的很简单——我只想在单击某个字段时显示一个日期选择器

然而，与Aleks一样，我不知道在我的html中放什么，如何在html中使用它，以及在一些输入中应该放什么来调用日期选择器。

插件中的文档不完整。

我从这个测试项目中找到了一个解决方案。步骤如下：

  1. 先决条件：已安装phonegap/cordova cli
  2. 安装Cordova的设备插件：$ cordova plugin add org.apache.cordova.device
  3. 安装Dirk的日期选择器插件：$ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
  4. 从测试项目中复制nativedatapicker.js，并将其放在项目的js文件夹中。该文件具有showDatePicker(), showDateTimePicker()便利功能
  5. 将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>

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

$('.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();
        });
    });

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

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

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

相关文章：