exporting a native datePicker and accessing it on different pages


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


<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">

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




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() };


var pickedDate;

nativeDatePicker.CurrentDate.addSubscriber(function () {
	pickedDate = nativeDatePicker.CurrentDate.value;

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

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

module.exports = {
	// Variables

	visibility: visibility,
	pickedDate: pickedDate,


	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!


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.