Titanium 6.0.3 GA - 日期和时间选择器问题

Question

我正在构建一个应用程序，但我遇到了日期和时间选择器方面的问题。我想用日期和时间自动完成 2 个文本字段 selected.

我的第一个问题是：当我单击日期的文本字段时，它是 selected，但我需要再次单击以启动 datePicker。

第二个问题是 timePicker：单击 textField（也是 2 次）时，选择器出现在我的 window 下方。当我关闭这个 window 时，我的 timePicker 在这里......但不在好地方！所以，我不能select时间。

这是我的代码：

var date_container = Ti.UI.createView({ layout:'horizontal', top:0, width:textfields_width, height:Ti.UI.SIZE });

var datePicker = Ti.UI.createPicker({ type: Ti.UI.PICKER_TYPE_DATE });
var flight_date = Ti.UI.createTextField({
    editable: false,
    width:textfields_width/2,
    height: textfields_height,
    hintText:"Date",
    top:textfields_top+35
});

date.addEventListener('click', function(e) {
    datePicker.showDatePickerDialog({
        value : new Date(), // some date
        maxDate : new Date(),
        callback : function(e) {
            if (e.value) {
                date.value = String.formatDate(e.value, 'medium');
                day_timestamp.value = e.value.getTime();
            }
        }
    });
});
date_container.add(date);



var timePicker = Ti.UI.createPicker({ type: Ti.UI.PICKER_TYPE_TIME });
var time = Ti.UI.createTextField({
    editable: false,
    width:textfields_width/2,
    height: textfields_height,
    hintText:"Heure",
    top:textfields_top+35
});

time.addEventListener('click', function(e) {
    timePicker.showTimePickerDialog({
        format24: true,
        callback : function(e) {
            if (e.value) {
                time.value = String.formatTime(e.value, 'medium');
                hour_timestamp.value = e.value.getTime();
            }
        }
    });
});
date_container.add(time);
main_container.add(date_container);

你能帮帮我吗？谢谢:)

Answer 1

第一个问题 - 添加在 'focus' 事件中显示选择器的方法。当您第一次点击文本字段时，它们会在 'click' 之前触发。一旦你有焦点然后 'click' 将被触发（而且只有这样，因为你没有改变焦点）。如果 window 加载时其中一个文本字段自动聚焦，这可能会导致问题，但您可以简单地添加一个布尔标志来处理初始焦点。

第二个问题 - 在正确位置显示时间选择器的解决方法是在调用 'showTimePickerDialog' 之前手动将其添加到 window。只要确保它不显示在屏幕上即可。

var textfields_width = 300;
var textfields_height = 80;
var textfields_top = 80;

// Boolean flag in case you want to prevent
// any of the pickers to show immediately
var initialLoad = true;

var main_container = Titanium.UI.createWindow({});

var date_container = Ti.UI.createView({
    layout:'horizontal',
    top:0,
    width:textfields_width,
    height:Ti.UI.SIZE
});

var datePicker = Ti.UI.createPicker({
    type: Ti.UI.PICKER_TYPE_DATE
});

var date = Ti.UI.createTextField({
    editable: false,
    width:textfields_width/2,
    height: textfields_height,
    hintText:"Date",
    top:textfields_top+35
});

var timePicker = Ti.UI.createPicker({
 type: Ti.UI.PICKER_TYPE_TIME,
 //make sure the time picker is not showing when you add it
 top: -1000,
 left: -1000
  });

var time = Ti.UI.createTextField({
    editable: false,
    width:textfields_width/2,
    height: textfields_height,
    hintText:"Heure",
    top:textfields_top+35
});

//add the time picker to the main container
main_container.add(timePicker);
date_container.add(date);
date_container.add(time);
main_container.add(date_container);

main_container.open();

datePickerListener = function(e) {
    //guarding if the focus is on the textfield
    if (!initialLoad) {
        datePicker.showDatePickerDialog({
        value : new Date(), // some date
        maxDate : new Date(),
        callback : function(e) {
            if (e.value) {
                date.value = String.formatDate(e.value, 'medium');
                }
            }
        });
    }
    initialLoad = false;
}

timePikcerListener = function(e) {
    timePicker.showTimePickerDialog({
        format24: true,
        callback : function(e) {
            if (e.value) {
                time.value = String.formatTime(e.value, 'medium');
            }
        }
    });
}

date.addEventListener('focus', datePickerListener);
date.addEventListener('click', datePickerListener);
time.addEventListener('focus', timePikcerListener);
time.addEventListener('click', timePikcerListener);

Titanium 6.0.3 GA - 日期和时间选择器问题

Titanium 6.0.3 GA - Date & Time pickers problems

android

datepicker

titanium

appcelerator

timepicker