Copyright © 2010 Olebox – Shaun Oleson. All Rights Reserved. Snowblind by Themes by bavotasan.com. Powered by WordPress.
Well, I’ve finally found a well-written, easy to use prototype/scriptaculous based Javascript Calendar. It’s as simple as adding .js and .css files to your site, and specifying a class for the html text input that you would like to populate with these fields.
The calendar is specifically designed to be used as a date-picker so that dates within html forms are formatted correctly by end users. The script is called DatePicker and is written by coders at http://www.frequency-decoder.com.
To Start, you just have to upload the js and css files to the website in a web-accessible directory, for the purposes of this example, those directories is ‘/assets/js/’ and ‘/assets/css/’ accordingly.
After uploading these files into their directories, I then add the lines between the <head> and </head> portion of the html display:
<script src=“/assets/js/datepicker.js” type=“text/javascript”></script>
<!– NOTE: I renamed the stylesheet from style.css to calendar.css to prevent naming conflicts –>
<link REL=“StyleSheet” HREF=“/assets/css/calendar.css” TYPE=“text/css” MEDIA=“screen”>
The final step is to add the code to your text input, for this example, I want the date format to display ready for MySQL input, so I will format it as YYYY-MM-DD. You’ll notice that if you don’t want to use slashes as a date separator, you must specify the divider as dash, that syntax is ‘divider-dash.’
<input type=”text” size=”10″ name=”my_date” class=“format-y-m-d divider-dash” />
I found this to be extremely simple to integrate, yet it offers many features I haven’t outlined, including the ability to populate multiple fields in situations where your month, day and year are in separate input fields, or even populating select (pulldown) boxes.
Thanks again to the gurus behind this little gem, I’m sure I will be using it in many projects to come.
January 26, 2009 at 1:46 pm
You have a nifty calendar doo hickey and I’d be interested in it, except that there’s no demo on your blog.
http://blog.olebox.com/2008/10/31/prototype-javascript-calendar/
Call me crusty, but there’s so much shiat written by craptastic high school OMFG! I made it so that when you click on a field, it changes background color newbies that it pretty much shoots interest in the foot.
Now, to see if what you wrote doesn’t suck ass, I have to download it to a tmp directory, write some html / js, and open in a browser.
Yuck.
January 26, 2009 at 2:15 pm
There is a link available for you to access the developers website directly. As I want to make sure they get recognition for the calendar, I’ve opted to point visitors to them to download the scripts. Here is a direct link to the download page:
http://www.frequency-decoder.com/2006/10/02/unobtrusive-date-picker-widgit-update
Hopefully it works as well for you as it has for me.
Enjoy!