hi community and kevin luck, first i must thank kevin you for his great datepicker. it's really fantastic and fits perfect into my project (even the css :)). but unfortunately he forget the "old world" in his predefiend dateFormats versions. here in swiss, austria, and german is the "." the regular dateFormat separator. so i've changed your plugin a bit and made the formatting/parsing of a date a bit more generic.
in detail, i split up the format into the old well known dateFormat and a
new dateSeparator.
dateFormat can now be one of: 'dmy' (european), 'mdy' (americian) or 'ymd'
(unicode) (formerly 'dd/mm/yyyy' (european), 'mm/dd/yyyy' (americian) and
'yyyy-mm-dd' (unicode)) and dateSeparator can be anything you like, for
example '-', '/', '.', '\'', or even '' for no separator ...
so the new setDateFormat() function looks like:
setDateFormat: function(format,separator)
{
// set's the format that selected dates are returned
in.
// options are 'dmy' (european), 'mdy' (americian)
and 'ymd' (unicode)
dateFormat = format.toLowerCase();
dateSeparator = separator?separator:"/";
},
usage examples:
$.datePicker.setDateFormat('dmy','.');//german
$.datePicker.setDateFormat('dmy','/');//equals to default "dd/mm/yyyy"
$.datePicker.setDateFormat('ymd','-');//unicode
$.datePicker.setDateFormat('mdy','/');//american
$.datePicker.setDateFormat('mdy'); //also american with default '/'
separator
i've changed the datePicker_source.js and created the attached patch file
(svn, eclipse) based on revision 630. the attached index.html is a test with
a german translation and format. code is testetd on ie6, ff1.5, ff2.0.
if you find this patch usefull, pls. commit it into the SVN.
btw, i have some feature requests:
1) i need the ability to select a date in the far future (life insurance
finalization date ~ +20 years, that should not be on weekend, so i need to
lookup into the calendar). i.e. year paging as well as month paging or
direkt year selectiong (select box)
2) the possibility to set the weeks startday for example to sunday
did you (kevin) plan something like that? if not, i will take this version
and start a branch...
regards stefan
**************************************
*** Stefan Flick ***
*** 2333 Leopoldsdorf b. Wien ***
*** Austria ***
*** Skype: callto://flick,stefan/ ***
**************************************
Title: jQuery Date Picker
jQuery date picker plugin
A jQuery plugin to allow you to add "date picker" elements to your forms.
The "date pickers" allow you to pick a date by clicking on a calendar and puts the chosen date into the relevant text input
No validation is performed on the text input when the form is submitted and it is presumed that the server processing the form is expecting dates in the format you specify.
Version
r29 - released 23rd November [changelog]
Example
Usage
Optionally set the date format (possible values are 'dd/mm/yyyy', 'mm/dd/yyyy', 'yyyy-mm-dd') [defaults to dd/mm/yyyy]:
$.datePicker.setDateFormat('mm/dd/yyyy');
And optionally change the displayed language [default strings are in English]:
$.datePicker.setLanguageStrings(
['Domingo', 'Lunes', 'Martes', 'Mi�rcoles', 'Jueves', 'Viernes', 'S�bado'],
['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
{p:'Anterior', n:'Siguiente', c:'Cierre', b:'Elija la fecha'}
);
Then you are ready to initialise your date pickers. The basic syntax for this is as follows:
$('selector').datePicker();
This will add a date picker button to any input element matched by the query selector and the date picker will allow you to select any future date.
You can also optionally pass a start date (the first selectable date) or end date (the last selectable date) to the plugin like so:
$('selector').datePicker({startDate:'05/03/2006', endDate:'05/11/2006'});
You can additionally pass a value for the first day of the week on the calendars (from 0 for Sunday to 6 for Saturday)
$('selector').datePicker({firstDayOfWeek:1}); // set the calendar weeks to start from Mondays
Please view the sourcecode of this page for further examples of using the plugin. You can download this page if you like and experiment with commenting out different lines...
NOTE: A user without _javascript_ will simply see normal input boxes.
Requirements
- jQuery - obviously! I've tested against 1.0.3 [rev 501].
Download
- datePicker.js – compressed JS for plugin - only 5.55KB
- datePicker_source.js – the readable version of the sourcecode
- styles.css – The necessary styles
Changelog
- 23rd November 2006 - removed the styles to make the calendar stay above check boxes from the stylesheet and created them in the JS (to avoid validation problems with the CSS) [r29]
- 19th November 2006 - added the ability to change the first day of the week on the calendar by passing in a firstDayOfWeek parameter [r28]
- 19th November 2006 - moved the "Choose date" string out so that it could be set via setLanguageStrings [r27]
- 19th November 2006 - replaced all references to $ with references to jQuery as per best practices [r26]
- 19th November 2006 - change to remove reliance on the DOM creation plugin (thanks to Sam Collett for the relevant tweak). [r25]
- 14th November 2006 - change to make sure that the onchange event for the input is fired when a date is selected. NOTE packed version not currently available because Dean Edwards site is down... [r24]
- 8th October 2006 - moved some IE specific hackery for position from the JS into the CSS as it is presentational rather than behavioural and belongs there [r23]
- 3rd October 2006 - applied a patch from Matt Good to make the date picker work without requiring ids on the inputs (thanks Matt!) [r22]
- 3rd October 2006 - updated jQuery to r384 with fixes for (amoungst other things) possible memory leaks (didn't help much) [r22]
- 24th September 2006 - fixed a bug when in mm/dd/yyyy date format [r21]
- 11th September 2006 - fixed a nasty bug (since r12) which was messing up the days of the week in certain situations [r19]
- 10th September 2006 - updated jQuery to r249 [r18]
- 10th September 2006 - fixed a memory leak in IE/PC[r17]
- 18th August 2006 - updated jQuery to r200
- 16th August 2006 - made it possible to "reinitialise" a date picker input. This allows you to change the start and end date after the date picker has been created [r16]
- 16th August 2006 - cleaned up the initialisation method and code thanks to suggestions from the jQuery mailing list (NOTE: if you were using a previous version of the plugin you will need to update at least your initialisation code) [r15]
- 16th August 2006 - stripped more unnecessary markup from the example code [r14]
- 15th August 2006 - added the ability to "setLastDate" [r13]
- 15th August 2006 - Cleaned up the markup required to use a calendar - now it is dynamically created on init (NOTE: If you were using a previous version you will need to change your markup and CSS - see the code on this page) [r11]
- 6th August 2006 - added the ability to change the language specific strings that appear in the calendar
- 25th July 2006 - added a close button to the calendar and make it display the current year in the header (NOTE: if you were using a previous version you will likely have to also modify your stylesheet to deal with the new generated HTML) [r10]
- 24th July 2006 - updated so SELECT elements don't show through popup calendar using CSS from this fix [r9]
- 24th July 2006 - updated to work with new release of jQuery [r8]
- 20th June 2006 - clicking outside the date picker closes open calendar and escape key works consistantly [r7]
- 4th June 2006 - added the ability to specify a "first selectable date" in the past [r4]
- 3rd June 2006 - inital release [r3]
This plugin is stored in a Subversion repository. If you want to access old versions or do diffs of the changes between versions please use your subversion client to access http://svn.kelvinluck.com/j_datePicker/
Feedback
Feedback is greatly appreciated, either via the comments on the bottom of this page on my site, the jQuery mailing list or my contact form.
Credits
- jQuery
- DOM element creator
- Dean Edward's packer for compressing the code
- FamFamFam for the icon
datePicker_source.js_630.patch
Description: Binary data
_______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
