JQuery Datepicker not working

javascript jquery html datepicker

13,512

Solution 1

i would suggest you take a look at the regular jquery ui datepicker to get a standard out of the box datepicker working. Start by simply using the exact code you see here and then tweak (step by step) as necessary. There are tons of example for all different use cases and good documentation

Solution 2

I have tried below configuration and it's working fine on my local host -

Browser Tested - Mozilla Firefox version 3.6.10

I have xampp package installed.

I am including the html file that i have used for testing -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
<script type="text/javascript" src="date.js"></script>   
<script type="text/javascript" src="jquery.datePicker.js"></script>
<LINK REL=StyleSheet HREF="datePicker.css" TYPE="text/css" MEDIA=screen>    
<script type="text/javascript" charset="utf-8">    
 $(function()    
 {    
  $('.date-pick').datePicker().val(new Date().asString()).trigger('change');
  //$('.date-pick').dpSetEndDate('01/01/2010');
 });    
</script>

</head>
<body>
<input name="oDate" id="oDate" class="date-pick" />
</body>
</html>

13,512

Author by

Jim Jeffries

Software developer - mostly working with ruby, javascript and mongoDB at the moment, but have experience with Java, C#, C++, Oracle, Postgres, SQL Server and Python and dabble in Neo4J, Clojure, Haskell, Scala, Go and whatever else takes my fancy.

Updated on June 14, 2022

Comments

Jim Jeffries about 2 years
I am trying to get a date picker working and I am really struggling with my limited javascript knowledge. I have been basing this on this tutorial.

I have the following code:
```
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
<script type="text/javascript" src="scripts/date.js"></script>    
<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>    
<script type="text/javascript" charset="utf-8">    
 $(function()    
 {    
  $('.date-pick').datePicker().val(new Date().asString()).trigger('change');
 });    
</script>
```
...
```
<input name="oDate" id="oDate" class="date-pick" />
```
Any suggestions would be very much appreciated.
- Vinay B R almost 14 years
  
  can you post the html as well
- leora almost 14 years
  
  what are you trying to do? what is the issue?
- Jim Jeffries almost 14 years
  
  This brings up a bit next to the input box saying "Choose Date", however when I click this nothing happens.
- JAL almost 14 years
  
  Are you sure there are no syntax errors or anything that would prevent the JS from running?
- Jim Jeffries almost 14 years
  
  As far as I can tell. I have tried running it in Firefox (well, IceWeasel) with noScript turned off and Chrome
- vitch almost 14 years
  
  Are you also including the relevant CSS? If you could provide a link to the page where it is not working I could help you more but I can guarantee that the examples as given work for me...
Jim Jeffries almost 14 years

Sorry, missed that off my post. Editing to include this.
petsagouris almost 14 years

Have you included this in a <form>?
petsagouris almost 14 years

And also make sure you've included the id attribute with the same name as the name attribute.
Jim Jeffries almost 14 years

Yes - <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="POST">
Jim Jeffries almost 14 years

Thanks, I will try this way, I can't get anything to work using the Kelvin Luck one. Even if its copied stright out of the tutorial!
Jim Jeffries almost 14 years

This does not work for me. Does this mean that it is a configuration issue? if so what do I need to check is correctly configured?
Alpesh almost 14 years

you are testing on which operating system and which browser ?
Jim Jeffries almost 14 years

I am using debian and I have tested with firefox, iceweasel and chrome and getting nothing each time.
Alpesh almost 14 years

just install firebug ( an addon for mozilla) in your firefox browser. Just check in firebug's console that are you getting any js errors.
Jim Jeffries almost 14 years

On the scripts tab in firebug, there are no scripts for that page
Alpesh almost 14 years

Have you tried checking console (first tab) in firebug ? Because if the plugin js file is not loading then it will show error something like this .datepicker is not a function.
Jim Jeffries over 10 years

Don't have this code any more. Was fixed by using jquery ui datepicker originally, but now we are using <input type="date" ... Thanks anyway though :)