Nativescript: propertyChange not fired for DatePicker, TimePicker and ListPicker on NS 3.0.0

[clarenceh]

Tell us about the problem

I updated my NS Angular app from 2.5 to 3.0.0, and found that my code which bind to the "propertyChange" event on DatePicker, TimePicker and ListPicker fields no longer works. I tried the Nativescript Angular sample project and also can re-produce the problem.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)

3.0.0

• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)

│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 3.0.0 │ 3.0.0 │ Up to date │
│ tns-core-modules │ 3.0.0 │ 3.0.0 │ Up to date │
│ tns-android │ 3.0.0 │ 3.0.0 │ Up to date │
│ tns-ios │ 3.0.0 │ 3.0.0 │ Up to date │

Please tell us how to recreate the issue in as much detail as possible.

• Clone the NS Angular sample project (https://github.com/NativeScript/nativescript-sdk-examples-ng.git)
• Modify the template "nativescript-sdk-examples-ng/app/ui-category/date-picker/configure-date-picker/configure-date-picker.component.html" as follows:

<StackLayout sdkExampleTitle sdkToggleNavButton>
    <!-- >> creating-datepicker-html -->
    <DatePicker id="myDatePicker" #datePicker (loaded)="configure(datePicker)" verticalAlignment="center"></DatePicker>
    <!-- << creating-datepicker-html -->
</StackLayout>

• Modify the class "nativescript-sdk-examples-ng/app/ui-category/date-picker/configure-date-picker/configure-date-picker.component.ts" as follows:

import { Component, OnInit } from "@angular/core";
import { DatePicker } from "ui/date-picker";
import { Page } from "tns-core-modules/ui/page";

@Component({
    moduleId: module.id,
    templateUrl: "./configure-date-picker.component.html"
})
export class ConfigureDatePickerComponent implements OnInit {

    myDatePicker: DatePicker;

    constructor(private page: Page) {};

    configure(datePicker: DatePicker) {
        datePicker.year = 1980;
        datePicker.month = 2;
        datePicker.day = 9;
        datePicker.minDate = new Date(1975, 0, 29);
        datePicker.maxDate = new Date(2045, 4, 12);
    }

    ngOnInit(): void {

        this.myDatePicker = <DatePicker>this.page.getViewById('myDatePicker');

        this.myDatePicker.on("loaded", (propertyChangeData) => {
console.log(`----------date picker loaded`);
        });

        this.myDatePicker.on("propertyChange", (propertyChangeData) => {
console.log(`----------property changed`);
        });

    }

}

• tns run ios/android --emulator
• Go to Date Picker sample and change the date value

Outcome:

• Only the message on "loaded" event fired, but not the "propertyChange" event.

[tsonevn]

Hi @clarenceh,
Thank you for reporting this issue.
With the new NativeScript release 3.0 we introduce some breaking changes with our propertyChange system.
At this time you should specify the name of the property in on method, which changes you would like to handle. For example, for the DatePicke, you should use dateChange event name.

TypeScript

 this.myDatePicker.on("dateChange", (args) => {
console.log(`----------property changed`);
        });

[srnaik]

Hi @tsonevn ,

I am not able to achieve two-way data binding for DatePicker by using the Nativescript SDK examples (https://github.com/NativeScript/nativescript-sdk-examples-ng/tree/master/app/ui-category/date-picker/configure-date-picker), can you please let me know how can I achieve two-way data binding in DatePicker ?

[tsonevn]

Hi @srnaik,
I tested two-way binding on my side for DatePicker component and it seems to work as expected. You could review the attached sample code below.
HTML

<StackLayout sdkExampleTitle sdkToggleNavButton>
    <!-- >> creating-datepicker-html -->
    <DatePicker #datePicker  verticalAlignment="center" [(ngModel)]="date"></DatePicker>
    <Button text="Show new Date" (tap)="onTap($event)"></Button>

    <!-- << creating-datepicker-html -->
</StackLayout>

TypeScript

import { Component } from "@angular/core";
import { DatePicker } from "ui/date-picker";

@Component({
    moduleId: module.id,
    templateUrl: "./configure-date-picker.component.html"
})
export class ConfigureDatePickerComponent {
    public date:Date;
    configure(datePicker: DatePicker) {
    }
    ngOnInit(){
        this.date = new Date(2040, 4, 13);
    }
    onTap(args){
        console.log("print new date");
        console.dir(this.date);
    }
}

[EddyVerbruggen]

Note that in the example above I had to change [(date)] to [(ngModel)] to make the date property correctly update.

[srnaik]

Thanks for the reply @tsonevn and @EddyVerbruggen , I am able to get two-way data binding for both Date-Picker and Time-Picker. And now I am trying to implement two-way data binding for Date-Time field, for now I am able to bind the Date part of the Date-Time field to Date-Picker and Time part of the Date-Time field to Time picker, However I am not able to change/modify these Date &Time values using the Date and Time picker.

How can I implement two-way data binding for the Date-Time field using Date-picker and Time-Picker ?
Do we have a separate Date-Time Picker in Nativescript?

[tsonevn]

Hi @srnaik,
If I understand you correctly, you are trying to handle the dateChange event and to display the newly selected value in the TextField.
If this is the case you could review the below-attached sample code, where is shown how to handle the dateChange event and how to change the value of the TextField text property.
HTML

<StackLayout sdkExampleTitle sdkToggleNavButton>
    <!-- >> creating-datepicker-html -->
    <TextField #tf hint="date" ></TextField>

    <DatePicker #datePicker  verticalAlignment="center" (dateChange)="tf.text = datePicker.date" [(ngModel)]="date"></DatePicker>
    <Button text="Show new Date" (tap)="onTap($event)"></Button>

    <!-- << creating-datepicker-html -->
</StackLayout>

TypeScript

import { Component, OnInit } from "@angular/core";
import { DatePicker } from "ui/date-picker";
import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
     public date:Date;
    configure(datePicker: DatePicker) {
    }
    ngOnInit(){
        this.date = new Date(2040, 4, 13);
    }
    onTap(args){
        console.log("print new date");
        console.dir(this.date);
    }
}

[srnaik]

Thanks @tsonevn , I am able to achieve this functionality !

[viniciodeltoro]

Where can I see a list of available working event names for Nativescript 3.0?
I'm trying to get the height of a StackLayout when the keyboard shows up using the "propertyChange" event but it never runs.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.