Hi,
I am trying to select a date from datePicker and display the same on a label that is on a tableViewRow. But In Android I am facing two issues:
1) minDate property of datePicker is not working on Android.
2) text Property of the label is not getting updated after selecting the value from date Picker.
Below is the code that I am using to perform the above operations
index.xml is :
<Alloy> <Window id = "wrapper" > <View id = "headerView"> <Label id = "headerLabel" class = "fontBold"/> </View> <TableView id="table" class = "minRowHeight" onClick = "openOptions"> <TableViewRow id = "row2" height = "30"> <Label id = "leftLabel2" /> <Label id = "rightLabel2"/> </TableViewRow> </TableView> <View id="datePickerView" > <Toolbar id='toolbar' platform = "ios"> <Items> <Button id="cancel" title="Cancel" style="Ti.UI.iPhone.SystemButtonStyle.BORDERED" onClick = "hidePicker" /> <FlexSpace/> <Button id="done" title = "Done" systemButton="Ti.UI.iPhone.SystemButton.DONE" onClick="selectValue" /> </Items> </Toolbar> <View id = "datePickerHeader" platform="android"> <Button id="cancelDatePicker" class = "fontBold" title="Cancel" onClick = "hidePicker" /> <Button id="doneDatePicker" class = "fontBold" title = "Done" onClick="selectValue" /> </View> <Picker id="datePicker" top = "0" selectionIndicator="true" type = "Ti.UI.PICKER_TYPE_DATE"/> </View> </Window> </Alloy>index.tss is :
"#wrapper":{ navBarHidden:true, top : '0%', height : '100%', backgroundColor : '#055496' } "#headerView":{ width : '100%', top : 0, height:48, } "#headerLabel":{ text : 'Test Sample', color : 'white', font : { fontSize : '18sp' }, width : Ti.UI.SIZE } "#table[platform=ios]":{ top:58, backgroundColor:'white', borderRadius :4, width:'95%', height : Ti.UI.SIZE, separatorColor :'#c6c6c6', scrollable :false } "#table[platform=android]":{ top:58, backgroundColor:'white', borderRadius :4, width:'95%', height : Ti.UI.SIZE, separatorColor :'#c6c6c6' } "#row2":{ //height:30, width : Ti.UI.FILL, }, "#leftLabel2":{ text :'Request Date', left:'2%', width:'48%', height:Ti.UI.SIZE, textAlign :'left', color :'#055394', font:{ fontSize :"14sp" }, touchEnabled :false } "#rightLabel2":{ text :'Select Date', left:'47.5%', width:'52.5%', height:Ti.UI.SIZE, textAlign :'left', //color :'#343b42', color :'#343b42', font:{ fontSize :"13sp" }, editable :false, touchEnabled :false } "#datePickerView[platform=ios]": { bottom: '-260', layout: 'vertical', width: Ti.UI.FILL, height: 260, backgroundColor: 'gray' } "#datePickerView[platform=android]": { bottom: '-260', layout: 'vertical', width: Ti.UI.FILL, height: 260, backgroundColor: 'transparent' } "#datePickerHeader[platform=android]":{ top:0, width:'100%', height:40, backgroundColor :'transparent' } "#cancelDatePicker[platform=android]":{ title : 'Cancel', height : '40', width : '70', left : '3', color : 'black', borderRadius:2, font : { fontSize : '14sp' } } "#doneDatePicker[platform=android]":{ title : 'Done', height : '40', width : '70', right : '3', color : 'black', borderRadius:2, font : { fontSize : '14sp' } } ".rowHeight":{ height : Ti.UI.SIZE } ".minRowHeight":{ minRowHeight : 44 }index.js is :
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var selectedDateValue = ''; //function that return animation Object to animate the views. function doAnimate(bottom) { var animation = Ti.UI.createAnimation({ bottom : bottom, duration : 350 }); return animation; } function selectValue(e) { var dateValue = $.datePicker.getValue(); $.rightLabel2.text = dateValue.getDate() + " " + monthNames[dateValue.getMonth()] + "'" + dateValue.getFullYear().toString().substr(2, 2); if (OS_IOS) { $.datePickerView.animate(doAnimate(-260)); } else { $.datePickerView.animate(doAnimate(-260)); } } function hidePicker() { if (OS_IOS) { $.datePickerView.animate(doAnimate(-260)); } else { $.datePickerView.animate(doAnimate(-260)); } } function openDatePicker(e) { $.datePickerView.animate(doAnimate(0)); } function openOptions(e) { switch(e.source.id) { case "row2": openDatePicker(); break; } } $.datePicker.minDate = new Date(); $.wrapper.open();please use the above case to test the scenerio.
Steps: 1) click on the row
2) datePicker will be shown, select the value.
3) Press Done Button.
So, Selected value should be displayed on the rightLabel of TableViewRow.
It is working on IPhone. But not on Android.
I am using Titanium SDK - 3.1.3
Please help!
Thanks
Pankaj