Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 232
  • Last Modified:

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.
0
lapucca
Asked:
lapucca
  • 7
  • 5
  • 3
  • +1
3 Solutions
 
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
 
Julian HansenCommented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
GaryCommented:
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
 
vr6rCommented:
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now