Time picker can be forced to 24-hour mode?

[judgej]

trafficstars

Even though the locale for the time picker is determined by the end user's browsers, the standard for the organisation using an application I am writing, is the 24-hour time format. At the moment, en-GB and en-US, and I have no idea how many others, are formatting the times in 12-hour format with am/pm flags.

Is it possible to force the time format on the time picker, at least without changing the locale of the entire page?

I realise this is a "polyfill" library, and probably does not want to go into the world of additional functionality beyond HTML 5, but I remain optimistic :-)

[aFarkas]

If you pre-define webshims.formcfg.en/webshims.formcfg['en-US'] and webshims.formcfg['en-GB'] and include this in your JS, than this will be used instead of the included version.

[judgej]

I've not seen any time formats in any config files, so I'm really unclear where they are coming from. Also I'm not entirely sure what you are suggesting here. I need to set something, somewhere, and give it to something else? Sorry, that's just my lack of experience with this library.

[aFarkas]

Another example:

Create a file with this content:

webshims.validityMessages['en-CUSTOM'] = {
    "typeMismatch": {
        "defaultMessage": "Please enter a valid value.",
        "email": "Please enter an email address.",
        "url": "Please enter a URL."
    },
    "badInput": {
        "defaultMessage": "Please enter a valid value.",
        "number": "Please enter a number.",
        "date": "Please enter a date.",
        "time": "Please enter a time.",
        "range": "Invalid input.",
        "month": "Please enter a valid value.",
        "datetime-local": "Please enter a datetime."
    },
    "rangeUnderflow": {
        "defaultMessage": "Value must be greater than or equal to {%min}.",
        "date": "Value must be at or after {%min}.",
        "time": "Value must be at or after {%min}.",
        "datetime-local": "Value must be at or after {%min}.",
        "month": "Value must be at or after {%min}."
    },
    "rangeOverflow": {
        "defaultMessage": "Value must be less than or equal to {%max}.",
        "date": "Value must be at or before {%max}.",
        "time": "Value must be at or before {%max}.",
        "datetime-local": "Value must be at or before {%max}.",
        "month": "Value must be at or before {%max}."
    },
    "stepMismatch": "Invalid input.",
    "tooLong": "Please enter at most {%maxlength} character(s). You entered {%valueLen}.",
    "tooShort": "Please enter at least {%minlength} character(s). You entered {%valueLen}.",
    "patternMismatch": "Invalid input. {%title}",
    "valueMissing": {
        "defaultMessage": "Please fill out this field.",
        "checkbox": "Please check this box if you want to proceed.",
        "select": "Please select an option.",
        "radio": "Please select an option."
    }
};
webshims.formcfg['en-CUSTOM'] = {
    "numberFormat": {
        ".": ".",
        ",": ","
    },
    "numberSigns": ".",
    "dateSigns": "-",
    "timeSigns": ":. ",
    "dFormat": "-",
    "patterns": {
        "d": "yy-mm-dd"
    },
    "month": {
        "currentText": "This month"
    },
    "time": {
        "currentText": "Now"
    },
    "date": {
        "closeText": "Done",
        "clear": "Clear",
        "prevText": "Prev",
        "nextText": "Next",
        "currentText": "Today",
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        "monthNamesShort": [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec"
        ],
        "dayNames": [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
        ],
        "dayNamesShort": [
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat"
        ],
        "dayNamesMin": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "weekHeader": "Wk",
        "firstDay": 1,
        "isRTL": false,
        "showMonthAfterYear": false,
        "yearSuffix": ""
    }
};

Add it after your polyfiller.js. and then call:

webshim.activeLang('en-CUSTOM');

See also http://afarkas.github.io/webshim/demos/demos/forms.html#Locale-activeLang

[judgej]

What I have done is set the language to webshim.activeLang('en') if the current language (webshim.activeLang()) is en-US or en-GB. That language seems to use the 24-hour clock. What I don't want to do, is switch all users to English - they may not be English. I am still curious to know where the 12-hour clock is coming from, because I feel I'm missing something there. If it's in that example you have given here, I'm just not seeing it.

So does en-CUSTOM extend the en locale, or completely replace it? There seems to be a lot of settings in your en-CUSTOM above that I would have thought were already defined in the underlying en language.

Thank you.

[AubreyHewes]

The default en language defines a meridian value that if available is used for time display. So you get a 12 hour clock. See https://github.com/aFarkas/webshim/blob/1aaf98d0a071be379f47bc52b61c09f12166333f/src/shims/form-number-date-ui.js#L348-L350

To have 24 hour time you can set the meridian to a non truthy value:

// predefined formcfg.en forces 24 hour time display
webshim.formcfg.en = { meridian: false };

Hardcoded formcfg.en is extended/overridden with the predefined formcfg.en.

If using a custom language; the files' formcfg is used instead of the defaults (unless it extends a default itself).

So en-CUSTOM from the above example is its own standalone locale containing all the strings required. Therefore as it doesn't extend en it will not have a meridian value (unless you put it there) and it will have a 24 hour time display.