Question

我在Nativescript-Angular应用中有一个RadDataForm。

此RadDataForm显示我的一个属性的Datepicker。

我已经读过styling the components of a RadDataForm，但缺少更改日期时显示的“样式”文本的样式部分。（或者我错过了什么？）

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

Answer 1

根据Apple Docs，

UIDatePicker的外观不可自定义。

您应该使用自动版式将日期选择器集成到版式中。   尽管可以选择日期选择器的大小，但应在其上使用它们   内部内容大小。

但是，您可以设置的内容很少。我为here创建了一个游乐场。

在您的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;

            }
        }
    }

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

1 个答案: