Editor "DatePicker" throws error when used from json 'source' and 'metadata'

[tgpetrov]

From Dimitar Kerezov:

• Visually the DatePicker editor works as expeted on Android.
• Functionally the source property is changed to an empty object no matter what date is selected.

To reproduce in Properties JSON example add:

    public onPropertyCommitted(args: DataFormEventData) {
        console.log(this.person);
    }

and in html add (propertyCommitted)="onPropertyCommitted($event)" You will notice that the date editor changes the value of the source to { }

[stevie1706]

Hi Guys,

This issue still exists in nativescript-ui-dataform@3.9.0.

Can you please advise - even if there is a workaround?

Thanks

[tgpetrov]

@stevie1706 Can please follow the reproduction steps from my previous comment. Do you reproduce the issue there or you only encounter it with a different setup?

[stevie1706]

@tgpetrov

I am using with a new model not coming from JSON source. Still same problem. I have also tried adding a second form and moving the date object into this. The onPropertyCommitted method firing on radform1 is also affecting radform2. I have console logged out the model during the onPropertyCommit and it removes the dates.

<RadDataForm [source]="model" (propertyCommitted)="onPropertyCommitted($event)" #myDscForm>
        <TKEntityProperty tkDataFormProperty name="function" displayName="Discharge Function" index="0" [valuesProvider]="dischargeFunctions">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="method" [hidden]="dischargeExtendedPropsHidden" displayName="Discharge Method" index="1" [valuesProvider]="dischargeMethods">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="destination" [hidden]="dischargeExtendedPropsHidden" displayName="Discharge Destination" index="2" [valuesProvider]="dischargeDestinations">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="code" [hidden]="dischargeExtendedPropsHidden || dischargeCodeHidden" displayName="Discharge Code" index="3" [valuesProvider]="dischargeCodes">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
        </TKEntityProperty>
    </RadDataForm>
    <RadDataForm [source]="dateValModel" (editorUpdate)="onEditorUpdate($event)" #myDscForm2>
            <TKEntityProperty tkDataFormProperty name="val" [hidden]="dischargeExtendedPropsHidden" displayName="Discharge Date" index="0">
                <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
            </TKEntityProperty>
        </RadDataForm>
        <RadDataForm [source]="timeValModel"  #myDscForm2>
                <TKEntityProperty tkDataFormProperty name="val" [hidden]="dischargeExtendedPropsHidden" displayName="Discharge Time" index="1">
                    <TKPropertyEditor tkEntityPropertyEditor type="TimePicker"></TKPropertyEditor>
                </TKEntityProperty>
            </RadDataForm>

I am not sure why it seems to be affecting the second form but it just empties it out. The date is returned to the model but as a epoch timestamp and not a date object.

public onPropertyCommitted(args) { console.dir("ON PROP COMMIT",this.model); console.dir("ON PROP COMMIT TV",this.timeValModel); console.dir("ON PROP COMMIT DV",this.dateValModel); }

First time this is called it wipes out the time model. Second time it runs it wipes the date model. I don't understand how the method attached to the first radform is affecting the second form?

[tgpetrov]

Hi @stevie1706 I still don't reproduce an issue. With the html above, I created a dateValModel with the following content { "val": new Date() }. Then in onPropertyCommitted:

console.dir(this.dateValModel);
console.log(this.dateValModel['val']);
console.log(this.dateValModel['val'].getFullYear());

Got the following output:

val: Fri Nov 23 2018 17:10:15 GMT+0200 (EET)
Fri Nov 23 2018 17:10:15 GMT+0200 (EET)
2018

which is exactly what I expected. Since this doesn't seem related to the JSON metadata issue from the title, please open another if the issue persist and be more specific in the reproduction steps.