Change datePicker order

Question

Hi,

I want to change order in datePicker control. I use this control: http://msdn.microsoft.com/en-us/library/windows/apps/hh465480.aspx but can't find the way to change order of date, month, year in datePicker.
By default, the order in datePicker is month, date, year.
I want to change the order to date, month, year (Thai format). So how can I do that?

Thanks in advance and sorry for my bad English. :)

Answer 1

I thought the order might be based on the Region settings on the computer, but that doesn't seem to be the case.  It doesn't look like there is any easy way to change the order.  It might be possible to modify the HTML using javascript after the DatePicker is created, but this would be messy and I wouldn't recommend it.

---

Dave Paquette @Dave_Paquette www.davepaquette.com

Answer 2

Did you just need to change the order of the elements in the UI?

I just did a quick POC using CSS, I think you might be able to do something like this:

.win-datepicker { display: -ms-grid; -ms-grid-columns: auto auto auto }

.win-datepicker-date { -ms-grid-column: 1; }

.win-datepicker-month { -ms-grid-column: 2; }

.win-datepicker-year { -ms-grid-column: 3; }

Obviously you could use static pixel based column widths or add padding, etc for the look you want.

Answer 3

Yes skills0, I've already done some thing like that. But the problem with this method is when you 'tab' through the elements it'll select 'month' first then date, year so it look a bit strange (I wonder is it okay with the certificate that say the app must be fully support keyboard/mouse input?).

Answer 4

I remembered I had seen something in the docs.  You can set the calendar to "ThaiCalendar".

See this page, instruction #5.  Not sure how that affects things, but seems worth a shot.

http://msdn.microsoft.com/en-us/library/windows/apps/hh465480.aspx

Answer 5

Of course I've already done that. But the only thing that changed was it change the year to Buddhist calendar (Thai default). By the way, it doesn't change the layout to day-month-year.

Answer 6

Figures they would take the easiest way out possible and not change the UI at all.  Ugh.  I honestly don't know if they will ding you for tab order, but even if they don't it's not the best UX.

At this point I would probably just roll my own, can't be that hard.

If there is a jQuery control that works the way you want, you could also go that route.

Answer 7

I noticed that the Day, Month, and Year controls have a 'win-orderx' class on them.  Does anyone know if these are the classes that define the tab order?  If so, you might be able to change the classes on those elements to control the tab order.

---

Dave Paquette @Dave_Paquette www.davepaquette.com

Answer 8

Good catch. I finally found some deeply buried documentation that references those, but it doesn't explain much.

http://msdn.microsoft.com/en-us/library/windows/apps/br229736.aspx

the win-order classes exist in the built in UI CSS ui-light.css, ui-dark.css, but they don't seem to be doing anything special with layout or whatever.  You can override them, but that's not much different than using the grid layout approach.

Also not clear how you set the day to use win-order0 and month to use win-order1, to see if that affects the underlying javascript/tab order in some way.

Answer 9

Try this after calling WinJS.UI.ProcessAll();

                 for (var i = 0; i < monthPickers.length; i++) {
                     var monthPicker = monthPickers.item(i);
                     WinJS.Utilities.removeClass(monthPicker, "win-order0");
                     WinJS.Utilities.addClass(monthPicker, "win-order1");
                 }

                 var dayPickers = document.getElementsByClassName("win-datepicker-date");
                 for (var i = 0; i < dayPickers.length; i++) {
                     var dayPicker = dayPickers.item(i);
                     WinJS.Utilities.removeClass(dayPicker, "win-order1");
                     WinJS.Utilities.addClass(dayPicker, "win-order0");
                 }

---

Dave Paquette @Dave_Paquette www.davepaquette.com

Answer 10

Nope, Dave. The datePicker still month-day-year (But the class of win-datepicker-date, win-datepicker-month have changed). I wonder what those classes for?

Answer 11

Hi

It just changing the appearance of a DatePicker like msdn said.

It's hard to change the Tab order as my experience.

Because when a DataPicker has been create , in DOM tree Month select always on the top like this:

<select tabindex="0" class="win-datepicker-month win-order0" aria-label="Select Month">...</select>
</select>
<select tabindex="0" class="win-datepicker-date win-order1" aria-label="Select Day">...</select>
</select>
<select tabindex="0" class="win-datepicker-year win-order2" aria-label="Select Year">...</select>

I can't find anywhere allow you dynamic change this sequence in Date picker control, may be change the language setting will change this, and I suggest you use some jquery date picker.

And I will send a report to product team to make this control more customizable .

Thanks.

Answer 12

OK, guy. I've successful changing the date-month-year order and also Tab order by changing the default language of the app in package.appxmanifest file to th-TH. It seem like no other way to do it. Anyway, I'm please with this method.

Answer 13

Good to know, but I wonder what you would do if you needed to support regionalization (users in multiple countries/languages).  You can't change the default language without providing different versions for each region.  Still seems like there needs to be a way to do it on the calendar directly, but glad you figured out a solution.