lapucca
asked on
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.
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.
Gary
No, you need the jQuery UI library as well
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...
Like this...
<input type="text" id="id-1" /><label for="id-1"><img src="your image path here" /></label>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
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
<script src="//code.jquery.com/ui/
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('.datepicker').datepicke
});
</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>
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
<script src="//code.jquery.com/ui/
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('.datepicker').datepicke
});
</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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
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.
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>ASKER
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.
Thank you.
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>
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>ASKER
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..
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..
This is the exact code above
http://jsfiddle.net/y5xo5nst/
Does it work? If it does then you are changing something in the code.
http://jsfiddle.net/y5xo5nst/
Does it work? If it does then you are changing something in the code.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
Thanks everyone. I learned so much today.