Custom made Picker not really working well..

How-to Discussions
1

Hi.
I have made a custom picker view for date picker, which selects year and month using page control.
I can choose the year and month that I want but the initial setting for the picker is changing after I set to the date that I want.
For example,
I have set the initial data of year as current year, 2018 and month as current month, 1. but The setting in the my picker view shows 2018, 01 for 2 seconds and it changes to 2010, (first value of values that I have put in years) this keeps happening.

This is my picker source

<Panel ux:Class="MyPicker" ux:AutoBind="false">
	<object ux:Property="Data" />
	<string ux:Property="Selected" />

	<JavaScript>
		var srcData = this.Data.inner();

		var datas = srcData.map(function(data) {
			return {
				data: data,
				name: data
			}
		});
		
		module.exports = {
			datas
		};
	</JavaScript>

	<Panel ux:InnerClass="SpinnerPanel" ux:Name="spinnerPanel" Width="100%"  Alignment="Center">
		<Selectable Value="{data}" />
		<EnteringAnimation Scale="0.25">
			<Move RelativeTo="Size" KeyframeInterpolation="CatmullRom">
				<Keyframe Y="-1.5" Time="0.25" />
				<Keyframe Y="-2.3" Time="0.5" />
				<Keyframe Y="-2.9" Time="0.75" />
				<Keyframe Y="-4.5" Time="1" />
			</Move>

			<Change spinnerPanel.Opacity="0" Duration="0.75" Easing="QuadraticInOut" />
			<Change label.TextColor="#FFF" Duration="0.2" Easing="QuadraticInOut" />
			<Change label.FontSize="20" Duration="0.2" Easing="Linear" />
			<Scale Factor="0.1" Duration="1" />
		</EnteringAnimation>
		<ExitingAnimation Scale="0.25">
			<Move RelativeTo="Size" KeyframeInterpolation="CatmullRom">
				<Keyframe Y="1.5" Time="0.25" />
				<Keyframe Y="2.3" Time="0.5" />
				<Keyframe Y="2.9" Time="0.75" />
				<Keyframe Y="4.5" Time="1" />
			</Move>
			<Change spinnerPanel.Opacity="0" Duration="0.75" Easing="QuadraticInOut" />
			<Change label.TextColor="#FFF" Duration="0.2" Easing="QuadraticInOut" />
			<Change label.FontSize="20" Duration="0.2" Easing="Linear" />
			<Scale Factor="0.1" Duration="1" />
		</ExitingAnimation>

		<Text ux:Name="label" Alignment="Center" TextTruncation="None" Value="{data}" FontSize="{margin}*2" />
		<Panel Width="100%" Height="120%" />

		<WhileActive>
			<ToggleSelection />
		</WhileActive>
	</Panel>

	<!-- <Panel Height="100%" Color="#ddd">
		<PageControl Width="50%" Orientation="Vertical" InactiveState="Unchanged" Transition="None" Active="{Property Selected}" >
			<Selection Value="{Property Selected}" MaxCount="1" MinCount="1" />
			<Each Items="{datas}" Defer="Deferred">
				<SpinnerPanel Name="{name}" />
			</Each>
		</PageControl>
	</Panel> -->
	<Panel Height="100%" Color="#ddd">
		<PageControl Width="50%" Orientation="Vertical" InactiveState="Unchanged" Transition="None" Active="StartDatePage">
			<Page HitTestMode="LocalBoundsAndChildren" ClipToBounds="true" Name="StartDatePage">
				<Panel Width="100%" Height="100%" Alignment="TopCenter">
					<LinearNavigation Active="{Property Selected}" />
					<SwipeNavigate ForwardDirection="Down" MaxPages="20" />
					<Selection Value="{Property Selected}" MaxCount="1" MinCount="1" />
					<Each Items="{datas}" Defer="Deferred">
						<SpinnerPanel Name="{name}" />
					</Each>
				</Panel>
			</Page>
		</PageControl>
	</Panel>
</Panel>

And this is how I set the data for the picker view (I put this under WhileActive tag for the page that I want to use the picker view )

var year = Observable(2017);
var years = Observable();
for (var i = 0 ; i < 30 ; i++) {
	years.add(2002+i);
}
var month = Observable(11);
var months = Observable();
for (var i = 0 ; i < 12 ; i++) {
	months.add(1+i);
}


var currentTime = new Date()
var tempYear = currentTime.getFullYear();
	// console.log("date : " + typeof(tempYear));

	var monthTemp = currentTime.getMonth() + 1;

	console.log("month : " + month);


	console.log("20180116 tempYear : " +tempYear);
	console.log("20180116 monthTemp : " +monthTemp);

	year.value = tempYear;
	month.value = monthTemp;

The error message is like this

Error: InternalError: Can not navigate to 'StartDatePage', not found! in Fuse.Controls.PageControl</usr/local/share/uno/Packages/Fuse.Controls.Navigation/1.4.2/PageControl.uno:181>

Error: Error: Attempting to navigate to element with different parent in MyPicker.SpinnerPanel, Name: 전체</usr/local/share/uno/Packages/Fuse.Navigation/1.4.2/StructuredNavigation.uno:117>

Can you help with this?
Thank you

2

Please post a complete reproduction that we could copy-paste and run, otherwise it’s impossible to help.

The error you get likely originates from the fact that in your datas variable (which we don’t know how it looks), there isn’t an item with a property name, the value of which should be StartDatePage, which is what the Active property on LinearNavigation refers to.