Menu
I'm using Modernizr and am having trouble getting a jquery UI datepicker to display in-place of the native html5 date input in FireFox.
This fiddle shows what I mean - open it in FireFox When opening in Firefox I just get a text input http://jsfiddle.net/Te2yL/
Code:
<head>
//Include Modernizr - all items are included (full-fat version)
<script src="assets/js/vendor/modernizr.js"></script>
</head>
<body>
<input
type="date"
id="start-date"
ng-model="someVariable"
format-date
class="form-control date"
/>
<script>
Modernizr.load({
test: Modernizr.inputtypes.date,
nope: ['https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js',
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/smoothness/jquery-ui.css'
],
complete: function () {
$('input[type=date]').datepicker({
dateFormat: 'yy-mm-dd'
});
}
});
</script>
</body>
</html>
To confirm, when open in FireFox the Jquery-ui js & css are downloaded.
I'm still getting the text input show up in the browser - it's type is still 'date' on inspection of the DOM.
Am I missing something?
Many thanks
724
When looking at the JavaScript of the full, uncompressed version of Modernizr that you can include from cdnjs.com, there is this big comment at the top that says:
* Modernizr has an optional (not included) conditional resource loader * called Modernizr.load(), based on Yepnope.js (yepnopejs.com). * To get a build that includes Modernizr.load(), as well as choosing * which tests to include, go to www.modernizr.com/download/
So, you will have to download a customized version from the Modernizr website which includes Modernizr.load.
From the source code of a build of Modernizr with Modernizr.load included, I can see that the only code that glues Yepnope and Modernizr together is this line:
Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0));};
So, instead of hosting a customized Modernizr build at your own server, you can also include both Modernizr and Yepnope from cdnjs.com and then use this line of code to glue them together. Or you can just forget about Modernizr.load and use the yepnope function, for which Modernizr.load is just an alias.
Another problem is that you're using HTTP URLs for the scripts that Modernizer.load should fetch, which means they won't work when visiting JSFiddle over HTTPS. Consider protocol-reliative URLs or, better yet, always use HTTPS URLs.
↪ See here for a fixed version of your Fiddle
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
