How to style the day/month/year selectors of a RadDataForm Datepicker

Question

I'm having a RadDataForm in a Nativescript-Angular App.

This RadDataForm shows a Datepicker for one of my properties.

I have read about styling the components of a RadDataForm but it's missing the part about how to style the "wheel texts" that are shown when I change the date. (Or am I missing something?)

They stay black but I need them in another color (i.e. white)

Answer 1

As per the Apple Docs,

The appearance of UIDatePicker is not customizable.

You should integrate date pickers in your layout using Auto Layout. Although date pickers can be resized, they should be used at their intrinsic content size.

However, there are few thing that you can set. I have created a playground for here.

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

and in your .ts file

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");

and

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;

            }
        }
    }