exporting a native datePicker and accessing it on different pages

How-to Discussions
1

Hi,

I am working with a <Native.Datepicker> in a <NativeViewHost>. At the moment I want to use the picker as a component that I can reuse on several pages. But working with NativeViewHost is not that easy as I have to trigger the visibilities properly, to display or hide my picker.
What I have here is the

DatePicker.ux:

<Panel ux:Class="DatePicker" ux:Name="datePicker" Height="100%" Width="100%" HitTestMode="LocalVisual" Background="#fff7" >
	<JavaScript File="DatePicker.js"/>

	<Panel ux:Name="dialogPanel" Background="#727272" Alignment="Center" Width="90%" >

		<Rectangle CornerRadius="5">
			<Stroke Width="1" Color="#000" />

			<StackPanel ItemSpacing="10">

				<Panel>
					<NativeViewHost ux:Name="nvhDatePicker" >
						<Native.DatePicker ux:Name="nativeDatePicker" />
					</NativeViewHost>
				</Panel>

			</StackPanel>

		</Rectangle>
	</Panel>

</Panel>

as well as the DatePicker.js:

var Observable = require("FuseJS/Observable");
var visibility = Observable("Collapsed");

var today = new Date();
var date = { year: today.getFullYear(), month: today.getMonth()+1, day: today.getDate() };
var maxDate = { year: today.getFullYear() + 1, month: today.getMonth(), day: today.getDate() };

nativeDatePicker.setMinDate(date);
nativeDatePicker.setDate(date);
nativeDatePicker.setMaxDate(maxDate);

var pickedDate;

nativeDatePicker.CurrentDate.addSubscriber(function () {
	pickedDate = nativeDatePicker.CurrentDate.value;
	console.log(JSON.stringify(pickedDate));
});

function showDatePicker(){
	visibility.value = "Visible";
}

function hideDatePicker(){
	visibility.value = "Collapsed";
}


module.exports = {
	// Variables

	visibility: visibility,
	pickedDate: pickedDate,

	//Functions

	showDatePicker: showDatePicker,
	hideDatePicker: hideDatePicker

}

What I would like to do is to change the visibility of the picker on another page where I reference the component this way:
<DatePicker />

With something like this: <Button Clicked="{DatePicker.showDatePicker}" />

I just cannot figure out how to properly set the visibility for the component and how I can trigger the show/hide function.

Thank you very much!

2

Hi!

Make sure you separete your model (.js files in your :Bundle, which you requrie() where needed) and your view (.ux files and <JavaScript> tags).

Global states such as this visibility should be backed by observables in the model. Then simply require() the appropriate model module, re-export the observable and databind visibility to that observable.