Question

我正在构建一个应用程序，我遇到了日期和时间选择器的问题。我想自动完成2个文本字段，其中包含所选的日期和时间。

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

第二个问题是timePicker：点击textField（也是2次），选择器出现在我的窗口下面。当我关闭这个窗口时，我的timePicker就在这里......但不是在好地方！所以，我无法选择时间。

这是我的代码：

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

第一个问题 - 在“焦点”事件中添加用于显示选择器的方法。当您第一次点击文本字段时，它们会在“点击”之前触发。一旦你有了焦点，就会触发'click'（只有你没有改变焦点）。如果一个文本字段在窗口加载时自动聚焦，这可能会导致问题，但您可以简单地添加一个布尔标志来处理初始焦点。

第二个问题 - 在正确位置显示时间选择器的解决方法是在调用“showTimePickerDialog”之前手动将其添加到窗口中。只需确保它不会显示在屏幕上。

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 - 日期＆amp;时间选择器问题

1 个答案: