Convert System.Globalization.DateTimeFormatInfo short date format to Windows.Globalization.DateTimeFormatting.DateTimeFormatter

Question

I am using a CalendarDatePicker control in UWP. The format of the date should be localized to the user's chosen culture, which is not necessarily the same as the OS language settings. I want the date format to appear the same as myCultureInfo.DateTimeFormat.ShortDatePattern (e.g. mm/dd/yyyy). The CalendarDatePicker exposes a DateFormat property which is expected to be in a format like {month.integer}‎/‎{day.integer}‎/‎{year.full}. I need a converter for the XAML binding. It seems like there should be a simple way to do this.

<!-- In XAML -->
<CalendarDatePicker
    FirstDayOfWeek="{x:Bind ViewModel.CalendarFirstDayOfWeek, Mode=OneTime, Converter={StaticResource SystemDayOfWeekToWindowsDayOfWeekConverter}}"
    DateFormat="{x:Bind ViewModel.DateFormat, Mode=OneWay, Converter={StaticResource DateTimeFormatToDateTimeFormatterTemplateConverter}"
    Date="{x:Bind ViewModel.Date, Mode=TwoWay, Converter={StaticResource DateTimeToDateTimeOffsetConverter}}"/>

//Converter
public class DateTimeFormatToDateTimeFormatterTemplateConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        //What goes here?
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Edit: Ideally the CalendarDatePicker would just have a CultureInfo property that would take care of all of this. I tried the Language property but it had no noticeable effect.

You need to convert it by yourself. When you get the **ShortDatePattern** value, you can convert the CalendarDatePicker's DateTimeFormatter according to the value, such as the `ShortDatePattern="M/d/yyyy"` then you specify the `DateFormat="shortdate"`. — Breeze Liu - MSFT, Aug 31 '18 at 06:13
@BreezeLiu-MSFT can you please clarify with a code sample? The CalendarDatePicker's DateTimeFormatter is not publicly exposed, so I cannot set the ShortDatePattern on it. It looks like all I have access to is the DateFormat property, which is then passed to the DateTimeFormatter constructor. I also tried something like this: Language="en-UK" DateFormat="shortdate", but it did not work. — J Nelson, Aug 31 '18 at 11:32
Correction: "en-UK" is not a valid language code. It works if I use a valid language code AND explicitly set the date format (e.g. "en-GB") AND bind the first day of the week. However, all of this still does not localize the names of the months in the calendar flyout. — J Nelson, Sep 04 '18 at 11:32

score 1 · Answer 1 · answered Sep 03 '18 at 04:11

Yes, you set the CalendarDatePicker's DateTimeFormatter by use the CalendarDatePicker's DateFormat Property which tells the DateTimeFormatter how to format the value by providing a string that is either a format template or a format pattern. The Language property is for getting or setting localization/globalization language information that applies to the CalendarDatePicker.

Different Language with shortdate DateFormat Property maybe also have differnt date format. You can just see the different with the language en-US and fr-FR.

<StackPanel>
    <CalendarDatePicker Language="en-US" DateFormat="shortdate"/>
    <CalendarDatePicker Language="fr-FR" DateFormat="shortdate"/>
</StackPanel>

So you maybe need to use the CultureInfo Class to get the current culture.

For the DateFormat convertion, you can get all the ShortTimePattern from your device settings app: Settings=> Time & Language=> Data& time => Change date and time formats, in the Short date part, you can see all the format there. Then you can return corresponding DateFormat string according to the ShortTimePattern. Here are some code sample:

var shortDataPattern = CultureInfo.CurrentCulture.DateTimeFormat.ShortTimePattern;
Debug.WriteLine(shortDataPattern);
        switch (shortDataPattern)
        {
            case "M/d/yyyy":
                // return "shortdate" or the following
                return "{}{month.integer}‎/‎{day.integer}‎/‎{year.full}";
            case "M/d/yy":
                return ...
            ...//Other format
        }

Thank you. I really want to avoid writing a switch statement for every possible date format. I discovered it will localize the date format if I set both the Language AND the DateFormat properties. I did not expect to have to explicitly set the DateFormat. However, now the issue is the month names are not localized when I set the Language property. Any suggestions there? — J Nelson, Sep 04 '18 at 11:56

score 0 · Answer 2 · answered Sep 04 '18 at 13:04

For anyone who ventures here, this will at least localize the date format and the first day of the week, but it does not localize the names of the months:

<CalendarDatePicker
    Language="{x:Bind ViewModel.CalendarLanguageCode, Mode=OneWay}"
    FirstDayOfWeek="{x:Bind ViewModel.CalendarFirstDayOfWeek, Mode=OneTime, Converter={StaticResource SystemDayOfWeekToWindowsDayOfWeekConverter}}"
    DateFormat="shortdate"
    Date="{x:Bind ViewModel.Date, Mode=TwoWay}"/>

(The implementation of SystemDayOfWeekToWindowsDayOfWeekConverter is a trivial conversion from System.DayOfWeek to Windows.Globalization.DayOfWeek)

Convert System.Globalization.DateTimeFormatInfo short date format to Windows.Globalization.DateTimeFormatting.DateTimeFormatter

2 Answers2