WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:






Lifetime Member:

Windows 8.1 DatePickers




I made reference in a post that I might wait to install Windows 8.1, but I caved... I Installed 8.1 onto my SurfacePro and it went on like socks... no problems. I also installed Visual Studio 2013 preview, and it's been up and running just fine. So I'd say go for it... and least if it tanks, I can have someone to commiserate with :)

At //BUILD 3 last week, Tim Heuer gave a great presentation on What's New in XAML... and you should go watch that!

I decided I'd take a trip through the new stuff bit-by-bit and show how they look, rat around with it a little to see if there are any obvious subtleties... that sort of thing.

So... first up, is as in Tim's presentation...


Date Pickers

You want date pickers... boy we got 'em... 10 variations on the theme to be exact.

My first thought was to line all of them up and see how they work, plus how they work different from each other. I have "DateChanged" set on each of them that, in the codebehind updates a string value that's bound to a TextBlock on the page in case I was confused as to what I was expecting to see, or was seeing.

I set all of them to be the "Gregorian Calendar". I'm not sure I'd know how to read another, but you have a selection: Gregorian, Hebrew, Hijri, Japanese, Julian, Korean, Taiwan, Thai, and UmAlQura.


The XAML

First off the XAML... I have to admit... I'm pretty certain I won't be hammering in the "DayFormat" parameters off the top of my head.. they're a little complex unless you're going to be using them a lot.

I'm only showing the parts that matter for this example. I'll have the project cleaned and zipped for download at the bottom.


<DatePicker x:Name="dpDI2"
Header="{}{day.integer(1)}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{day.integer(2)}"
DateChanged="dpDI2_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDI"
Header="{}{day.integer}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{day.integer}"
DateChanged="dpDI_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDIDOWA"
Header="{}{day.integer} {dayofweek.abbreviated}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{day.integer} {dayofweek.abbreviated}"
DateChanged="dpDIDOWA_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDIDOWF"
Header="{}{day.integer} {dayofweek.full}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{day.integer} {dayofweek.full}"
DateChanged="dpDIDOWF_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDOWA3"
Header="{}{dayofweek.abbreviated(3)}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{dayofweek.abbreviated(3)}"
DateChanged="dpDOWA3_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDOWA"
Header="{}{dayofweek.abbreviated}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{dayofweek.abbreviated}"
DateChanged="dpDOWA_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDOWF"
Header="{}{dayofweek.full}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{dayofweek.full}"
DateChanged="dpDOWF_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDOWSA2"
Header="{}{dayofweek.solo.abbreviated(2)}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{dayofweek.solo.abbreviated(2)}"
DateChanged="dpDOWSA2_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDOWSA"
Header="{}{dayofweek.solo.abbreviated}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{dayofweek.solo.abbreviated}"
DateChanged="dpDOWSA_DateChanged"
Margin="0,0,0,10" />
<DatePicker x:Name="dpDOWSF"
Header="{}{dayofweek.solo.full}"
CalendarIdentifier="GregorianCalendar"
DayFormat="{}{dayofweek.solo.full}"
Margin="0,0,0,10"
Date="{Binding SelectedDate, Mode=TwoWay}"
DateChanged="dpDOWSF_DateChanged" />
<TextBlock Text="{Binding DisplayText}"
FontSize="16"
HorizontalAlignment="Left"
Foreground="White"
Margin="0,10,0,0"
Width="150"
Height="30" />


Each of those DataPickers is essentially the same except for the DateChanged, which cycles through all the possibilities. I set the Header to be the DateChanged value so the display would make it easy to reference.

To cut to the chase, these pickers are much like those on WP8, and the variations have to do with how the 'day' portion is selected. The Controls come up initialized to today's date, and the Month, Date, and Year scrollers scroll up and down as you'd expect.

The Month, Day, and Year controls can each individually be set not visible. Setting the Month not visible didn't have any change on the Date value reported by the control, however.

There are also settings for min and max year, in case your business logic needs to avoid problems like that

As you can see from the screenshot below, all of mine came up "Month Day Year". I assumed that was because my date formatting was set to US English. I went to the control panel and set my date formatting to be German (Germany), to get it in day/month/year format, and my taskbar date did change, but when I ran the app, the dates still came out Month Day Year. I'm not sure what that means... since I really didn't change to an alternate language, possibly that's what is going on.


The Output


Here's what the output looks like... I obviously just cut the portion out that had controls on it:



I'll make at least a comment or two on each, top down:


{day.integer{2}}

This one has the day displayed as an integer. The {2} can be changed in the format to be 3, but since no month has more than 99 days, it's sort of a waste :), but this one does put leading zeros on the single digits.


{day.integer}

I tried to set the first one to be integer{1} to get this effect, and it didn't do anything, although it didn't complain either :) ... this one works the same as the first except there are no leading zeros on the single digits.


{day.integer}{dayofweek.abbreviated}

This one is like the integer one just above, only it also shows the day of the week in abbreviated form. I have a screenshot of this below.


{day.integer}{dayofweek.full}

Very obviously like the one above with full weekdays spelled out. I have a screenshot of this one below.


{dayofweek.abbreviated{3}}

This one displays no digits, just the day of week, and again, can be set to something other than 2 characters. The day here has no digits, but it has all the weekdays for the month... I'm confused about a use case for this set, but there's lots of things that confuse me.


{dayofweek.abbreviated}

Again no digits, and the standard abbreviation instead of one driven by a parameter.


{dayofweek.full}

Another obvious one... the full weekday listed for the entire month.


{dayofweek.solo.abbreviated{2}}

I'm hoping someone can clue me in on the "solo" ones, because I'm confused. I open them and they appear to be identical to the "dayofweek" ones above.

This one I changed to "2" and as you can see, it trimmed "Tuesday" down to "Tu".


{dayofweek.solo.abbreviated}

The normal abbreviation form for this style.


{dayofweek.solo.full}

And last but not least, full.

The data at the bottom is simply the output from any one of the controls printed as a sanity check for me.


A couple more screenshots


As promised above, I took a couple screenshots of the 'day' value opened. This first one was for "day.integer" opened and scrolled to the transition from single to double digits:



And this last one is "dayofweek.full" showing how the days repeat through the month:




Some things to remember


This is pretty early beta... so things are going to change. I'm just trying to get ahead of the curve here and play with what we have available. I'm open to comments, suggestions, attitude adjustments, cash incentives, etc.

Next time we'll continue with what... time pickers... yeah that's it.

oh... one more thing Here is the project for this post, and...

Stay in the Light!

Copyright © 2006-2017, WynApse