I am trying to build my personal website using express and want to put a datepicker on one of the page. I tried to change the ejs file of this page, however, nothing works. I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href=".8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src=".7.1/jquery.min.js"></script>
<script type="text/javascript" src=".8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me. node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href=".8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src=".7.1/jquery.min.js"></script>
<script type="text/javascript" src=".8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
I am trying to build my personal website using express and want to put a datepicker on one of the page. I tried to change the ejs file of this page, however, nothing works. I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis./ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me. node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis./ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
- Why are you including jQuery UI twice? And jQuery itself twice? – Pointy Commented Feb 3, 2014 at 17:31
- Because I am making sure if the JQuery-UI is loaded,so apart from using a local one, I also include one from the website....but it does not work either... – DQ_happy Commented Feb 3, 2014 at 17:33
- You're including jQuery 1.10.2, and then after that you're including jQuery 1.7.1, a substantially older version. Don't do that. – Pointy Commented Feb 3, 2014 at 17:34
- Thanks for the advice, I just deleted them! – DQ_happy Commented Feb 3, 2014 at 17:44
2 Answers
Reset to default 2node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a mon problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle/w7PHj/
you need to use like this....
$('#datepick').datepicker();