Datepicker and PHP

I am just starting to learn web programming and am trying to use datepicker in a simple php application.

The code is -
<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="/var/www/html/development-bundle/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="/var/www/development-bundle/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="/var/www/development-bundle/ui/ui.core.js"></script>
  <script type="text/javascript" src="/var/www/development-bundle/ui/ui.datepicker.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#datepicker").datepicker()
}
);
 </script>
</head>
<body style="font-size:62.5%;">
 
<form method=post action="dateformat.php">
<input type='text' id='datepicker' name='thedate' class="date-pick" />
</form>
</body>
</html>

When i type in the URL, I see a text field. But when I click on it, no calendar opens up.
Thanks
happylife1234Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Are you running this thru you web server?  The javascript 'src' needs to be relative to location of the page file like below.  I don't know if you need to add the 'html/' to all of your src's or not.
<link type="text/css" href="html/development-bundle/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
  <script type="text/javascript" src="development-bundle/ui/ui.datepicker.js"></script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
happylife1234Author Commented:
Your comments helped, DaveBaldwin.

I can now see a calendar. However, I have a question.

The calendar looks different from what I see in the Jquery demo. It doesn;t look good. My source code is here -
<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="/var/www/html/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="jquery/development-bundle/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.core.js"></script>
  <script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.datepicker.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
    $("#date").datepicker( {
      showOn: 'button', buttonText: "Select" }
 );
  });
  </script>
</head>
<body style="font-size:62.5%;">
<form>
  <input id="date" type="textbox"/>
</form>
</body>
</html>

This code produces a nice calendar
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body style="font-size:62.5%;">
 
<div type="text" id="datepicker"></div>

</body>
</html>

I dont understand what could be the difference. I have downloaded 1.8 version.

Thanks
calendar.bmp
0
happylife1234Author Commented:
I even downloaded the "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css file and linked it to my php file. Still no difference.

Thanks
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Dave BaldwinFixer of ProblemsCommented:
You had couple of extra tags in example.  I downloaded the jquery files and got what you see in the pic.  You need all three of those files for the calendar to work right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<!DOCTYPE html>
<html>
<head>
  <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
 
  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body style="font-size:62.5%;">
 
<div type="text" id="datepicker"></div>

</body>
</html>

Open in new window

jquery-cal.jpg
0
happylife1234Author Commented:
DaveBaldwin,

I could find two files on the internet ( google site ) that I could download - http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css and http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js

I was not able to find http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js anywhere ( version 1.4 was not available ). Can you point me to a site where I can download this file from.

Thanks
0
Dave BaldwinFixer of ProblemsCommented:
All you have to is click on your own link and save it to disk when it loads in your browser.  That's all I did.
0
happylife1234Author Commented:
I dont know why I did not think of that. I did that and am able to get the calendar you attached. However it is missing the arrows ( right and left ). Apparently it looks like an image file is missing.

I think this image is missing - background-image:url("images/ui-icons_222222_256x240.png");

Got this from inspecting the element in the browser.

However, when I link to the online files, I am able to see the arrows. I am attaching the calendar here.

Thanks so much for your help.
date.bmp
0
Dave BaldwinFixer of ProblemsCommented:
You're welcome.  If that is all, please award the points.
0
happylife1234Author Commented:
I think you did not read my full comments. I am not able to get the arrows as shown in the picture above.
0
Dave BaldwinFixer of ProblemsCommented:
I don't know where the 'online' files are but I would just right-click on the arrows and "Save As".  There should be two separate images I think.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.