Bootstrap DateTimePicker format

Question

I am coding a MVC 5 internet application and am using the bootstrap-datetimepicker in a view.

My application is being used internationally and I would like to format the datetimepicker to have the correct format for each user. I have the culture and the timezone for each user, how is the best way to format the datetimepicker to the correct user's format? Should I use the format property, locales, or a different technique?

I am currently getting the DateTimeFormat object from a Culture object. This has the following values:

ShortDatePattern

ShortTimePattern

I am then trying to set the datetimepicker as follows:

$(function () {
    $('#displayMapLocationStartDate').datetimepicker(
    {
        format: '**combination of culture object**',
    });
});

Is this the best way to write the code for the datetimepicker to be in the correct format for each different user's culture? If not, how should this be done?

Thanks in advance.

Answer 1

The Bootstrap datetimepicker internally uses Moment.js for formatting, and Moment's formatting codes differ to .NET's. For example, .NET uses dd for day of month with leading digit (01...31), but Moment uses DD for the same thing. So the code you posted above will not work as intended.

You will need to write a translation method that takes in a .NET date/time format string and spits out a Moment-compatible version, which you can then use when setting the datetimepicker.format property.

Answer 2

If you look at the Momentjs docs , you'll see that they provide locale aware format tokens L (date) and LT (time).

Both of these tokens are accepted strings to the pickers format setting.

As long as you include the moment-with-locales.js or moment.js with the proper locale file, you can use either token to do what you want.

$('#displayMapLocationStartDate').datetimepicker(
{
    format: 'L',
});