Question

今天我开始使用DatePicker-Plugin使用PhoneGap创建我的第一个（Android-）应用程序。经过几个小时的调查后，我已经开始工作了（感谢datePicker plugin not working in Phonegap 2.0）但不是我想要的：

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

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

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

但是当我将mode留空时会抛出错误。

感谢您的帮助！

Answer 1

你怎么把它留空？如果你这样做

mode : ,

您将收到错误，因为JS对象需要您指定的所有键的值。你可以尝试

mode : '',

Answer 2

不，目前无法使用当前的DatePicker插件用于Android，即使他们说如果你将mode属性设置为空白，你将获得两者。您可以在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;
        });

Answer 3

这是我对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();
    });
});

PhoneGap 2.0（Cordova）DatePicker PlugIn＆＃39;模式＆＃39; -Property获取日期和时间

3 个答案: