jquery date picker

Posted on 2012-08-29
Medium Priority
Last Modified: 2012-08-29
Trying zebra-datepicker.  Does not work inside td tags.  The icon is outside the table, real ugly.

I have a complex app that i need to add a date picker to and looking for a simple, very lean, easy to install .  I just need it to have an icon, then date picker and then format M/D/Y.

Any suggestions for a quick slam dunk date picker appreciated.
All my date fields have the class = datepicker.  However, I can change this.
Question by:KeithMcElroy
  • 4
  • 3
LVL 60

Expert Comment

by:Julian Hansen
ID: 38346193
How about jqueryui - it has a datepicker that works really well


Author Comment

ID: 38346344
is there a sample where it has links to all the dependencies.
I've worked with this before and it seems like I always miss some detail just since I am not that familiar with this aspect of Jquery.

Looking for the no brainer.
LVL 60

Expert Comment

by:Julian Hansen
ID: 38346491
Basically you go to the download page and select the components you want / don't want.

Then select your theme - (colours etc).

Download the custom package
Include the JQuery library
Include the jqueryui jscript file
Include the jqueryui css file
Create a text input <input type="text" name="thedate" id="thedate" />
Link to the text file
$(function() {

Open in new window

For more options see the datepicker page - at the bottom you can set min / max date ranges, date format, start date etc.
If you get stuck post back I will post a working sample.

The samples on the jqueryui site are fairly comprehenisve - same page scroll down click view source - more advanced samples in right sidebar.
Industry Leaders: 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!


Author Comment

ID: 38346667
have had problems with this, but will circle back and do again.
Will advise results.
LVL 60

Expert Comment

by:Julian Hansen
ID: 38347022
Here is working code in its simplest form. All you need to do is add a style sheet with your chosen theme to complete it.

<!doctype html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
<input type="text" id="thedate" />

Open in new window


Author Comment

ID: 38347133
That helps alot, between that and just robbint the includes from the sample page, I got it working.

It is not great, but ok.

The things I need to figure out are how to get a button next to it.
and get the format to 8/10/2012 instead of 08/10/2012

I image on the format, I can dig into the docs, but the button I am not sure.

Anyway, appreciate the help.  Will award points, just want to allow for any other input to help me out if you have suggestions.

Thanks a mil,
LVL 60

Accepted Solution

Julian Hansen earned 2000 total points
ID: 38347273
To set the format do this

$(function() {
  $('#thedate').datepicker({dateFormat: "d/m/yy"});

Open in new window

To do the button have a look at this code and see if that helps

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses
Course of the Month14 days, 15 hours left to enroll

839 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