Saturday, May 26, 2018

HTML5 Date Input with jQuery Fallback

HTML5 introduced a new date input type which allows a user to enter a date using a date picker.

<input id="date" type="date" value="2018-05-26">

This is what it looks like in Chrome:

However, not all browsers support this input type. In unsupported browsers, such as Internet Explorer, you will simply see a text input field.

In this post, I will show how you can detect if a browser supports the date input type and how you can fall back to using jQuery's date picker if it doesn't.

Checking if the browser supports date input:

The following code creates an input element and sets its type to date. If the browser does not support date input, this operation will not work and the input type will degrade to text.

var input = document.createElement("input");
input.setAttribute("type", "date");
if (input.type !== "date") {
    console.log("browser does not support date input");
}
Alternatively, use the Modernizr library, which makes it easy to detect the features that a browser supports:
if (!Modernizr.inputtypes.date) {
    console.log("browser does not support date input");
}
Falling back to jQuery's date picker:

The JSFiddle below shows how you would use jQuery's date picker if the browser does not support date input.

17 comments:

  1. Thank you for taking the time and sharing this information with us. It was indeed very helpful and insightful while being straight forward and to the point.
    RPA Training in Chennai
    Selenium Training in Chennai
    Robotics Process Automation Training in Chennai
    RPA courses in Chennai
    Selenium classes in chennai
    Selenium testing training in chennai

    ReplyDelete
  2. This information is impressive. I am inspired with your post writing style & how continuously you describe this topic. Eagerly waiting for your new blog keep doing more.

    Franchise Business in India
    Education Franchise
    Computer Education Franchise
    Education Franchise India
    Computer Center Franchise
    Education Franchise Opportunities in India

    ReplyDelete
  3. I wanted to thank you for this great blog! I really enjoying every little bit of it and I have you bookmarked to check out new stuff you post.
    Hadoop Training in Chennai
    CCNA Training in Chennai
    Big Data Training in Chennai
    Big Data Training
    CCNA course in Chennai
    CCNA Training institute in Chennai

    ReplyDelete
  4. Such an excellent and interesting blog, Do post like this more with more information, This was very useful, Thank you.
    Aviation Academy in Chennai
    Aviation Courses in Chennai
    best aviation academy in chennai
    aviation institute in chennai

    ReplyDelete