Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (43 sloc) 3.42 KB
==== Details ====
Auto Date v1.0.1 is a JS based auto-complete date selector which uses the Prototype Framework. Its an alternative to calender in browser which sounds annoying when one needs to enter future/past dates.
It validates the date before displaying the possible options. It make sure by prompting which date you are thinking in your mind. Say for example one types "01/05" it prompts 05 jan or 01 May. Sounds great!
It also understand certain literals as one usually writes in day to day communication e.g today, yesterday, tomorrow, coming weekend, new year, christmas, last month, saturday etc.
ONLY_FUTURE_DATE feature lets the user only to type future date from today. So it will not display past dates. Read more on the WIKI, see the example in source code (index.html) and feel free to provide suggestion/feedback.
== How to Use:
Download the code from the source. Extract all the files and include in your project. Read Part 1 - Setup
Accepts the folloeing date formats:
DD MM YY (seperator can be space " " , comma "," , apostrophe "'", forward slash "/")
MM DD YY (seperator can be space " " , comma "," , apostrophe "'", forward slash "/")
DD MON YY (MON can be (jan/feb/mar etc), seperator can be space " " , comma "," , apostrophe "'", forward slash "/")
MOM DD YY (MON can be (jan/feb/mar etc), seperator can be space " " , comma "," , apostrophe "'", forward slash "/")
new year 1 Jan <present year>
christmas 25 Dec <present year>
Monday/Tuesday/Wednesday/Thrusday/Friday/Saturday/Sunday (all are coming ones, instead of present week)
Next Month/ Last Month/ Last week/ last weekend/ last sunday/ last monday etc
After x days/month/year
Before x days/month/year
So just start typing and its fast autocomplete feature will take your heart away. Best o all, its all client side so no burden on your server.
== Part 1 - Setup
Auto Date v1.0 uses the Prototype Framework. You will need to include these two Javascript files in your header.
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/auto_date/auto_date.js"></script>
Include the Auto Date CSS file (or append your active stylesheet with the Auto Date styles).
<link rel="stylesheet" href="stylesheets/auto_date/auto_date.css" type="text/css" media="screen" />
== Part 2 - Activate
You need to give a unique id to your html tag and assign your onclick event to "new AutoDate(this);". For example:
<input id="input_date" name="input_date" onclick="new AutoDate(this);" type="text" value="June 30 2010">
<%= text_field_tag "input_date", date, :onclick => "new AutoDate(this);"%>
<a href="#" id="link_date" onclick="new AutoDate(this);; return false;">June 30 2010</a>
<%= link_to_function date, "new AutoDate(this);", :id => "link_date" %>
where date is any date you want to display by default e.g. June 30 2010
== Feature
ONLY_FUTURE_DATE to only display future dates when a user search for a date e.g. when a user book a flight it can only be for future date istead of some past date.
You can set "ONLY_FUTURE_DATE = true" by calling "new AutoDate(this, true)". It will ensure only future date is used.
If your application needs only future date set "ONLY_FUTURE_DATE = true;" in auto_date.js, by default its false.
For further help or any feedback, please feel free to mail me at
Jump to Line
Something went wrong with that request. Please try again.