Loading jQuery UI datepicker when native HTML5 date input type not present

Question

While <input type="date"> is not common for desktop, this is the preferred method for mobile.

I'm trying to implement the fallback code at the bottom of this section: http://diveintohtml5.info/forms.html#type-date

<form>
  <input type="date">
</form>

<script>
  var i = document.createElement("input");
  i.setAttribute("type", "date");
  if (i.type == "text") {

    // No native date picker support :(
    // Use Dojo/jQueryUI/YUI/Closure to create one,
    // then dynamically replace that <input> element.
    var script = document.createElement('script');
    script.scr = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);

    var style = document.createElement('style');
    style.href = "http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css";
    document.getElementsByTagName('head')[0].appendChild(style);

    $(function() {
       $.datepicker.setDefaults(
          $.extend($.datepicker.regional['']);
       );
    });
  }
</script>

Using the above logic, anything within $(function()) throws a console error and datepicker is undefinied. How do I rewrite this so that jQueryUI script and style only shows up when native datepicker isn't available?

I'm trying to keep http requests down and overall page performance faster on these pages for mobile browsers and Chrome since they all have native datepickers available.

brian s · Accepted Answer · 2013-11-12 16:16:43Z

3

Here is another fallback method for [input type="date"] support that I found helpful.

What happens: The browser is tested to see if it supports the input type of date. If it does, business as usual. If it does not, then you can load the scripts and styles that are necessary to create a nice Date Picker control.

I used

YepNope.js to handle the conditional loading.
Modernizr to conduct the test.
jQuery & jQuery UI for the Date Picker control.

After including the scripts above in whatever way that you choose, you then add this script to your page to handle the conditional fallback.

yepnope({
    test: Modernizr.inputtypes && Modernizr.inputtypes.date,
    nope: [
          //'scripts/jquery.js','scripts/jquery-ui.js','css/jquery-ui.css'
          '~/scripts/app/dateinput.html5shim.js'
        ]
    });

-- jQuery, jQueryUI, Modernizr, and YepNope are all loaded in a bundle for my project.

My datepicker script is copied directly from the tutorial below. This just initializes the jQuery UI control for all input elements of type date when the DOM is ready

$(function () {
    $("input[type='date']").datepicker();
});

This answer comes from the always helpful Chris Coyier of css-tricks fame. Full tutorial here: http://css-tricks.com/progressively-enhancing-html5-forms/

answered Nov 12, 2013 at 16:16

brian s

3852 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JohnLBevan Over a year ago

To only apply this where the browser doesn't have built in functionality: if ( $('[type="date"]').prop('type') != 'date' ) { $('[type="date"]').datepicker(); } From: stackoverflow.com/questions/18020950/…

Musa · Accepted Answer · 2013-09-17 23:22:37Z

1

You have to wait until the script loads before you can use it. I suggest using $.getScript to load it.

$.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js", function(){
   $.datepicker.setDefaults(
      $.extend($.datepicker.regional[''];)
   );
});

Also you have to use a <link> tag to insert a stylesheet into your document not a style tag.

edited Sep 17, 2013 at 23:22

answered Sep 17, 2013 at 22:45

Musa

97.9k17 gold badges123 silver badges144 bronze badges

5 Comments

micah Over a year ago

Interesting, that worked. How would I load the stylesheet for jQueryUI? The same way I've already been doing?

Musa Over a year ago

@micah just as you have it.

micah Over a year ago

Hmm, I'm not sure why but the method I have to dynamically insert the jQueryUI style tag isn't working. Is there a better method?

Musa Over a year ago

@micah use a link tag not a style tag.

micah Over a year ago

Ah, good catch. I also had to add another line for rel="stylesheet" so that it knew what kind of link it was. Now it's working as intended. Thanks for your help!

Collectives™ on Stack Overflow

Loading jQuery UI datepicker when native HTML5 date input type not present

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related