PhoneGap 2.0 (Cordova) DatePicker PlugIn 'mode'-获取日期和时间的属性答案

【问题标题】：PhoneGap 2.0 (Cordova) DatePicker PlugIn 'mode'-Property to get Date AND TimePhoneGap 2.0 (Cordova) DatePicker PlugIn 'mode'-获取日期和时间的属性
【发布时间】：2012-08-29 23:48:22
【问题描述】：

今天我开始使用DatePicker-Plugin 使用PhoneGap 创建我的第一个（Android-）应用程序。经过几个小时的调查，我已经开始工作了（感谢datePicker plugin not working in 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
}

但是当我将 mode 留空时，它会引发错误。

感谢您的帮助！

【问题讨论】：

标签： javascript cordova datepicker phonegap-plugins android-datepicker

【解决方案1】：

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

mode : ,

你会得到错误，因为 JS 对象需要你指定的所有键的值。你可以试试

mode : '',

【讨论】：

【解决方案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;
        });

【讨论】：

【解决方案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();
    });
});

【讨论】：