鈦6.0.3 GA - 日期和時間選擇器問題

Question

我正在構建一個應用程序，我有日期和時間選擇器的問題。我想用所選的日期和時間自動填充2個文本框。

我的第一個問題是：當我點擊日期的文本框時，它被選中，但我需要再次點擊以啓動datePicker。

第二個問題是使用timePicker：單擊textField（也是2次）時，選擇器出現在我的窗口下。當我關閉這個窗口時，我的時間戳器在這裏......但不在好的地方！所以，我不能選擇時間。

這裏是我的代碼：

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

第一個問題 - 添加方法顯示撿拾器也'焦點'事件。當您第一次點擊文本字段時，它們會在「點擊」之前觸發。一旦你有了焦點，那麼'點擊'將會被觸發（並且只有這樣，因爲你沒有改變焦點）。如果在窗口加載時文本字段自動聚焦，則可能會導致問題，但您可以簡單地添加布爾標誌來照顧初始焦點。

第二個問題 - 在正確的位置顯示時間選擇器的解決方法是在調用「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);