チタン6.0.3 GA - 日付と時刻のピッカーの問題

Question

私はアプリを構築していますが、日付と時刻のピッカーに問題があります。私は選択された日付と時間で2つのテキストフィールドを自動完成したい。

私の最初の問題は、日付のテキストフィールドをクリックすると選択されますが、別の時間をクリックしてdatePickerを起動する必要があります。

2番目の問題は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

最初の問題 - 'フォーカス'イベントでもピッカーを表示する方法を追加します。それらは最初にテキストフィールドをタップすると「クリック」する前にトリガーされます。フォーカスを取得すると、「クリック」がトリガーされます（フォーカスを変更していないため）。これは、ウィンドウがロードされたときにテキストフィールドが自動的にフォーカスされる場合に問題を引き起こす可能性がありますが、ブール値フラグを追加するだけで初期フォーカスを処理できます。

第2の問題 - タイムピッカーを正しい場所に表示するための回避策は、 '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);