PhoneGap 2.0(Cordova）DatePicker插件'模式'-属性以获取日期和时间

PhoneGap 2.0 (Cordova) DatePicker PlugIn 'mode'-Property to get Date AND Time

本文关键字：属性 #39- 模式 获取 时间 取日期 Cordova 插件 DatePicker PhoneGap      更新时间：2023-09-26

今天，我开始使用DatePicker插件，用PhoneGap创建我的第一个（Android）应用程序。经过几个小时的调查，我已经开始工作了（感谢datePicker插件在Phonegap 2.0中不起作用），但我并不完全想要：

我有一个带有class="nativedatepicker" (date)（jQuery点击事件的选择器）的输入，还有一个带class="nativetimepicker" (time)的输入，所以我可以在第一个输入中选择日期，在第二个输入中可以选择时间。

是否可以将其合并为一个输入，在其中我可以一步选择日期和时间？我想我可以在这里的某个地方做这件事（插件中的一些JS）：

window.datePicker.show({
    date : myNewDate,
    mode : 'date', // date or time or blank for both
    allowOldDates : true
}

但当我将CCD_ 3留空时，它会抛出一个错误。

谢谢你的帮助！

如何将其留空？如果你做

mode : ,

由于JS对象需要为您指定的所有键指定一个值，因此会出现错误。你可以试试

mode : '',

不，目前使用当前android的DatePicker插件是不可能的，尽管他们说如果你将模式属性设置为空，你将同时获得这两个属性。您可以在DatePickerPlugin.java文件中看到它：

if (ACTION_TIME.equalsIgnoreCase(action)) {       //mode is set to "time"
        //plugin java code
    } else if (ACTION_DATE.equalsIgnoreCase(action)) {         //mode is set to "date"
        //plugin java code
    } else {        //mode is blank
        Log.d(pluginName, "Unknown action. Only 'date' or 'time' are valid actions");
        return;
    }

对于同时选择日期和时间的问题，我的解决方案是首先显示日期对话框，然后在成功回调中显示时间对话框。

代码如下：

        var showDialog = function(mode, date, cb) {
            window.plugins.datePicker.show({
                date : date,
                mode : mode
            }, function(dateStr) {
                cb(new Date(dateStr));
            });
        };
        $('.nativedatepicker').click(function(e) {
            e.preventDefault();
            var currentField = $(this);
            var oldDate = new Date(currentField.val()) || new Date();
            //show the dialog to select the date
            showDialog("date", oldDate, function(newDate) {
                //we have a new date selected, copy time values from the old date for time dialog
                newDate.setHours(oldDate.getHours());
                newDate.setMinutes(oldDate.getMinutes());
                //show the time dialog          
                showDialog("time", newDate, function(newDateTime) {
                    //now we have time selected, copy it to new date and update the field
                    newDate.setHours(newDateTime.getHours());
                    newDate.setMinutes(newDateTime.getMinutes());
                    currentField.val(newDate.toISOString());
                });
            });
            return false;
        });

这是我对DZL答案的替代解决方案。我将日期和时间连接到两个单独的按钮上，这两个按钮都可以更改同一日期：

 var date = new Date();
 var $date = $('#date_result');
  var normalizeNumber = function(n){
    var c = parseInt(n, 10); 
    return (c<10) ? "0"+c : c; 
 }
 var normalizeTime = function(t){
    var hours = t.getHours();
    var minutes = t.getMinutes();
    var meridiem = ' AM ';
    if (hours > 12) {
        hours -= 12;
        meridiem = ' PM ';
    } else if (hours === 0) {
       hours = 12;
    }
    minutes =  normalizeNumber(minutes);
    return hours + ':' + minutes + meridiem; 
 }
$('#date-btn').on('click', function(event) {
    var myNewDate = date;
    if(typeof myNewDate === "number"){ myNewDate = new Date (myNewDate); }
    window.plugins.datePicker.show({
        date : myNewDate,
        mode : 'date',
        allowOldDates : true
    }, function(returnDate) {
        var newDate = new Date(returnDate);
        newDate.setMinutes(date.getMinutes());
        newDate.setHours(date.getHours());
        date = newDate;
        $date.val(newDate.toLocaleDateString() + ' ' + normalizeTime(newDate));
        $date.blur();
    });
});
$('#time-btn').on('click', function(event) {
    var myNewTime = date;
    if(typeof myNewTime === "number"){ myNewTime = new Date (myNewTime); }
    plugins.datePicker.show({
        date : myNewTime,
        mode : 'time',
        allowOldDates : true
    }, function(returnDate) {
        var newDate = new Date(returnDate);
        newDate.setDate(date.getDate());
        newDate.setMonth(date.getMonth());
        newDate.setFullYear(date.getFullYear());            
        date = newDate;
        $date.val(newDate.toLocaleDateString() + ' ' + normalizeTime(newDate));     
        $date.blur();
    });
});
相关文章：