Native Script : DatePicker not working on iOS

Issue

I have used NativeScript datepicker and it is working fine with the Android application but I run the same application in iOS then it will occur crash the app.

code is given below which I used

 private openDropDownSelectionModal<T>(dropDownType: string, selectButtonText = 'Select Item', data?: T): Promise<any> {

    let modalDialogOptions: ModalDialogOptions = {
        context: {
            buttonText: selectButtonText,
            data: data
        },
        viewContainerRef: this.viewContainerRef
    };
    let component: any = undefined;

    switch (dropDownType) {
        case 'date':
            component = DatePickerModalComponent;
            break;
        case 'time':
            component = TimePickerModalComponent;
            break;
        default:
            component = DropDownModalComponent
    }

    return this.modalDialogService.showModal(component, modalDialogOptions);
}

And call this function from here

public openDeadlineTimePickerSelectionModal() {
        this.openDropDownSelectionModal('time', 'Select Deadline Time', { date: this.deadlineDate })
            .then((selectedTime: Date) => {
                if (selectedTime) {
                    this.deadlineDate.setHours(selectedTime.getHours());
                    this.deadlineDate.setMinutes(selectedTime.getMinutes());
                    this.deadlineDate.setSeconds(0);
                    const updatedTask = _.cloneDeep(this.task);
                    updatedTask.deadlineDate = this.deadlineDate;
                    this.saveTask(updatedTask);
                }
            });
    }

ERROR :

enter image description here

Solution

There are two similar issues created on Native Script issue tracker, here and here.

You can visit these links for more information, apart from that, if you are using ScrollView then try to wrap it inside StackLayout, something like below:

@Component({
moduleId: module.id,
template: `
    <StackLayout>
        <ScrollView #datePickerModalView>
            <StackLayout>
                <DatePicker #datePicker verticalAlignment="center" (loaded)="configure(datePicker)"></DatePicker>
                <Button class="btn btn-primary btn-active" [text]="buttonText" (tap)="selectDate(datePicker)"></Button>
                <Button class="btn" text="Cancel" (tap)="cancel()"></Button>                
            </StackLayout>
        </ScrollView> 
    </StackLayout>
`})

Answered By – Tejashwi Kalp Taru

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.