Progressively enhancing html form, jQuery UI datepicker not working
-
29-04-2021 - |
Question
I'm new to progressively enhancing HTML5 forms, and I'm currently trying jQuery UI and HTML5's new input types to create cross-browser forms. I'm using Modernizr and Yepnope for conditional loading of scripts and following tutorial given at CSS-tricks.com. But I'm getting Object [object Object] has no method 'datepicker'
error.
I found that there's Modernizr.load()
which can be used in place of yepnope()
, but that didn't worked and ended up with Object #<Object> has no method 'load'
error so I went back to yepnope()
. Below is by <Head>
section of the webpage.
<Head>
<title>HTML5 Web Form</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/modernizr-2.5.2.js"></script>
<script type="text/javascript" src="js/yepnope.1.5.2-min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript">
yepnope({
test: Modernizr.inputtypes.date,
nope: [
"./js/jquery-ui-1.8.17.custom.min.js",
"./css/jquery-ui-1.8.17.css"
]
});
$(function(){
$("input[type='date']").datepicker(); //this is giving error
});
</script>
</Head>
And the <body>
has a form with <input type='date' name='dtTest'/>
After a bit Googling, I found that cause for the error is loading of jQuery Core twice, I also followed this, but can't fix the issue.
Thanks.
Note: I'm testing the page in Chrome 17 and Opera 11.61.
La solution
Here's what your HTML page should look like:
<!DOCTYPE html>
<Html>
<meta charset="utf-8">
<head>
<title>HTML5 Web Form</title>
<script type="text/javascript" src="js/modernizr-2.5.2.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/yepnope.1.5.2-min.js"></script>
<script type="text/javascript">
yepnope({
test : Modernizr.inputtypes && Modernizr.inputtypes.date,
nope : [
'js/jquery-ui-1.8.17.min.js',
'css/jquery-ui-1.8.17.css',
'js/datepicker.js'
],
callback : {
'jquery-ui-1.8.17.min.js' : function() {
$("input[type='date']").datepicker();
}
}
});
</script>
</head>
<body>
<div id="lblTest">Hello World</div><br/>
<form name="frmMain" action="#">
Date : <input type='date' name='dtTest'/>
</form>
</body>
</Html>
And the content of datepicker.js should be:
$(function() {
$("input[type='date']").datepicker();
});
This works fine on my copy of Chrome, though I've not had the chance to check it in other browsers.
Update: We can avoid using separate datepicker.js
by making use of callback
block of yepnope more efficiently and binding datepicker()
there itself.