RadCalendar (iOS) - selectedDateRange is undefined

PetroSuch commented 4 years ago

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Tell us about the problem

Please, ensure your title is less than 63 characters long and starts with a capital letter.

Which platform(s) does your issue occur on?

iOS/Android/Both (if applicable tell us the specific version of the platform)

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

Progress NativeScript UI plugin version: (the version of nativescript-ui-* in the package.json)
CLI: (run tns --version to fetch it)
Cross-platform modules: (the version of tns-core-modules in the package.json)
Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json)

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

Start the application ..
...

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

(You can paste entire code snippets, link to playground demo or attach a runnable project) "dependencies": { "@angular/animations": "~8.0.0", "@angular/common": "~8.0.0", "@angular/compiler": "~8.0.0", "@angular/core": "~8.0.0", "@angular/forms": "~8.0.0", "@angular/http": "~8.0.0-beta.10", "@angular/platform-browser": "~8.0.0", "@angular/platform-browser-dynamic": "~8.0.0", "@angular/router": "~8.0.0", "@nativescript/schematics": "^0.6.0", "@nstudio/nativescript-cardview": "^1.0.0", "@nstudio/nativescript-pulltorefresh": "^1.0.1", "@tweenjs/tween.js": "^17.4.0", "lodash": "^4.17.15", "moment": "^2.24.0", "nativescript-angular": "~8.0.0", "nativescript-dom": "^2.0.5", "nativescript-fingerprint-auth": "^7.0.1", "nativescript-keyboard-toolbar": "^1.1.0", "nativescript-localstorage": "^2.0.1", "nativescript-performance-monitor": "^1.0.0", "nativescript-platform-css": "^1.6.10", "nativescript-pulltorefresh": "^2.3.0", "nativescript-theme-core": "~1.0.6", "nativescript-ui-calendar": "^5.0.0", "nativescript-ui-chart": "^6.0.0", "reflect-metadata": "~0.1.12", "rxjs": "~6.5.0", "tns-core-modules": "~6.0.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular/compiler-cli": "~8.0.0", "@ngtools/webpack": "~8.0.0", "@types/lodash": "^4.14.136", "nativescript-dev-webpack": "^1.0.2", "typescript": "~3.4.0" },

@ViewChild("myCalendar", {static: false}) _calendar:any; sendCalendarRange(){ const range = this ._calendar .calendar .selectedDateRange as calendarModule.DateRange; console.log(range) // undefined }

ahmed-shahrour commented 4 years ago

This is also happening with Android...... getSelectionManager is an undefined error even though I specified the date range using the DateRange class and in it a start date and an end date.

tsonevn commented 4 years ago

Hi all, I tested the described issue with our sample project, however, was unable to recreate the issue. Can you send us a sample project that can be used for recreating the problem?

ahmed-shahrour commented 4 years ago

Hey @tsonevn, thank you for replying, here you go:

Platform

Android

What should happen

Once I click the button, in Home.vue, the <RadCalendar /> component, in CalendarRange.vue, should display the selected date range passed as props from Home.vue.

What's currently happening?

Once I press the button in Home.vue the app crashes. I suspect there's a bug in setting selectedDateRange in the mounted() hook.

Error Stack

An uncaught Exception occurred on "main" thread.
Calling js method onCreateView failed
TypeError: Cannot read property 'getSelectionManager' of undefined

StackTrace:

CalendarOnSelectedDatesChangedListenerImpl.onSelectedDatesChanged(file:///data/data/com./files/app/vendor.js:43456:42)
    at RadCalendar.setNativeSelectedDateRange(file:///data/data/_APPID_/files/app/vendor.js:43934:24)
    at RadCalendar.createNativeView(file:///data/data/_APPID_/files/app/vendor.js:43538:10)
    at ViewBase._setupUI(file:///data/data/_APPID_/files/app/vendor.js:93312:25)
    at (file:///data/data/_APPID_/files/app/vendor.js:93367:13)
    at LayoutBaseCommon.eachChildView(file:///data/data/_APPID_/files/app/vendor.js:104529:20)
    at ViewCommon.eachChild(file:///data/data/_APPID_/files/app/vendor.js:94851:10)
    at ViewBase._setupUI(file:///data/data/_APPID_/files/app/vendor.js:93366:10)
    at (file:///data/data/_APPID_/files/app/vendor.js:93367:13)
    at ContentView.eachChildView(file:///data/data/_APPID_/files/app/vendor.js:90497:7)
    at PageBase.eachChildView(file:///data/data/_APPID_/files/app/vendor.js:105996:36)
    at ViewCommon.eachChild(file:///data/data/_APPID_/files/app/vendor.js:94851:10)
    at ViewBase._setupUI(file:///data/data/_APPID_/files/app/vendor.js:93366:10)
    at ViewBase._addViewCore(file:///data/data/_APPID_/files/app/vendor.js:93237:12)
    at ViewBase._addView(file:///data/data/_APPID_/files/app/vendor.js:93220:10)
    at FragmentCallbacksImplementation.onCreateView(file:///data/data/_APPID_/files/app/vendor.js:100800:13)
    at FragmentClass.onCreateView(file:///data/data/_APPID_/files/app/vendor.js:98244:34)
    at com.tns.Runtime.callJSMethodNative(Native Method)
    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1209)
    at com.tns.Runtime.callJSMethodImpl(Runtime.java:1096)
    at com.tns.Runtime.callJSMethod(Runtime.java:1083)
    at com.tns.Runtime.callJSMethod(Runtime.java:1063)
    at com.tns.Runtime.callJSMethod(Runtime.java:1055)
    at com.tns.FragmentClass.onCreateView(FragmentClass.java:53)
    at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2612)
    at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:874)
    at androidx.fragment.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManagerImpl.java:1228)
    at androidx.fragment.app.FragmentManagerImpl.moveToState(FragmentManagerImpl.java:1293)
    at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:439)
    at androidx.fragment.app.FragmentManagerImpl.executeOps(FragmentManagerImpl.java:2066)
    at androidx.fragment.app.FragmentManagerImpl.executeOpsTogether(FragmentManagerImpl.java:1856)
    at androidx.fragment.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManagerImpl.java:1811)
    at androidx.fragment.app.FragmentManagerImpl.execPendingActions(FragmentManagerImpl.java:1717)
    at androidx.fragment.app.FragmentManagerImpl$2.run(FragmentManagerImpl.java:150)
    at android.os.Handler.handleCallback(Handler.java:883)
    at android.os.Handler.dispatchMessage(Handler.java:100)
    at android.os.Looper.loop(Looper.java:214)
    at android.app.ActivityThread.main(ActivityThread.java:7356)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)

The Code

Home.vue

<template>
    <Page class="page">
        <ActionBar title="Calendar Range Bug" class="action-bar" />
        <ScrollView>
            <StackLayout class="home-panel">
                <Label text="Start Date" :style="{ 'font-wieght': 'bold' }" class="h1" />
                <Label :text="dates.startDate" textWrap="true" class="h2" />
                <StackLayout :style="{ 'height': '30'  }" />
                <Label text="End Date" :style="{ 'font-wieght': 'bold' }" class="h1" />
                <Label :text="dates.endDate" textWrap="true" class="h2" />
                <Button text="Open Modal" class="btn btn-primary" @tap="onCalendarSelect" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    import CalendarRange from "./CalendarRange";

    export default {
        components: {
            CalendarRange
        },
        data() {
            return {
                dates: {
                    startDate: new Date(),
                    endDate: new Date()
                }
            };
        },
        methods: {
            onCalendarSelect() {
                this.$showModal(CalendarRange, {
                    props: {
                        dates: {
                            startDate: this.dates.startDate,
                            endDate: this.dates.endDate
                        }
                    }
                }).then(selectedDates => {
                    this.dates.startDate = selectedDates.startDate;
                    this.dates.endDate = selectedDates.endDate;
                });
            }
        }
    };
</script>

<style scoped>
    .home-panel {
        vertical-align: center;
        font-size: 20;
        margin: 15;
    }
</style>

CalendarRange.vue

<template>
    <Frame>
        <Page>
            <ActionBar title="Pick the Range">
                <ActionItem @tap="onSave" ios.systemIcon="3" ios.position="right"
                    android.systemIcon="ic_menu_save" />
                <ActionItem @tap="onCancel" ios.systemIcon="1" ios.position="left"
                    android.systemIcon="ic_menu_close_clear_cancel"
                    android.position="actionBar" />
            </ActionBar>
            <RadCalendar ref="calendar" selectionMode="Range" transitionMode="Slide"
                viewMode="Month" />
            <Label text="hello World!" />
        </Page>
    </Frame>

</template>

<script>
    import {
        DateRange
    } from "nativescript-ui-calendar";

    export default {
        props: {
            dates: {
                type: Object,
                required: true
            }
        },
        mounted() {
            this.$refs.calendar.nativeView.selectedDateRange = new DateRange(
                this.dates.startDate,
                this.dates.endDate
            );
        },
        methods: {
            onCancel() {
                this.$modal.close();
            },
            onSave() {
                this.$modal.close({
                    startDate: this.$refs.calendar.nativeView.selectedDateRange
                        .startDate,
                    endDate: this.$refs.calendar.nativeView.selectedDateRange
                        .endDate
                });
            }
        }
    };
</script>

Package Versions

CLI: 6.1.0
Cross-platform modules: ^6.1.1
Runtime(s): both tns-ios and tns-android are 6.1.1
nativescript-ui-calendar: ^5.0.0

ahmed-shahrour commented 4 years ago

@tsonevn Hey man, any status on this?

tsonevn commented 4 years ago

Hi @ahmadshahrour951, Excuse me for the delay in reply. I tested the described case in a sample {N} Vue project while reusing some part of the code attached above. However, I am still unable to recreate the issue. I am attaching the project. You can review it and make the needed changes, which will help us to recreate the problem. Archive.zip

daweedm commented 4 years ago

@ahmadshahrour951 same issue here, did you find a solution ?

ProgressNS / nativescript-ui-feedback