如何设置RadDataForm Datepicker的日/月/年选择器的样式

Question

我在Nativescript-Angular App中有一个RadDataForm。

此 RadDataForm 显示了我的一个属性的日期选择器。

我已经阅读了有关设置RadDataForm组件样式的文章，但是缺少有关如何设置更改日期时显示的"轮子文本"样式的部分。(还是我错过了什么？

它们保持黑色，但我需要另一种颜色(即白色(

Answer 1

根据苹果文档，

UIDatePicker 的外观不可自定义。

您应该使用自动布局将日期选取器集成到布局中。 尽管可以调整日期选择器的大小，但它们应该在 固有内容大小。

但是，您可以设置的东西很少。我在这里创建了一个游乐场。

在你的 HTML 中

<RadDataForm [source]="album" (editorUpdate)="dfEditorUpdate($event)">
            <TKEntityProperty tkDataFormProperty name="albumName" displayName="Name of Album"
                index="0"></TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="bandName" displayName="Name of Band"
                index="1"></TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="year" displayName="Release Year"
                index="2"></TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="myRating" displayName="My Rating"
                index="3"></TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="owned" displayName="Do I Own This?"
                index="4"></TKEntityProperty>
            <TKEntityProperty tkDataFormProperty name="birthDate" index="5">
                <TKPropertyEditor tkEntityPropertyEditor type="DatePicker">
                    <TKPropertyEditorStyle tkPropertyEditorStyle strokeColor="#00695c"
                        strokeWidth="2" fillColor="#4db6ac" labelHidden="false"
                        labelTextSize="18" ios:labelFontName="Times New Roman"
                        android:labelFontName="sans-serif-light"
                        labelFontStyle="Italic" labelPosition="Left"
                        labelWidth="60" labelTextColor="#ffffff"></TKPropertyEditorStyle>
                </TKPropertyEditor>
            </TKEntityProperty>
        </RadDataForm>

并在您的 .ts 文件中

import { Color } from "tns-core-modules/color";
import { EntityProperty, DataFormEventData, RadDataForm } from "nativescript-ui-dataform";
let colorLight = new Color("#ff0000");
let colorWhite = new Color("#ffffff");
let colorDark = new Color("#4CAF50");
let colorGray = new Color("#F9F9F9");

和

public dfEditorUpdate(args: DataFormEventData) {
        if (androidApplication) {
            switch (args.propertyName) {
                case "appVolume":
                    break;
            }
        } else {
            const entityProperty: EntityProperty =
                (<RadDataForm>args.object).getPropertyByName(args.propertyName);
            switch (entityProperty.editor.type) {
                case "DatePicker":
                    const coreEditor = args.editor.editor;
                    coreEditor.subviews[0].backgroundColor = colorLight.ios;
                    coreEditor.subviews[0].setValueForKeyPath(colorWhite.ios, 'textColor');

                    break;
            }
        }
    }