CODEWITHSUNDEEP
jqueryasp.net-mvchtmljquery-uidatepicker
Andrus
Andrus

Reputation: 27931

How to use input type=date in all browsers

Date entry forms are created using 

<form method='post' action='saveform'>
Enter date
<input type='date' value='2014-03-26' name='datefield1'/>
</form>

Chrome shows localized date, allows to select and performs validation.

If date initial value is empty Safary Mac OS X and IE show empty field, does not allow to select and does not perform validation. User has no idea which date format to use.

How to fix this so that date entry works in IE and Safary. Most critical is empty date issue. For empty dates there should be date format indication to user (yyyy-mm-dd) so that user knows which date format is expected. Using localized date for entry, performing validation and allowing to select from calendar would be also nice.

Value sent to server on form post should preferably be in yyyy-mm-dd format always, if possible. In worst case controller can changed to accept different formats.

Using native input type='date' should be used if browser supports it since in chrome it looks much better than jquery-ui date picker.

jquery, jquery ui, ASP .NET MVC4, Mono are used.

Is it possible to add some simple code or javascript which emulates input type='date' in unsupported browsers? How to dedect if input type='date' is supported in browser ?

Upvotes: 1

Views: 1144

Answers (2)

card_master
card_master

Reputation: 418

To answer your first question

Is it possible to add some simple code or javascript which emulates input type='date' in unsupported browsers?

There are plenty of jquery datepicker library available, you can search and implement

How to dedect if input type='date' is supported in browser ?

Since you are using ASP.NET MVC 4, the Modernizr.js is built in, so you can try this:

if (Modernizr.inputtypes.date) {
    $('label').text("Support");
} 
else {
    // do your datapicker here
}

Upvotes: 1

Professor
Professor

Reputation: 618

Use this on document.ready function

$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });

Upvotes: 0

Related Questions