Titanium 6.0.3 GA - 날짜 및 시간 선택기 문제

Question

저는 앱을 만들고 있는데 날짜와 시간 선택기에 문제가 있습니다. 선택한 날짜와 시간으로 2 개의 텍스트 필드를 자동 완성하고 싶습니다.

첫 번째 문제는 날짜 필드를 클릭하면 선택되지만 다른 시간을 클릭하여 datePicker를 시작해야합니다.

두 번째 문제는 timePicker와 같습니다. textField를 두 번 클릭하면 (두 번) 내 창 아래에 선택기가 나타납니다. 이 창을 닫으면 내 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

첫 번째 문제 - 피커를 'focus'이벤트에 표시하는 방법을 추가하십시오. 텍스트 필드를 처음 클릭 할 때 '클릭'전에 트리거됩니다. 포커스가 있으면 '클릭'이 트리거됩니다 (포커스를 변경하지 않기 때문에). 창이로드 될 때 텍스트 필드가 자동으로 포커스되는 경우 문제가 발생할 수 있지만 초기 포커스를 처리하기 위해 부울 플래그를 추가하기 만하면됩니다.

두 번째 문제점 - 시간 선택 도구를 올바른 위치에 표시하는 방법은 '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);