CustomPropertyEditor example with Angular?

[Douglas]

There is not custom property editor documentation.  There also isn't an example in the ui samples for angular.

Can you provide one?

My objective is to get a standard DatePicker UI element for picking a date.  The defined editor DatePicker displays the date string in a European format and uses a native calendar which is hard to change years on some versions of android.

[Nikolay Tsonev]

Hello,
Thank you for contacting us.

I reviewed the case, however at this time using CustomEditor is not supported for NativeScript Angular 2 projects and for now it could be used only in the pure NativeScript one.

At this point, for now, I could suggest changing the dataFormat of the view, while using the RadDataForm editorUpdate event. When the event is fired you could change the format of the shown date for both iOS and Android. 
I am attaching sample code:
HTML

<GridLayout rows="" columns="">
    <RadDataForm [source]="ticketOrder" (editorUpdate)="onEditorUpdate($event)" tkExampleTitle tkToggleNavButton>
        <TKEntityProperty tkDataFormProperty name="movie" displayName="Movie Name" index="0" [valuesProvider]="movies">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="date" index="1">
            <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="time" index="2">
            <TKPropertyEditor tkEntityPropertyEditor type="TimePicker"></TKPropertyEditor>
        </TKEntityProperty>
        <!-- >> angular-dataform-editors-html -->
        <TKEntityProperty tkDataFormProperty name="type" displayName="Type" index="3" valuesProvider="2D, 3D">
            <TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor"></TKPropertyEditor>
        </TKEntityProperty>
        <!-- << angular-dataform-editors-html -->
        <TKEntityProperty tkDataFormProperty name="price" index="4" readOnly="true">
            <TKPropertyEditor tkEntityPropertyEditor type="Decimal"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="numberOfTickets" displayName="Number of Tickets" index="5">
            <TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactName" displayName="Contact Name" index="6">
            <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactPhone" displayName="Contact Phone" index="7">
            <TKPropertyEditor tkEntityPropertyEditor type="Phone"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="contactEmail" displayName="Contact Email" index="8">
            <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="agreeTerms" displayName="I Agree with Terms" index="9">
            <TKPropertyEditor tkEntityPropertyEditor type="Switch"></TKPropertyEditor>
        </TKEntityProperty>

    </RadDataForm>
</GridLayout>

TypeScript

public onEditorUpdate(args) {

        if (args.propertyName == "date") {
            this.changeDateFormatting(args.editor);
        }
    }

    private changeDateFormatting(editor) {
        if (applicationModule.ios) {
            var dateFormatter = NSDateFormatter.alloc().init();
            dateFormatter.dateFormat = "MM-yyyy-dd";
            editor.dateFormatter = dateFormatter;
        } else {
            var simpleDateFormat = new java.text.SimpleDateFormat("MM-yyyy-dd", java.util.Locale.US);
            editor.setDateFormat(simpleDateFormat);
        }
    }

Bear in mind that you should also install  which will allow you to access some native methods. You could do that with:

npm install tns-platform-declarations --save

Also, you should create reference.d.ts file in the main directory of the project and add the following two lines:

/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />

For further help, you could also review the attached sample project or the example in --samples-angular

Regards,
nikolay.tsonev
Telerik by Progress