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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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
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
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.
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
Dave BaldwinFixer of ProblemsCommented:
You're welcome.  If that is all, please award the points.
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.
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.
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.