Html5 Input Type Date Format to Mm/Dd/Yyyy Causing Issue in Chrome

html5 input type date format to mm/dd/yyyy causing issue in chrome

the quickest solution is to change

type="date"

to

type="text"

HTML5 input type date formatting

The short answer is that its not currently possible to do format the date (there is no format attribute available).

However, you probably want a solution, so here are some options that you might want to try

1) Use an <input type='text'> for display, and have a hidden <input type='date'> for when the user tries to open the date-picker (it might not be easy to open the native date picker programmatically), and have JavaScript put the date from the date-picker into the input type text

2) Just use a library with a customizable date picker like the Angular Material DatePicker with the setLocale method

How does Chrome determine the input[type=date] format?

Turned out it was because my macOS had its region set to Singapore, despite primary language set to English (US). After I updated the Region to be United States the date in the input changed to mm/dd/yyyy. I suppose this means Chrome picks up the system region for locale and it takes priority over the language settings. Funny that Chrome only does this for date input formatting but not for its implementation of toLocaleDateString – perhaps two different teams for DOM vs javascript implementation. Anyway, leaving this here in case it may help someone else.

macos language & regions setting

How to make input type=date supported on all browsers? Any alternatives?

Any browser that does not support the input type date will default to the standard type, which is text, so all you have to do is check the type property (not the attribute), if it's not date, the date input is not supported by the browser, and you add your own datepicker:

if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}

FIDDLE

You can of course use any datepicker you want, jQuery UI's datepicker is probably the one most commonly used, but it does add quite a bit of javascript if you're not using the UI library for anything else, but there are hundreds of alternative datepickers to choose from.

The type attribute never changes, the browser will only fall back to the default text type for the property, so one has to check the property.

The attribute can still be used as a selector, as in the example above.

How to validate HTML5 date format

I think the best way to validate HTML5 date format is to leave the job to the datepicker if one is available.

For instance, the native datepicker of chrome or ios5 does not allow wrong user date input. In chrome it even checks if the date does exists in a human calendar.

If the browser does not have native datepicker (like firefox), then this should be detected with Modernizer and one should use the jQuery UI datepicker. Here is a nice article that explains how to do this.
Unfortunately, the jQuery datepicker does not check if the input is valid.
However, one can set the dateType and constrainInput, but they dont check if the date actually exists, just if the syntax is correct. Note that the jquery validation plugin has troubles with the date attribut.

Date input not working in firefox

Unfortunately <input type="date"/> is not supported in firefox. To be able to use date type in all browser you can check using modernizer and if not supported you can fall back to use javascript to show the datepickerr.

<script>
$(function(){
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({
dateFormat : 'yy-mm-dd'
}
);
}
});
</script>

The specified value does not conform to the required format yyyy-MM-dd

The specifications for the HTML5 date picker state that the date must be in the format yyyy-MM-dd (ISO format). This means that you DisplayFormatAttribute must be

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public string MyDate { get; set; }

Alternatively you can manually add the format using

@Html.TextBoxFor(m => m.MyDate, "{0:yyyy-MM-dd}", new { @type = "date"  })

The later option allows you to keep the DataFormatString = "{0:dd/MM/yyyy}") for usage in @Html.DisplayFor()

Chrome type=date and jquery ui date picker clashing

I handled in a tricky way, i have my date field as type="text" and i have added an attribute as data-type="date"

In jquery, i am running a code to dynamically replace type="text & data-type="date" to type="date", so the browser doesn't make it a date field on load but my jquery ui datepicker is called as i am dynamically adding it as type="date"... :)

Hope it is helpful to someone..

Disable native datepicker in Google Chrome

To hide the arrow:

input::-webkit-calendar-picker-indicator{
display: none;
}

And to hide the prompt:

input[type="date"]::-webkit-input-placeholder{ 
visibility: hidden !important;
}

Not showing placeholder for input type=date field

It may not be appropriate... but it helped me.