Solved

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

Posted on 2014-11-13
16
225 Views
Last Modified: 2014-11-13
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
Comment
Question by:lapucca
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 3
  • +1
16 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40440739
No, you need the jQuery UI library as well
0
 
LVL 8

Expert Comment

by:vr6r
ID: 40440831
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
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 166 total points
ID: 40440970
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
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 

Author Comment

by:lapucca
ID: 40441212
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
 

Author Comment

by:lapucca
ID: 40441261
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 167 total points
ID: 40441431
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
 

Author Comment

by:lapucca
ID: 40441486
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
 
LVL 58

Expert Comment

by:Gary
ID: 40441516
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
 

Author Comment

by:lapucca
ID: 40441527
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
 
LVL 8

Expert Comment

by:vr6r
ID: 40441537
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
 
LVL 58

Expert Comment

by:Gary
ID: 40441539
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
 

Author Comment

by:lapucca
ID: 40441569
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
 
LVL 58

Expert Comment

by:Gary
ID: 40441574
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
 
LVL 8

Assisted Solution

by:vr6r
vr6r earned 167 total points
ID: 40441578
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
 

Author Comment

by:lapucca
ID: 40441585
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
 

Author Closing Comment

by:lapucca
ID: 40441589
Thanks everyone.  I learned so much today.
0

Featured Post

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question