How can set data on TextField from DatePicker

Question

I'm building a custom modal in appcelerator studio.

So this is the code:

<Alloy>
    <Window id="modal_add_edit" onClose="cleanup" modal="true">
        <View class="container">
            <Label id="title" class="title"/>
            <View class="separator"></View>

            <TableView id="table" height="Titanium.UI.SIZE" layout="vertical">                          
                    <TableViewRow class="menu_item" top="25">
                        <Label id="description" class="label" left="12" />
                        <Picker id="comboDecription" left="20" selectionIndicator="true">
                            <PickerColumn id="column1">
                                <PickerRow title="Esposizione Tossica"/>
                                <PickerRow title="Stato civile"/>
                                <PickerRow title="Diet"/>
                            </PickerColumn>
                        </Picker>
                    </TableViewRow>

                    <!-- flags -->
                    <TableViewRow id="data" class="menu_item" top="25">
                        <!--DATA START-->
                        <Label id="start_date" class="label" left="12" />
                        <TextField id="textStartDate" class="field"
                             width="200px"></TextField>
                    </TableViewRow>



            </TableView>

            <View class="separator"></View>
            <TableView id="tableButton" width="Titanium.UI.FILL" layout="horizontal">                           
                    <TableViewRow class="menu_item" top="25">
                        <Button id="buttonClose" class="buttonClose" onClick="onClose" ></Button>
                        <Button id="buttonSave" class="buttonSave"></Button>
                    </TableViewRow> 
            </TableView>
        </View>
    </Window>
</Alloy>

So I want that if the user click on textStartdate, the DatePicker is showing. This is the code of my controller:

var picker = Ti.UI.createPicker({});
$.textStartDate.addEventListener('click', function(e) { 
    picker.showDatePickerDialog({
        value : new Date(), // some date
        callback : function(e) {
            if (e.cancel) {
                Ti.API.info('user canceled dialog');
            } else {
                selectedDate = e.value;
                $.textStartDate.setValue(String.formatDate(selectedDate, 'medium'));
            }
        }
    });
});

Then if I try to click on textStartDate, I can see the DatePicker, then I set the data, click on OK button but I can't display the data on textStartDate.

If I can try in debug, the code:

String.formatDate(selectedDate, 'medium')

return the correct data but I can't see it on my edittext

edit I add the screen shot

this is the class of field in app.tss

".field": {
    left: "5%",
    width: Titanium.UI.FILL,
    borderRadius: 5,
    hintTextColor: "#aaa",
    color: "#333",
    backgroundColor: "white"
}

Answer 1

As you said that String.formatDate(selectedDate, 'medium') is returning correct data, but you cannot see the date, so I can guess that it might be the problem with your text-field color properties.

Make sure that you have set the color property to different one than the text-field backgroundColor, or if you have not set any such property, then I still suggest you to set color and backgroundColor properties and some default value to make sure that your text value is properly visible in the text field.

Sometimes depending on themes or OS type, default text color & backgroundColor combinations could be same which makes the text value invisible.