I'm trying to use this: http://trentrichardson.com/examples/timepicker/
that's my code:
<html>
<head>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js"> </script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-sliderAccess.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script>
$(function() {
$('#dateTimePicker1').datetimepicker();
});
</script>
</head>
<body>
<%-body%>
</body>
</html>
that's the body.ejs:
<input id="dateTimePicker1" class="hasDatepicker"></input>
What I get is a simple input. Nothing happens when I click it. I get no errors in the console. I need help solving that problem.
upd(i have a routing file):
exports.index = function(req, res){
res.render('index', { title: 'index' })
};
I checked and the input is in the code after the page loading.
But, the strange thing is that:I open the site with the author's addon (the first link in this post). Open the developer tools. edit html of the site - add new input right near the example input. name(and id) it example222. in console do
$('#example222').datetimepicker();
His input works, mine NOT! What kind of sorcery is that? :)
First, i though that your script was executed before the DOM was loaded which is wrong because it's wrapped in $(...) and should behave like wrapped in $.ready(...).
If your not getting any error that means that the code doesn't find any DOM element matching the selector, meaning that your template is not applied.
Can you please check that your source code (in the browser) has the <input id="dateTimePicker1" class="hasDatepicker"></input>
or still contains the ejs template.
Then can you please show us how you call rendering in node.js.
EDIT : the problem was that jQuery code wasn't executed.
This will work as proven by this jsFiddle:
<html>
<head>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-1.7.1.min.js"> </script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-sliderAccess.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
</head>
<body>
<input id="dateTimePicker"></input>
<script type="text/javascript">
$(document).ready(function() {
$('#dateTimePicker').datetimepicker();
});
</script>
</body>
</html>