Как стилизовать селекторы дня / месяца / года для RadDataForm Datepicker - PullRequest
Новая
       2

Как стилизовать селекторы дня / месяца / года для RadDataForm Datepicker

1 голос
/ 03 июня 2019

У меня есть RadDataForm в приложении Nativescript-Angular.

Этот RadDataForm показывает Datepicker для одного из моих свойств.

Я читал о стилизации компонентов RadDataForm , но в нем отсутствует часть о том, как стилизовать "тексты колес", которые отображаются при изменении даты. (Или я что-то упустил?)

Они остаются черными, но я нуждаюсь в них в другом цвете (то есть белом)

1 Ответ

0 голосов
/ 04 июня 2019

Согласно Apple Docs ,

Внешний вид UIDatePicker не настраивается.

Вы должны интегрировать средства выбора даты в свой макет с помощью Auto Layout.Хотя средства выбора даты могут быть изменены, их следует использовать с внутренним размером содержимого.

Однако есть несколько вещей, которые вы можете установить.Я создал игровую площадку для здесь .

в вашем 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;

            }
        }
    }
...