Do I only need to include standard jQuery library for the datepicker?

http://jqueryui.com/datepicker/

Also, I want the datpicker to popup when either the input file or a img file of a calendar is clicked.  is this how I would select the 2 item's using their id attributes?
  <script>
  $(function() {
    $( "# id-1, #id-2").datepicker();
  });
  </script>

Also, if the user selects the image instead of the input file, how do I put the selected date to the input file with id-1?

Thank you.
lapuccaAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Julian HansenConnect With a Mentor Commented:
Here is a full working example
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" media="screen" href="css/jquery-ui.min.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.datepicker').datepicker();
});
</script>
</head>
<body>
<label for="mydate"><img src="images/date-icon.png" /></label><input type="text" class="datepicker" id="mydate"/>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/e067.html
0
 
GaryCommented:
No, you need the jQuery UI library as well
0
 
vr6rCommented:
Regarding the user clicking the image, you just need to wrap the img in a label and reference the input id in the label's "for" attribute.

Like this...
<input type="text" id="id-1" /><label for="id-1"><img src="your image path here" /></label>

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
lapuccaAuthor Commented:
Julian,
thank for the sample code.  Does it have to be the label tag or would span tag or other tags work as well?  Thank you.
0
 
lapuccaAuthor Commented:
Julian,
I replace the library link to try it out and now it doesn't work.  Can you see what's wrong with the jQuery link I included?  I put those urls in the browser and they all seem to show the code.  

Thank  you.

<!doctype html>
<html>
<head>
<title>Test</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script src="http://code.jquery.com/jquery.js"></script>

<script type="text/javascript">
$(function() {
  $('.datepicker').datepicker();
});
</script>
</head>
<body>
<input type="text" class="datepicker" id="mydate"/><label for="mydate"><img src="http://www.marcorpsa.com/ee/images/date-icon.png" /></label>
</body>
</html>
0
 
GaryConnect With a Mentor Commented:
The jQuery library needs to be first

<!doctype html>
 <html>
 <head>
 <title>Test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>



 <script type="text/javascript">
 $(function() {
   $('.datepicker').datepicker();
 });
 </script>
 </head>
 <body>
 <input type="text" class="datepicker" id="mydate"/><label for="mydate"><img src="http://www.marcorpsa.com/ee/images/date-icon.png" /></label>
 </body>
 </html> 

Open in new window

0
 
lapuccaAuthor Commented:
Gary,
I'm not sure what do you mean.  I put this in and it still doesn't work.  I'm not sure what do you mean by jQuery library first,
thank you.
datepicker.html
0
 
GaryCommented:
The code should be as in my previous comment
Include the jquery library and then the jQuery UI library.

You datepicker.html now has the files in twice.

<!doctype html>
<html>
<head>
<title>Test</title>
<!--  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> -->

<script type="text/javascript">
$(function() {
  $('.datepicker').datepicker();
});
</script>
</head>
<body>
<input type="text" class="datepicker" id="mydate"/><label for="mydate"><img src="http://www.marcorpsa.com/ee/images/date-icon.png" /></label>
</body>
</html>

Open in new window

0
 
lapuccaAuthor Commented:
Gary, In note++ I save yours and mine file as html files.  Then select Run (Firefox) and both doesn't work when I click on input and calendar.
Thank you.
0
 
vr6rCommented:
Try this... explicitly defined paths to jquery-ui scripts

<!doctype html>
 <html>
 <head>
 <title>Test</title>
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 
  <script type="text/javascript">
 $(function() {
   $('.datepicker').datepicker();
 });
 </script>
 </head>
 <body>
 <input type="text" class="datepicker" id="mydate"/><label for="mydate"><img src="http://www.marcorpsa.com/ee/images/date-icon.png" /></label>
 </body>
 </html> 

Open in new window

0
 
GaryCommented:
You had a comment tag in there.
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script type="text/javascript">
$(function() {
  $('.datepicker').datepicker();
});
</script>
</head>
<body>
<input type="text" class="datepicker" id="mydate"/><label for="mydate"><img src="http://www.marcorpsa.com/ee/images/date-icon.png" /></label>
</body>
</html>

Open in new window

0
 
lapuccaAuthor Commented:
Gary,
I don't know what stupid thing I'm doing wrong but it just doesn't do anything when I clicked on eihter the calendar or the input box.  I copied you last code posted into notepad++, save as a new html file.  Click Run, From Firefox and nothing happens when I click on them..
0
 
GaryCommented:
This is the exact code above
http://jsfiddle.net/y5xo5nst/

Does it work? If it does then you are changing something in the code.
0
 
vr6rConnect With a Mentor Commented:
Lapucca, See my last reply above for your script, updated to work the way you are testing it (in notepad++ / firefox).

It was breaking because you are running the script locally on your machine which was breaking the jquery urls.  You will need to include "HTTP:" in your jquery src paths if you want to continue testing them locally this way.
0
 
lapuccaAuthor Commented:
Gary,
Yaaaayyy!  Finally it worked after I added http://to the path.  That was the problem and  the order of library.    Definitely learned my lesson today.  Thank you so much.
0
 
lapuccaAuthor Commented:
Thanks everyone.  I learned so much today.
0
All Courses

From novice to tech pro — start learning today.