Fuse is just amazing! Knowing that fuse does not provide datepicker componenet at the moment, I would like some assistance in designing a date picker as seen on the image attached.
If i can get a sample code for picking the month by scrolling and putting the month selected in between the lines would really appreciate. This would really mean alot to me in regards to datepicker and am very sure to other fuse members.
Thanks in advance.
Hi!
You could probably do this using three PageControls where each page is a day/month/year.
Something like:
<Grid ColumnCount="3">
<PageControl> ... days (generate with javascript) ... </PageControl>
<PageControl> ... months (generate with javascript) ... </PageControl>
<PageControl> ... years (generate with javascript) ... </PageControl>
</Grid>
Then add custom and to the pages.
Hi @Kristian,
I appreciate your response but unfortunately its not clear enough. Can you show us on how to generate with javascript for instance the days? Thank you.
<Grid ColumnCount="3">
<PageControl Orientation="Vertical">
<Text Value="1" />
<Text Value="2" />
<Text Value="3" />
...
</PageControl>
<PageControl Orientation="Vertical">
<Text Value="Jan" />
<Text Value="Feb" />
<Text Value="Mar" />
...
</PageControl>
<PageControl Orientation="Vertical">
<Text Value="1990" />
<Text Value="1991" />
<Text Value="1992" />
...
</PageControl>
</Grid>
Here’s an example:
<Grid Dock="Top" ColumnCount="3" Height="50">
<PageControl Orientation="Vertical">
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="1" Alignment="Center" />
</Rectangle>
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="2" Alignment="Center" />
</Rectangle>
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="3" Alignment="Center" />
</Rectangle>
</PageControl>
<PageControl Orientation="Vertical">
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="Jan" Alignment="Center" />
</Rectangle>
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="Feb" Alignment="Center" />
</Rectangle>
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="Mar" Alignment="Center" />
</Rectangle>
</PageControl>
<PageControl Orientation="Vertical">
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="1990" Alignment="Center" />
</Rectangle>
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="1991" Alignment="Center" />
</Rectangle>
<Rectangle Fill="#ddd">
<Stroke Width="2" Brush="#aaa" />
<Text Value="1992" Alignment="Center" />
</Rectangle>
</PageControl>
</Grid>
@Edwin Thanks alot. This is what exactly what I was looking for. I really appreciate.
@hassanaire,
Were you able to get this scrolling with position control in the center the way you indicated?. I’m not able to identify/take control of the central element after scrolling. Thanks in advance for any help.
Hi there!
I created Time picker in similar fashion by combining few fuse samples 
. Main idea comes from this post and from swipe gesture sample.
Leaving code snippet here as I stumbled on this post by searching for custom date / time pickers. Github with gif demo
<App>
<JavaScript>
var Observable = require('FuseJS/Observable');
var hours = Observable();
var minutes = Observable();
function formatTime(time) {
if (time < 10) {
return "0" + time;
}
return time;
};
function Minute(minute) {
this.caption = minute;
this.type = "minute";
};
function Hour(hour) {
this.caption = hour;
this.type = "hour";
}
function setupHours() {
var hourBucket = [];
for (var i = 0; i < 24; i++) {
hourBucket.push(new Hour(formatTime(i)));
}
hours.replaceAll(hourBucket);
}
function setupMinutes() {
var minuteBucket = [];
for (var i = -5; i < 55; i += 5) {
minuteBucket.push(new Minute(formatTime(i + 5)));
}
minutes.replaceAll(minuteBucket);
}
function activated(args) {
//args.data.type == hour or minute
//args.data.caption == value selected
console.log(JSON.stringify(args));
}
setupHours();
setupMinutes();
module.exports = {
hours: hours,
minutes: minutes,
activated:activated,
};
</JavaScript>
<Panel ux:Class="ClockCard" Opacity="0.4" Width="75">
<string ux:Property="Caption" />
<Scaling ux:Name="pageScaling" Factor="0.95" />
<ActivatingAnimation>
<Change this.Opacity="1" Duration="0.5" />
<Change pageScaling.Factor="1" Duration="0.5" />
</ActivatingAnimation>
<EnteringAnimation Scale="0.5">
<Move Y="-1" RelativeTo="ParentSize" Duration="0.5" />
</EnteringAnimation>
<ExitingAnimation Scale="0.5">
<Move Y="1" RelativeTo="ParentSize" Duration="0.5" />
</ExitingAnimation>
<Panel Width="95%" Height="60%" Background="#E1FFB9" Alignment="Center">
<Text Value="{ReadProperty Caption}" Alignment="Center" />
</Panel>
</Panel>
<StackPanel Orientation="Horizontal" Height="60" Width="150">
<PageControl ActiveIndex="18" Orientation="Vertical" InactiveState="Unchanged" Transition="None">
<Each Items="{hours}">
<ClockCard Activated="{activated}" Caption="{caption}" />
</Each>
</PageControl>
<Text Value=":" FontSize="20" Alignment="Center"/>
<PageControl ActiveIndex="6" Orientation="Vertical" InactiveState="Unchanged" Transition="None">
<Each Items="{minutes}">
<ClockCard Activated="{activated}" Caption="{caption}"/>
</Each>
</PageControl>
</StackPanel>
</App>