27 Jan

Date Picker jQuery Plugin to Fit in Your Web Application

Calendar, License Free

Leave a Comment

Date Picker jQuery Plugin allows users select a date or a range selection of dates easily. It hasa lot of options and easy to fit in your web application. It supports multiple calendars in the component. We can mark dates as special, weekends, special days. More importantly, we can easy to customize the look by changing CSS.

Implementation of DatePicker jQuery Plugin is easy. You just need to attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme, and then select the elements in a jQuery way and call the plugin.

Requirements: -
Demo: http://www.eyecon.ro/datepicker/
License: License Free

Sponsors

Comments

http://www.milanoplus.it Daniele

A datepicker is already included in latest release of the official jQuery UI library!
It’s developed and integrated by the jQuery team, so I think it will be the most recommended datepicker around.
http://ui.jquery.com/demos/datepicker
http://irongaze.com Rob Morris

Daniele, the jQuery UI libraries, while cool, are very, very early in development. The datepicker tool, for example, fails in many simple scenarios (for example, when attached to controls in a jQuery UI dialog), and the current CSS styling leaves it hard to customize and deploy. I’m using jQuery UI for some of my admin tasks, but only the most basic features.

In short, I’ve been looking for a fully functional jQuery-based datepicker for a while, will definitely check this one out.
Pingback: Articles and tutorials for web developers | CssGalleries
Jonny

My initial impressions of this are good. I agree with Rob…the jQuery UI calendar hasn’t come through for me in the past either. At a very basic level it works great…but it seems that every time I use a calendar I have some special preference…whether it be a specific date range, or I only want the first day of the week selectable, or whatever.

I expect the UI calendar to continue to get better…but until then I’m open to other options!
http://marcgrabanski.com Marc Grabanski

The jQuery UI Datepicker core itself is very mature, 50+ customization options and 30+ languages. I don’t know how you guys can say it is not fitting your needs because I started the project back when jQuery first came out and added the features people needed. Jonny, the ui datepicker has all of those customization options you just mentioned.

That said, I donated the core to jQuery UI and they have been changing it since.

If you ever want a more pure implementation of the core I developed with Keith wood, than check out this project:
http://keith-wood.name/datepick.html
http://marcgrabanski.com Marc Grabanski

Rob morris: the datepicker inside dialog worked for me http://tinyurl.com/aob98q by setting the z-index of #ui-datepicker-div to 9999. The CSS can be changed via UI Themeroller ( http://ui.jquery.com/themeroller ) and also changing the theme by hand is fairly straight-forward. Hopefully that information helps someone here that might be considering UI datepicker.
http://irongaze.com Rob Morris

Spent the past few hours integrating this one into my system, have some notes for anyone who’s interested:

The DatePickerShow/Hide methods are buggy – you need to edit the source to extend DatePicker.showPicker/hidePicker @ line 817 or so instead of DatePicker.show/hide.

The floated version uses page-absolute positioning, so if you (like me) use centered page layouts or similar, users who resize their browser window while the picker is displayed will see the picker moved to an incorrect location. I think this can be fixed by embedding the picker in a custom div, but haven’t tried that yet.

All-in-all, a pretty nice tool, and definitely an improvement over the jQuery UI version (as of 1.5.x).
http://irongaze.com Rob Morris

Marc: I don’t disagree with you – I think that the jQuery version will eventually work nicely, but it just feels awkward right now. I kept using it, and kept having issues. YMMV, and all that.

The css issues I ran into seemed to be due to the default styles (ie from ThemeRoller) not setting things like line-height and so forth – I kept getting weird bugs as I took the widget from one site to the next with different text rules. I ended up getting rid of it entirely and going back to just manual entry out of frustration. I think if I weren’t trying to use it on so many sites, it would have been a great tool. Anyway, here’s to competition in the widget world!
http://marcgrabanski.com Marc Grabanski

Yeah, there are 100+ datepickers to chose from, which is great for the developer. But, I like to keep tabs on the jQuery UI Datepicker project and make sure any issues people have get resolved. I will forward your comments onto the jQuery UI team. Thank you for your feedback!
Pingback: 網站製作學習誌 » [Web] 連結分享
Brian Scott

Has anyone restyled the CSS to work with IE6? I made an attempt but found it troublesome. It would be good if someone could provide me with some sample CSS to put me in the right direction.

@Rob Morris:
I’m also experiencing the issue with the window resizing causing issues with the calendar positioning. Did you get round this?
Matt

Is it possible to put the date in three different field (one for mm, one for dd, and one for yy) instead of putting them all in one field)? Like if I click on the calendar and choose a date, then then three input field will be filled with corresponding month, day and year.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact