javascript - 如何从 DatePicker 在 TextField 上设置数据

Question

我正在 appcelerator studio 中构建自定义模式。

所以这是代码:

<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>

所以我希望如果用户单击 textStartdate，则显示 DatePicker。这是我的 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'));
            }
        }
    });
});

然后，如果我尝试单击textStartDate，我可以看到DatePicker，然后我设置数据，单击“确定”按钮，但无法在textStartDate上显示数据。

如果我可以尝试调试，代码:

String.formatDate(selectedDate, 'medium')

返回正确的数据，但我在编辑文本上看不到它

编辑我添加屏幕截图

这是app.tss中的字段类

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

Answer 1

正如您所说，String.formatDate(selectedDate, 'medium') 返回正确的数据，但您看不到日期，所以我可以猜测这可能是您的文本的问题-字段颜色属性。

确保您已将颜色属性设置为与文本字段背景颜色不同的属性，或者如果您尚未设置任何此类属性，那么我仍然建议您设置颜色 和 backgroundColor 属性以及一些默认值，以确保您的文本值在文本字段中正确可见。

有时，根据主题或操作系统类型，默认文本颜色和背景颜色组合可能相同，这使得文本值不可见。