The LowDown
Yet another attempt writing a datePicker (calendar) that is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml.
This version can almost be described as a complete rewrite as so much of the code base has changed between v4 and v5.
The more impatient amongst you may want to see the various demos before reading any further.
It’s also worthwhile noting that:
- All examples within the article use a European d/m/y date format and not the American m/d/y format
- A basic knowledge of Javascript, HTML and CSS is assumed
At a glance…
- Keyboard accessible
- Accessibility enhancements including support for ARIA Roles and States
- All keyboard shortcuts now adhere to The DHTML Style Guide Working Group (DSGWG) recommendations
- Multiple date formats and date dividers supported
- Unobtrusive and nameSpace friendly
- Fully skinnable with CSS
- Both upper and lower date limits can be set
- Bespoke days of the week can be disabled
- Bespoke dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
- Includes “smart” localisation
- Bespoke days of the week can be highlighted
- Works with any combination of text inputs or select lists
- DOM friendly – the calendar is only added to the DOM when actually required
- DatePickers can display an optional status bar and week numbers
- DatePickers can be dragged within the viewport by the user (activated by clicking on either the datePicker’s header or footer)
- The script can parse and format dates using a subset of the PHP date conversion specifiers
- Global configuration parameters can be specified using JSON within the script tag itself
- The “button” used for popup datePickers can now be styled for default, hover, active and disabled states, be arbitrarily positioned within the DOM and removed from the document tabindex if so desired
- Inline datePickers are now available (i.e. no button activation is required), are automatically added to the document’s tabIndex and can be arbirarily positioned within the DOM
- A bespoke final opacity can be defined and the fade in/out animation effect disabled
- The entire grid can now be filled with dates
- The “Today” button can be removed from the U.I.
- It’s free to use, even commercially (Released under a CC share-alike license)
Creating datePickers
Unlike past iterations of the script, this version no longer enables className initialisation – datePickers have to be created using JavaScript.
An example of a basic Javascript creation call is shown below:
// Attach a datepicker to the form element with an id of "inp1"
// Use the date format "d-sl-m-sl-Y" i.e. 03/12/2009
datePickerController.createDatePicker({
formElements:{"inp1":"d-sl-m-sl-Y"}
});
Note: All associated form elements have to be available within the DOM before calling the createDatePicker method. This means that the createDatePicker method should only ever be called from:
- A window.onload event handler (old school)
- A bespoke onDomReady event handler (new school)
- An inline script block positioned after the form elements within the HTML (lazy school – as used within the demos)
Associating form elements with a datePicker
Each datePicker has to be associated with at least one form element (a text input or selectList) and each form element has to have an associated date format.
For example, the following code will associate a datePicker with the three distinct form elements whose id’s are “inp1”, “inp2” and “inp3” respectively:
datePickerController.createDatePicker({
formElements:{
// "inp1" represents the day part
"inp1":"d",
// "inp2" represents the month part
"inp2":"m",
// "inp3" represents the year part
"inp3":"Y"
}
});
Note: Each datePicker has to have a day, month and year part stipulated within the combined date formats in order for the script to be able to parse a valid date from the combined form element values.
The order of the form elements listed within the formElements parameter
The first form element stipulated within the formElements parameter is the element that receives focus after a date has been successfully selected using the datePicker; for example, the following initialisation code would set the focus on the “inp1” form element as it was the first element listed:
datePickerController.createDatePicker({
formElements:{
/* "inp1" will be given focus whenever a date is selected
using the datePicker */
"inp1" : "d",
"inp2" : "m",
"inp3" : "Y"
}
});
Additionally, the first form element listed is the id that needs to be used when calling certain methods of the datePickerController Object as is shown below:
/* "inp1" is the id to use when calling certain methods of the "datePickercontroller" Object; for example, the "destroyDatePicker" method */
datePickerController.destroyDatePicker("inp1");
Popup datePickers
By default, the script creates “popup” datePickers i.e. an activation button is positioned beside the associated form element and the datePicker only appears when the button has been activated (by using either the mouse or keyboard).
The activation button (actually an HTML link styled to look like a button – which keeps it in the document’s tabindex) is, by default, positioned directly after the associated form element within the DOM.
The bespoke positioning of the popup datePickers’ activation button
Should you wish to position a the activation button within a bespoke DOM node, just add the parameter “positioned” to the initialisation Object and give this parameter the ID of the DOM node that you wish to position the button within.
For example, the following code will instruct the script to create the button within the DOM node whose id is set to “someNodeId”:
var opts = {
formElements:{"inp1" : "d-sl-m-sl-Y"},
/* Tell the script to position the button within
a specific DOM node */
positioned : "someNodeId"
};
datePickerController.createDatePicker(opts);
Removing the button from the document tabindex
This can be done by using the “buttontabindex” property within the JSON passed to the script – this is explained in more detail within the section Setting Global configuration parameters.
Inline (non-popup) datePickers
If you wish to have the datePicker always displayed on screen i.e. with no activation button; just add the parameter “staticPos” to the initialisation Object and set it’s value to “true”. By default, the script adds inline datePickers to the DOM as the next sibling of the first associated form element.
The bespoke positioning of inline datePickers
Should you wish to position inline datePickers within a bespoke DOM node, just add the parameter “positioned” to the initialisation Object and give this parameter the ID of the DOM node that you wish to position the datePicker within.
For example, the following code will instruct the script to create the datePickler within the DOM node whose id is set to “someNodeId”:
var opts = {
formElements:{"inp1" : "d-sl-m-sl-Y"},
/* Tell the script we want a static/inline datePicker */
staticPos:true,
/* Tell it also to position the datePicker within a
specific DOM node */
positioned:"someNodeId"
};
datePickerController.createDatePicker(opts);
Date formats
The following list of conversion specifiers are valid for use within the date format:
| Specifier | Description |
|---|---|
| d | Day of the month, 2 digits with leading zeros (01 – 31) |
| j | Day of the month without leading zeros (1 – 31) |
| D | An abbreviated textual representation of a day (Mon – Sun) |
| l | A full textual representation of the day of the week (Monday – Sunday) |
| N | ISO-8601 numeric representation of the day of the week 1 (for Monday) through 7 (for Sunday) |
| w | Numeric representation of the day of the week 0 (for Sunday) through 6 (for Saturday) |
| S | English ordinal suffix for the day of the month: st, nd, rd or th |
| W | ISO-8601 week number of year, weeks starting on Monday: 1 – 53 |
| M | A short textual representation of a month, three letters |
| F | A full textual representation of a month, such as January or March |
| m | Numeric representation of a month, with leading zeros |
| n | Numeric representation of a month, without leading zeros |
| t | Number of days in the given month: 28 through 31 |
| Y | A full numeric representation of a year, 4 digits |
| y | A two digit representation of a year |
| sp | A whitespace character |
| dt | A full-stop: “.” |
| sl | A forward slash: “/” |
| ds | A minus/dash: “-” |
| cc | A comma: “,” |
The date format is constructed by simply listing the required format parts within a “-” delimited String; for example “d-sl-m-sl-Y” represents the date format of the type “13/03/1970”.
Date parsing
The script now has a much more forgiving approach to parsing dates and no longer forces you to rigidly enter dates in the date format associated with the form element.
The script will first check to see the form element’s value matches the associated date format; if not, it attempts to match the form element’s value against all possible combinations of the date format class.
For example, it is also possible to stipulate “m” as the month format part (i.e a zero filled two character representation of the month) but the script will accept a single character, an English short-hand or long-hand month name and if a language file has been loaded, a short-hand or long-hand month name in that language. For example, if the French language file has been loaded, the script will accept the values “01”, “1”, “january”, “jan” or “janvier”.
The associated form element’s value is automatically updated to reflect the desired date format i.e. the date format expected on the server.
Adding bespoke date formats to the parser
Should you wish to add a bespoke set of date formats to parse the user input against, just add the parameter “dateFormats” to the initialisation Object and associate an Array of alternative date formats with the required input.
opts = {
// Associate a datePicker with the form element "inp1"
// and give it a "d-sl-m-sl-y" date format
formElements:{"inp1":"d-sl-m-sl-y"},
// Tell the script to also parse user input against the
// following bespoke date formats
dateFormats:{"inp1":["Y-sl-m-sl-d","y-sl-m-sl-d", ... snip ... "d-sp-m-sp-Y"]}
};
datePickerController.createDatePicker(opts);
Displaying a status bar
To show a status bar, just add the parameter “statusFormat” to the initialisation object and set it’s value to the desired date format; for example
opts = {
formElements:{"inp1":"d-sl-m-sl-Y"},
// Tell the script to add a status bar and set it's date format
// The format below will create dates like:
// "Monday, 2 September 2009"
statusFormat:"l-cc-sp-d-sp-F-sp-Y"
};
datePickerController.createDatePicker(opts);
Showing Bespoke messages within the status bar
The script now enables you to show short, bespoke text messages within the status bar.
Setting bespoke messages for all datePicker instances
Setting bespoke titles to be shared across all datePickers can be achieved by calling the datePickerController.setGlobalVars method or using JSON within the script tag – this is explained in more detail within the section Setting Global configuration parameters.
Setting Bespoke messages for a single datePicker instance
To set messages only for a specific datePicker instance, just add the parameter “bespokeTitles” to the initialisation object and set it’s value to itself be an Object of key/value pairs where the keys represent a YYYYMMDD date and the values, the message to show for the date in question. For example:
opts = {
formElements:{"inp1":"d-sl-m-sl-Y"},
// Tell the script to add a status bar
statusFormat:"l-cc-sp-d-sp-F-sp-Y",
// Add bespoke messages for certain dates
bespokeTitles:{
// Show a title for the 25th of December for all years
"****1225":"Christmas Day",
// Show a title for the 13th of March for all years
"****0313":"My Birthday"
}
};
datePickerController.createDatePicker(opts);
This can also be achieved by calling the “setBespokeTitles” or “addBespokeTitles” methods of the datePickerController Object.
Highlighting days of the week
By default, Saturday and Sunday are highlighted in another colour (in a burgundy red for the demo). Should you wish other days of the week to be highlighted instead, just add the parameter “highlightDays” to the initialisation object and set it’s value to be a seven item Array of “0” or “1” values where each index represents a day of the week (index 0 represents Monday through index 6, which represents Sunday).
For example, the following code will set Monday and Tuesday to be highlighted instead of the default Saturday and Sunday:
var opts = {
formElements:{"inp1":"d-ds-m-ds-Y"},
// Highlight Monday (index 0) and Tuesday (index 1)
highlightDays:[1,1,0,0,0,0,0]
};
datePickerController.createDatePicker(opts);
Localisation
The script attempts to detect the language of the current HTML page (by attempting to grab the value of the HTML node’s lang attribute).
If a language code is successfully detected by the script, it then attempts to download the corresponding language file from the server. Should the language file not exist or the script is unable to detect a language, the datePicker display defaults to English.
Should the detected language have a region code set (i.e. en-US), the script will also attempt to download the language file associated with this region code.
Note: In order for the script to successfully download language files, they should be placed within a directory named “lang”, itself resident within the same directory as the datepicker.js file.
The following language files are currently available:
- American English
- Arabic (Thanks to hosam alaa eldien)
- Brazilian Portuguese (thanks to “g0dkar”)
- Catalan (thanks to Thomas Sjödin Dahl)
- Czech (thanks to Stano Matousek)
- Danish (thanks to Brian Jensen)
- Dutch (thanks to Alfred Vorsselman)
- Esperanto (thanks to Greg Naçu)
- Estonian (thanks to Kaius Karon)
- French
- Finnish (thanks to Keijo Mukku)
- German (thanks to “too many people to list”)
- Hebrew (thanks to Neil Osman)
- Hungarian (thanks to Hetesi Tams)
- Indonesian (thanks to Krishna Hendrakusuma)
- Italian (thanks to Valerio Pilo)
- Korean (thanks to Taehyun Kim)
- Latvian (thanks to Māris Kiseļovs)
- Norwegian (thanks to Geir Rune Brandt)
- Portuguese (thanks to Paulo Monteiro)
- Russian (thanks to Кирилл Асташов)
- Spanish (thanks to Augusto)
- Swedish (thanks to Henrik Marik)
- Turkish (thanks to Ogan Keskiner)
Many thanks to the above contributers for their time and effort in creating the localisations.
If you don’t see your language in the list, you can easily create one by using the language file creator script. I would, of course, appreciate a copy of the new file to add to the distribution – thanks!
Stipulating a language to use
You can disable the detect locale functionality and stipulate the required language by using JSON within the script tag – this is explained in more detail within the section Setting Global configuration parameters.
Alternatively, you can simply reference the desired language.js file before the datepicker.js file as is shown below:
<!-- Add the French "fr.js" file -->
<script type="text/javascript" src="/the/path/to/fr.js"></script>
<!-- Now add the datepicker.js file -->
<script type="text/javascript" src="/the/path/to/datepicker.js"></script>
The locale used when formatting dates that include non-numeric date parts
Should no language be explicitly defined for use as described above (i.e. the auto-detect functionality has kicked in and downloaded a language file from the server), the date displayed within the status bar and TD nodes will display using the downloaded locale but all dates formatted for updating the associated input’s value will display in English.
This is to make life easier on the server, as you know for certain that English (and not Spanish or French for example) dates are being returned for processing e.g. the English version “Friday, 13 March 1970” will be returned and not the French “Vendredi, 13 Mars 1970”.
Should a language be explicitly defined, the date returned to the server will always use this language.
The “first day of the week”
The first day of the week is currently stipulated within the downloaded language file. Should the language file not contain this setting, the first day of the week defaults to Monday.
Additionally, users can click on any of the day headers to dynamically set it as the first day of the week (or alternately, press the numbers 2-7 on the regular keyboard or numpad whenever the datePicker is keyboard accessible).
Limiting date selection i.e. setting date ranges
The datePicker enables you to define both a lower and upper limit for date selection.
To add a lower or upper limit, just add the parameters “rangeHigh” and/or “rangeLow” to the initialisation object and set their values to be a YYYYMMDD date format String; for example, the following code will limit date selection outside of the range 13/03/1970 to 20/12/1999:
var opts = {
formElements:{"inp1":"d-sl-m-sl-Y"},
// Set a range low of 13/03/1970
rangeLow:"19700313",
// Set a range high of 20/12/2009
rangeHigh:"20091220"
};
datePickerController.createDatePicker(opts);
Selectlists and automatic date ranges
As a selectlist can only ever stipulate a finite range, the datePicker will automatically create a higher and lower date limit using the selectlist data if the selectlist is used to represent the year part of the date format i.e. if the year select list starts at 1960 and ends at 1990, the associated datePicker will automatically disallow the selection of dates outside of this range.
Setting the date range dynamically
The upper and lower date ranges can also be set programmatically by calling the following two methods:
// Set the lower limit to be 01/12/2008
datePickerController.setRangeLow("myElementID","20081201");
// Set the upper limit to be 01/12/2009
datePickerController.setRangeHigh("myElementID","20091201");
Disabling day selection
Should you wish to disable certain days of the week, just add the parameter “disabledDays” to the initialisation object and set it’s value to be a seven item Array where each index represents a day of the week (index 0 represents Monday through index 6, which represents Sunday).
For example, the following code will disable both Saturday and Sunday:
var opts = {
formElements:{"inp1":"d-ds-m-ds-Y"},
// Disable Saturday (index 5) and Sunday (index 6)
disabledDays:[0,0,0,0,0,1,1]
};
datePickerController.createDatePicker(opts);
Disabling date selection
Should you wish to explicitly disable certain dates, just add the parameter “disabledDates” to the initialisation Object and set it’s value to be itself an object representing the dates to disable.
Wildcards can be used when stipulating the dates to disable by substituting the day, month or year parts with the wildcard character “*”.
var opts = {
formElements:{"inp1":"d-ds-m-ds-Y"},
disabledDates:{
// Single Date: Disable 25/12/2009
"20091225":1,
// Single Date: Disable the 25th of December for all years
"****1231":1,
// Date Range: Disable from the 1st of January 2009 to the
// 20th of January 2009
"20090101":"20090120"}
};
datePickerController.createDatePicker(opts);
Disabling date selection programmatically
Dates can be programmatically disabled by calling the setDisabledDates or addDisabledDates methods of the datePickerController Object.
Both methods accept an Object that represents the dates or date ranges to disable.
The setDisabledDates method will delete the current list of disabled dates before adding the new ones while the addDisabledDates method will add the dates to the list of dates already present.
Enabling date selection
Should you wish to explicitly enable only certain dates, just add the parameter “enabledDates” to the initialisation object and set it’s value to be an Object representing the dates to enable. All other dates will be unselectable.
Again, wildcards can be used when stipulating the dates to enable by substituting the day, month or year parts with the wildcard character “*”.
var opts = {
formElements:{"dp1":"d-ds-m-ds-Y"},
enabledDates:{
// Enable 25/12/2009
"20091225":1,
// Enable the 25th of December for all years
"****1231":1,
// Enable from the 1st of January 2009 to the 20th of January 2009
"20090101":"20090120"}
};
datePickerController.createDatePicker(opts);
Enabling date selection programmatically
Dates can be programmatically enabled by calling the setEnabledDates or addEnabledDates methods of the datePickerController Object.
Both methods accept an Object that represents the dates or date ranges to disable.
The setEnabledDates method will delete the current list of enabled dates before adding the new ones while the addEnabledDates method will add the dates to the list of dates already present.
Disabling the fade in/out animation effect
To disable the fade-in/fade-out effect, just add the parameter “noFadeEffect” to the initialisation object and set it’s value to “true”; for example:
var opts = {
formElements:{"inp1":"d-ds-m-ds-Y"},
// Don't fade in/out the datePicker
noFadeEffect:true,
};
datePickerController.createDatePicker(opts);
Setting a bespoke opacity
To set a bespoke final opacity for a datePicker, just add the parameter “finalOpacity” to the initialisation Object and set it’s value to to be an Integer value between 20 and 100; for example:
var opts = {
formElements:{"dp1":"d-ds-m-ds-Y"},
// Set a final opacity of 80%
finalOpacity:80
};
datePickerController.createDatePicker(opts);
Showing week numbers
To display week numbers, just add the parameter “showWeeks” to the initialisation object and set it’s value to true.
Removing the “Today” button from the U.I.
To remove the button, just add the parameter “noTodayButton” to the initialisation object and set it’s value to true.
Setting the default cursor date
By default, the cursor date is set to today’s date but there may be times when you wish the cursor to start at a date of your choice (when stipulating a range of valid dates, you may wish for the cursor to start in the middle of the range for example).
To set the cursor date to a date of your choice, just add the parameter “cursorDate” to the initialisation object and set it’s value to be a YYYYMMDD format date string.
Hiding the associated form elements
To hide the associated form elements, just add the parameter “hideInput” to the initialisation object and set it’s value to “true”. The form elements will then be given the class “fd_hide_input” which, if using the default stylesheet, sets the form element’s display property to none.
Disabling the drag effect
To disable the drag effect for an individual popup datePicker, just add the parameter “noDrag” to the initialisation Object and set it’s value to “true”.
Disabling the drag effect for all datePickers
Disabling the drag effect for all datePickers can be achieved by calling the datePickerController.setGlobalVars method or using JSON within the script tag – this is explained in more detail within the section Setting Global configuration parameters.
Filling the entire grid with dates
Should you wish to fill the entire grid with dates, just add the parameter “fillGrid” to the initialisation object and set it’s value to “true”.
Stopping the selection of “out-of-month” dates
By default, all dates on the calendar grid can be selected. To constrain the selection of dates to the current in-view month only, just add the parameter “constrainSelection” to the initialisation object and set it’s value to “true”.
Of course, this parameter is only taken into consideration when the “fillGrid” parameter is set to true.
Styling the datePicker
The datePicker currently ships with a rather basic CSS skin as, for simplicities sake, I purposely tried to style the entire thing using only one CSS file i.e. using no CSS files targetted specifically for Internet Explorer by using conditional comments.
The CSS file is well commented so altering the colours etc to suit your installation should be a relatively easy task.
Styling individual dates
To enable you to target and style individual dates, each TD node is now given two extra classNames of the format yyyymm-YYYYMM and mmdd-MMDD, where MM is replaced by the two figure month value and YYYY replaced by the four figure year value e.g. the TD node for the date 21/03/2007 will be given the classNames “yyyymm-200703” and “mmdd-0321”.
Setting Global configuration parameters
The script now accepts the passing of Global configuration parameters by using a JSON Object within the script tag – an example of this is shown below:
<!-- Notice how the JSON Object is passed within the script tag -->
<script type="text/javascript" src="/the/path/to/datepicker.js">
{
"nodrag":1,
"lang":"en",
"buttontabindex":true,
"cellformat":["Y-ds-m-ds-d"],
"titleformat":["Y-ds-m-ds-d"]
}
</script>
It’s worth noting that JSON notation doesn’t care about whitespace so the above code block could have been written in one line (with no line breaks).
Should the Douglas Crockford JSON parser exist within the global namespace, it is used to parse the JSON passed to the script.
Additionally, you can programmatically pass the JSON Object by calling the datePickerController.setGlobalVars method as is shown below:
<!-- Load the datePicker script -->
<script type="text/javascript" src="/the/path/to/datepicker.js"></script>
<!-- Now create our JSON Object and pass it to the "setGlobalVars" method -->
<script type="text/javascript">
// Create the JSON Object
var myJSON = {
// disable the drag & drop for all datePickers
"nodrag":1
};
// Pass it to the script immediately...
datePickerController.setGlobalVars(myJSON);
</script>
It is also worth noting that only the variables you wish to set need to be defined within the JSON Object; for example, should you only wish to disable the drag effect for all datePickers, you would use a JSON Object of the form:
{
"nodrag":1
}
The following parameters can be passed to the script using JSON:
- “nodrag”
- Accepts a Boolean value that, when set to ture, disables the drag effect for all datePickers.
- “lang”
- Accepts a valid rfc4646 language code e.g. “de” for German and, if required, an optional region subtag e.g. “de-CH”, and attempts to retrieve the corresponding language file from the server. This variable is only taken into consideration when passing the JSON between the script tags and has no effect if passed to the
setGlobalVarsmethod. - “cellformat”
- Accepts a date format String that is used to create the full date for each TD cell whenever the the associated datePicker has keyboard control. This parameter defaults to the value “d-sp-F-sp-Y” i.e. “13 March 1970”. Only the date format parts “d” or “j” are visibly displayed (which means that they have to be present within the date format), the rest is hidden from view but made available to screen-readers.
- “titleformat”
- Accepts a date format String that is used to create the title attribute for each TD cell. This parameter defaults to a screen-reader friendly value of “F-sp-d-cc-sp-Y” i.e. “March 13, 1970”
- “buttontabindex”
- Accepts a Boolean value that adds or removes all popup datePicker activation buttons from the document tabIndex (Note: Removing the buttons from the document tabIndex means that the associated datePicker cannot be controlled using the keyboard).
- “mousewheel”
- Accepts a Boolean value that enables or disables the mouseWheel activity for all popup datePickers.
- “describedby”
- Accepts a String value that represents the id of the DOM node to use for the ARIA described-by property.
- “finalopacity”
- Accepts an Integer value between 20 and 100 and sets the finalOpacity for all pop-up datePickers.
- “bespoketitles”
- Accepts an Object whose keys represent a YYYYMMDD date and whose values represent the Message to display within the statusbar for the date in question. Wildcards are accepted for both the Year and Month parts of a key.
The active “cursor”
An active cursor is necessary as the datePicker is keyboard accessible and keyboard users require a visual clue as to which date is currently active i.e. which date will be selected when the carriage return key is pressed.
The default sylesheet shows the selected date with a black border and black text and the current cursor position in blue.
Accessibility
The datePicker now includes features designed with assitive technologies in mind.
The table structure
The HTML table representing the datePicker has been marked up with a THEAD, TBODY and, if a status bar is used, a TFOOT.
The TH nodes representing the day names have their scope attribute set to “col” and the nodes representing the week numbers, if used,
have their scope attribute set to “row”.
A text file that lists the HTML used to create an example datePicker is available for those of you wishing to see the entire table structure – including classes, ARIA roles and states and hidden screen-reader text within the TD nodes etc.
The use of the TITLE attribute
Each focusable TD node has been given a title attribute that uses a default format of “F-sp-d-cc-sp-Y” to describe the cell’s representative full date, for example, “March 13, 1970”.
As some screen reader users disactivate the reading of title attributes, I also add the full date to each TD node but display only the day part of the date. All other date parts are hidden within span nodes that are positioned off-screen.
This means that screen reader users will still have a full date read aloud whenever the active “cursor” is given focus by the script.
By default, the TD cell date format is of the form “d-sp-F-sp-Y” i.e “13 March 1970” but both this and the title format can be changed to suit your needs by passing JSON within the script tag – this is explained in more detail within the section Setting Global configuration parameters.
Keyboard accessibility
All keyboard shortcuts now adhere to The DHTML Style Guide Working Group (DSGWG) recommendations.
Keeping the keyboard or mouse button depressed activates a timed increment i.e. there’s no need to repeatedly press the mouse button or arrow keys.
Pressing Enter selects the currently highlighted date, pressing Esc closes the datePicker without selecting a date and Space highlights todays date. Additionally, pressing 2 to 7 (using the numpad or regular keyboard) now sets the associated day to be the “first day of the week”.
The datePicker can be controlled using the keyboard in the following scenarios:
Inline datePickers
Inline datePickers are automatically placed into the document’s tab order – which means that they can “have focus”.
Once focused (i.e. the user has tabbed to the datePicker control), they can be controlled using the keyboard.
Popup datePickers
Should the datePickers associated “button” be activated using the keyboard (i.e. by focusing on the button and then pressing Enter), once launched, the datePicker will be able to be controlled using the keyboard.
Should the button be activated by a mouse click, the datePicker will launch without active keyboard control.
ARIA Roles & Properties
The following ARIA Roles have been set for the datePicker:
| Role | Associated HTML element |
|---|---|
| grid | Assigned to the TABLE |
| gridcell | Assigned to all TD nodes |
| row | Assigned to all TR nodes within the TBODY |
| columnheader | Assigned to all of the TH nodes representing the day of the week |
| rowheader | Assigned to all of the week number TH nodes (if present) |
| button | Assigned to a popup datepicker’s activation button |
The following ARIA Properties have been set for the datePicker:
| Property | Associated HTML element |
|---|---|
| hidden | Assigned to the wrapper DIV for all invisible popup datePickers, the first two TR nodes within the THEAD (used to display the day & month and navigation buttons) and disabled datePickers and activation buttons. |
| selected | Assigned to the currently selected date’s TD node |
| describedby | If the “describedby” global configuration parameter has been set, then this is used to set the describedby relationship |
| labelledby | If the associated form element has a label, the label is used to set the “labelledby” relationship |
| haspopup | Assigned to a popup datepicker’s activation button |
| disabled | Assigned to a disabled datePicker |
Callback functions
There are currently four callback events available, these are explained in more detail below:
- dateset
- Called when the datePicker updates the currently selected value – this is called whenever the associated form element’s onchange event fires or a date has been selected using the datePicker
- redraw
- Called whenever a datePicker updates the U.I.
- domcreate
- Called whenever the datePicker is added to the DOM
- dombuttoncreate
- Called whenever a popup datePicker’s activation button is added to the DOM
Stipulating callback functions is as easy as adding a “callbackFunctions” parameter to the initialisation Object and setting it’s value to be itself an Object of key/value pairs – where the key names one of the available callbacks and the associated value is an Array of functions to call.
A pseudo example of this is shown below:
var opts = {
formElements:{"inp1":"d-ds-m-ds-Y"},
// Stipulate some callback functions
callbackFunctions:{
"redraw":[function1, function2, ... functionN],
"dombuttoncreate":[function1, function2, ... functionN]
}
};
datePickerController.createDatePicker(opts);
Callback function arguments
All callback functions are passed a Javascript Object containing information on the status of the datePicker itself – this is detailed below:
// All callback functions receive the following Object...
{
"id": [the ID of the first form element stipulated within the initialisation object],
"date": [a Javascript Date Object representing the selected date or NULL if no date is selected],
"dd": [the date part of the selected date or NULL if no date is selected],
"mm": [the month part of the selected date or NULL if no date is selected],
"yyyy": [the year part of the selected date or NULL if no date is selected],
// NOTE: only the "redraw" callback gets the following additional parameters
"firstDateDisplayed": [a String representing the YYYYMMDD value of the first date shown],
"lastDateDisplayed": [a String representing the YYYYMMDD value of the last date shown]
}
Additionally, the “redraw” callback can return a Javascript Object that stipulates classNames to add to specific dates. For example, the following Object, when returned from the “redraw” callback function, will add the class “santa” to the TD that represents Christmas day 2009:
{
20091225:"santa"
}
As can be seen, all dates should be stipulated in a YYYYMMDD format within the returned Object.
The Javascript A.P.I
The datePickerController Object has a slew of public methods. These are described below:
| Method | Description |
|---|---|
setDebug(Boolean) |
Accepts a Boolean value that, when set to true, will make the script throw Javascript errors should a problem occur. When set to false, the script should silently fail whenever an error occurs. |
addEvent(obj, type, fn) |
A classic addEvent function (just in case you need one) |
removeEvent(obj, type, fn) |
A classic removeEvent function |
show(inputID) |
Makes a popUp datePicker associated with a form element having an ID of “inputID” appear (fade in) |
hide(inputID) |
Makes a popUp datePicker associated with a form element having an ID of “inputID” dissappear (fade out) |
destroyDatePicker(inputID) |
Removes the datePicker associated with the form element having an ID of “inputID” from the DOM (and browser memory) |
cleanUp() |
Loops through the current list of in-memory datePickers and checks to see if their associated form element exists within the DOM; if not, the datePicker is itself removed from the DOM (and browser memory). |
printFormattedDate(dt, fmt, useImportedLocale) |
Accepts three arguments, a Javascript Date Object, a date format String and a Boolean value (that instructs the script to use the imported locale or default to using the English locale). Returns a String. |
setDateFromInput(inputID) |
Instructs the datePicker associated with the form element having an ID of “inputID” to update it’s currently selected date by parsing the associated form element’s value. Usefull should you use Javascript to change the value of the form element in question. |
setSelectedDate(inputID, yyyymmdd) |
Instructs the datePicker associated with the form element having an ID of “inputID” to update it’s currently selected date to the “yyyymmdd” value passed as an argument. If the setting of the date is successfull, the associated form element values will be updated to reflect the new date. |
setRangeLow(inputID, yyyymmdd) |
Accepts two arguments, a String representing the associated form element ID and a second String representing a YYYYMMDD date. |
setRangeHigh(inputID, yyyymmdd) |
Accepts two arguments, a String representing the associated form element ID and a second String representing a YYYYMMDD date. |
parseDateString(str, format) |
Accepts two arguments, the first a fully formed date String (e.g. “13th March 1970”) and the second, a date format String that the first argument is parsed against. Returns a Javascript Date Object on success or FALSE on failure. |
setGlobalVars(JSON) |
Explained in more detail within the section Setting Global configuration parameters. |
dateValidForSelection(inputID, date) |
Accepts two arguments, a String representing the associated form element ID and a Javascript Date Object. Returns a Boolean value indicating whether the date is valid for selection or not i.e. within the date ranges and not disabled etc |
getSelectedDate(inputID) |
Accepts one argument, a String representing the associated form element ID. Returns a JavaScript date Object if the datePicker has a currently set date or FALSE if not. |
setBespokeTitles(inputID, titles) |
Accepts two arguments, a String representing the associated form element ID and an Object containing keys of the form “YYYYMMDD” and a String as the key’s associated value e.g. { 20091225:“Christmas Day” }. Calling this function will reset all currently set bespoke titles for the datePicker. Wildcards are accepted within the date Strings. |
addBespokeTitles(inputID, titles) |
Accepts two arguments, a String representing the associated form element ID and an Object containing keys of the form “YYYYMMDD” and a String as the keys associated value e.g. { 20091225:“Christmas Day” }. Calling this function will add the new messages to the list of current messages already present for the datePicker. Wildcards are accepted within the date Strings. |
setDisabledDates(inputID, dts) |
Accepts two arguments, a String representing the associated form element ID and an Object of “YYYYMMDD” value pairs to disable. Calling this function will reset all currently disabled dates for the datePicker. Wildcards are accepted within the date Strings. |
addDisabledDates(inputID, dts) |
Accepts two arguments, a String representing the associated form element ID and an Object of “YYYYMMDD” value pairs to disable. Calling this method will add the dates to the list of currently disabled dates. Wildcards are accepted within the date Strings. |
setEnabledDates(inputID, dts) |
Accepts two arguments, a String representing the associated form element ID and an Object of “YYYYMMDD” value pairs to enable. Calling this function will reset all currently enabled dates for the datePicker. Wildcards are accepted within the date Strings. |
addEnabledDates(inputID, dts) |
Accepts two arguments, a String representing the associated form element ID and an Object of “YYYYMMDD” value pairs to enable. Calling this method will add the dates to the list of currently enabled dates. Wildcards are accepted within the date Strings. |
disable(inputID) |
Adds the class “fd_disabled” to the datePicker associated with the form element having an ID of “inputID” (and, if necessary, the datePicker’s activation button) and stops all mouse and keyboard interaction with the datePicker. |
enable(inputID) |
Removes the class “fd_disabled” from the datePicker (and, if necessary, the datePicker’s activation button) and re-enables all mouse and keyboard interaction. |
createDatePicker(options) |
Creates a datePicker using the options Object passed in as an argument. |
For example, to use the cleanUp method, you would use the following Javascript:
datePickerController.cleanUp();
Bugs and foibles
The inevitable list of known cross-browser foibles:
Internet Explorer
The new accessibility enhancements make the U.I. sluggish in Internet Explorer, whose Javascript engine isn’t as fast as other A-Grade browsers.
Opera
Opera tends to never collapse the space left after a datePicker is initially created and then hidden – even if display:none and visibility:hidden are used. This means the demo page has a rather large gap of whitespace at the end of the page. Nasty.
Additionally, Opera adds a non-customisable “focus” outline to each TD node which encapsulates the hidden span elements within the TD. This makes the focus outline in Opera stretch beyond the left hand side of the viewport and actually hinders accessibility for people with low vision.
To stop this happening, I currently don’t add the hidden text in Opera. If anyone can show me a better, non-problematic method for hiding the text (whilst still making it available to screen readers) that does not incur the wrath of the Opera focus outline I’d be happy to hear it.
The License
The script is now released under a creative commons Attribution-Share Alike 3.0 license. Should you use the script within a commercial context (or are feeling generous today), please think about clicking the payPal donate button – it’s certainly not an obligation but it would most certainly put a smile on my face and perhaps goad me into maintaining the script in question on a regular basis.
If you require a dual license, just ask politely.
Demo, downloads and updates
View the updated date-picker demos or download an .zip of the necessary files.
The .zip download also includes a compressed version of the script (compressed using Dean Edwards Packer).
23/11/2009 (v5.4):
This release kindly sponsered by…
- Fixed a bug dealing with the “W” date part
- Fixed a bug within the “bespokeTabindex” code
- Fixed a bug within the “disabledDates” code
- Added the “bespokeTitles” functionality
- Added the “finalopacity” global configuration parameter
- Added Hebrew, Brazilian-Portuguese and Estonian language files
- Changed the “dateSet” callback to fire only when the input value’s onchange event fires or a date has been selected using the datePicker
01/10/2009 (v5.3):
- Fixed a bug within the code that handles the
dateFormatsparameter - Added the Hungarian language file (thanks again Hetesi)
30/09/2009 (v5.2):
- Fixed the enabled dates bug
- Added the ability to pass bespoke date formats within the “dateFormats” parameter
- Added the
setSelectedDatemethod to thedatePickerControllerObject - Fixed the “Y” and “y” ambiguity within both the documentation and the source code
- Commented all of the demo’s
16/09/2009 (v5.1):
- Fixed the dreaded “jumps two months” bug
- Removed the code that used the navigator’s language setting when deciding what language file to download. Only the HTML lang attribute is now taken into account
09/09/2009 (v5):
- First public release – fingers crossed
Previous Comments ~
Very Nice…
Best date-picker I’ve come across..
One question: enable/disable a range that has a start date (but no end date) or has an end-date but no start date? Specifically, I’ll like to disable all dates that are in the past..
d’oh… found it!
“Limiting date selection”… separate from “Disabling date selection”
awesome script
Hi,
Been thinking of using your Datepicker in a commercial product, but as I’m no lawyer I get a bit confused by all of the various licenses around. You state that “It’s free to use, even commercially”, but in the license it says that stuff built upon your work has to be be released under a compatible license. Does that mean that all products using your Datepicker have to use a CC-license as well?
Update by f.d: Hi Michael, it means that any use of the script in a commercial context has to release the script (and only the script) under a CC (or compatible) license. Well, that's the way I read it! Perhaps a more clued-up reader could elaborate?
Thanks for response!. That is what I hoped as well, but thought I would ask to be sure.
I really enjoy working with the date picker, the new Javascript API works great!
Great work with the new datepicker! The only disappointment was the missing class-name initialisation, but I managed to set that up myself.
However, the bug (“skip 2 months”-bug) I posted about for version 4.5 is still (partially) there. It occurs when I click on a date that has been disabled and then click the next or previous month button. In IE it’s not possible to click on disabled dates at all so the bug is a non-issue in IE. I’ve tried it in FF 3.5.3 but I guess it might be a problem for other modern browsers as well.
Do you have any idea on what the issue might be and if it is hard to fix?
Update by f.d: Hi Kristoffer, I'll try to fix the bug today and upload a new version. Thanks for the warning.
Hi!
I am trying, to no avail, to set my inline daypicker to be fully opaque (100% opacity) by adding finalOpacity:100 to the opts array. The default seems to be 90 (Datepicker.js line 276).
Shouldn’t this opacity value be set in the CSS file instead or at least default to 100?
Update by f.d: You found a bug - which I'll fix at some point tomorrow. Also, this could be set with CSS if the script didn't "fade" the datepicker in/out. Thanks for the warning!
In Opera I’ve noticed that the datepicker button (or text) does not appear when the input type is “date”. Is this by design since Opera renders it’s own datepicker for type=“date”?
Update by f.d: The datepicker will only ever attach itself to text input's and dropdown lists. A type="date" should let the browser display it's own datepicker wigit. Only Opera currently does just that - but all browsers will eventually follow the lead; so it's not a viable option to create a bespoke datePicker for input's of this type.
having a triple select dd mm yyy controlled by the datepicker seems to disable the 31 manual choice, not only for month with less day (eg.september): 31 october in not manually selectable. maybe it’s because the month we’re actually in in only of 30 ?
Update by f.d: Hi Jami, this behaviour was fixed in the 5.1 update - I can't reproduce the scenario when using the 3 selectLists on the demo page. Thanks for the comment.
thanks,
i suggest a modification in parseUILanguage to convert xml or html lang attribute from xx_XX format into xx format, something like languageTag = languageTag.toLowerCase().substring(‘0’, ‘2’); or better
Update by f.d: Hi Jami, imagining we have "br-PT" as the value of the lang attribute, the script will first attempt to load "br.js" and then the more specific "br-pt.js" - this means that the more specific language "br-pt.js" (if the file exists on the server of course) will take precedence over the less specific "br.js" file.
Removing the "-XX" (country code) completely would mean that the script could not offer discrete variations of the same language.
Hello, great code.
I have what I would think a fairly common issue that Im suprised is not covered…. So I have a form with about 12 form elements on it. I am using “tabindex” 1, 2, 3 etc…. problem is as I tab through the elements its skipping right over the calendar icon on to the next form element. Ive tried leaving a gap in the numbering so that hopefully it woudl land on it… but no luck. I turned on tabindexing in the configuration parameters, but seems to have no effect.
-A
Update by f.d: Hi Adam, I've assumed that you don't explicitly set tabindex within your forms (as a point of interest, why are you setting the tabindex?).
I suggest changing the code to enable you to pass an Integer value for a new tabindex property that would eventually be used to set a bespoke tabindex on the datepicker/button.
This is a really excellent set of code, but one question —
Any idea why the control would be showing up with oversized date squares? Also, changing font sizes doesn’t seem to make a difference.
Here’s a screenshot: http://tinypic.com/r/2nvtt0h/4
Taken from Firefox 3.5.3.
I’m using this code (within a more complex DOM): http://pastebin.com/m149aabd
Ah, nevermind — adding a DTD fixed the problem.
hi,
just a question about the possibility to enable / disable certain dates. i’m just looking for a datepicker where i can disable alle dates except the few ones that are chooseable.
Is it possible to disable all dates, but not “20091202”, “20091213”,“20100104” etc.?
I just didn’t find a solution for this, cause it’s doenst seem to be possible to combine “disabledDates” and “enabledDates”, is this true?
thx, brc
Update by f.d: Hi brc, if you disable dates, all other dates except the ones explicitly disabled are selectable. If you enable dates, all other dates except the ones explicitly enabled are non-selectable. I think it's the functionality you're looking for...
hi,
thx for this quick reply. that’s exactly what i thought of it. but in your examples (http://www.frequency-decoder.com/demo/date-picker-v5/)
no. 11: everything is enabled, but it shound’t it just be: ****1215; 20090901-20090922 ….?
is this a bug in your examples, or is there a miss understanding of my side?
Update by f.d: ...drum roll... you found a bug! I'll look into it today and get back to you with an update. Thanks for the warning!
Hi,
This is truly the date picker I was looking for. It’s elegant and I like the way it works. Thanks for making it free as well!
I think however I am having the same problem as brc above. I only want a few dates to be selectable and I cannot get it to work. Disabling works fine, as well as range limitation, but enabling fails. I also think example #11 does not behave properly and I have the same interpretation of how it shoud work as brc.
Update bx f.d: Hi Sébastian, check my reply to brc...
I have the same problem John E. has, but I already have a dtd and even if I copy the entire header from the demo the calender stays very big.
Great script though!
Update by f.d: Hi Sietse, try setting a pixel based font-size for both the TD and TH nodes within the CSS file. Glad you like the script!
I’m trying to add datepickers to input-fields by loop and did it like with this code:
I’m sure there is something wrong with my code. Perhaps I cannot use variables for: formElements: {dpid: “d-dt-m-dt-y”}
what can I do, that it works?
thanks for this great piece of code and all your work on this!
Update by f.d: Hi Bruno, you're correct, you cannot use variables in this way. I've updated the code block you posted to show how it can be done. Hope this helps.
Great code. Couple of minor comments:
Your code and documentation don’t appear to agree on which of y/Y is the 4-digit version
dateValidForSelection() is missing a “return”
Update by f.d: Hi Ali, I've fixed both problems and shall release an updated version of the script today. Thanks for the heads-up!
hi,
thanks for the relaunch. i’ve just upgraded from v4.4 to v5.1 and i have to say, i especially appreciate the reworked js api. things are much more easier now. :)
though, besides having the same y vs Y (2 vs. 4 number representation of the year) bug as J. Ali Harlow – which was not too hard to solve ;) – i cannot get the parser to work properly. in v4.4 i used setGlobalVars together with an array of formats to enable different formats in addition to the default one.
as far as your documentation of 5.1 tells me, this setting is gone? is there another possibility to enable other formats which the user may use to enter dates instead of the one handed over on formElements?
thanks for your help in advance.
greetz,
berny
Update by f.d: Hi Berny, I've just added this functionality back into the script for you. See the section "Adding bespoke date formats to the parser" for more info. Thanks for the interest.
hello,
great tool, but how is it possible to open the date picker onclick on the input field?
I would like to prevent that somebody tries to insert a date into the input field without using the date picker.
Thanks
Heiko
Update by f.d: Hi Heiko, this will never be functionality that I include in the script but it can easily be accomplished by setting an onclick event handler on the form element that calls the datePickerController.show method.
Tried you calendar picker. It was the only one in a long list that actually worked. And it’s flexible and good-looking, too! But I had to fix a few snags.
In datepicker.css you should explicitly specify e.g. “div.datePicker table {border-collapse: separate;}”, and other table properties that often are set by the user’s main css.
Congratulations to a great widget.
Cheers,
Per Lindberg
Update by f.d: Hi Per, I assumed that most people edited the CSS file to suit their installation - I should try to assume a lot less than I currently do! Can you send me a list of the changes (or the entire updated CSS file) to frequency.decoder at google's gutsy email app dot com? Thanks in advance,
Brian
Hi,
With regard to the bug mentioned by BRC, is it fixed or is it proving intractible? I downloaded the zip file yesterday and have the javascript running fine with the exception of the enabledDates method not limiting the selectable dates.
Update by f.d: Hi Vaughan, the bug's been fixed and a new version uploaded. Thanks for the interest.
hi f.d.,
thanks for the quick fix and the re-include! – please allow me one more question regarding the date-parser:
i wanted to add the formats
+ mm/dd/yyyy
+ dd-mm-yyyy
+ dd.mm.yyyy
which imho look like [“m-sl-d-sl-Y”,“d-ds-m-ds-Y”,“d-dt-m-dt-Y”] in js. then i tried 02/03/2010 and it results in 3rd of February 2010 which is correct. unfortunately, 03.02.2010 or 03-02-2010 is parsed to the 2nd of March. 20.03.2010 and 03/20/2010 work just fine. i’ve already also tried to use ‘j’ instead of ‘d’ and ‘n’ instead of ‘m’ with the same results…
is this a bug or am i doing something wrong?
my best,
berny
Update by f.d: Hi Bernie, that's the big problem with d/m/y and m/d/y dates - it's impossible in some cases to say if a date belongs to one format or the other and the script must be attempting to parse the European date format before it's American counterpart. I'll try to set up a test case today to see why the passed bespoke date formats are not being tested in order... Thanks again for the feedback.
Update to my update: Ho hum, I was stupidly adding the bespoke dateFormats to the end and not to the start of the format list which meant the automatically generated formats were given priority. I've updated the script again with a fix. Thanks again for the feedback.
hi f.d.,
thanks for the patch. – unfortunately, i’m still having a hard time with the parser:
if i use [“m-sl-d-sl-Y”,“d-ds-m-ds-Y”,“d-dt-m-dt-Y”], everything works fine for instances of american dates where the day could mean the months and vice-versa (03/05/2009). the european dates still don’t parse correctly.
thus, i’ve also tried to change the priority in which dates are parsed to [“d-ds-m-ds-Y”,“d-dt-m-dt-Y”,“m-sl-d-sl-Y”] and then it works for european dates and not for american ones.
maybe you can again have a look on this issue.
cheers,
berny
the TD node for the date 21/03/2007 will be given the classNames “yyyymm-200703” and “mmdd-0321”
Hi, I’m not sure what the corresponding CSS code would be to style a particular date using two separate classes? Can you supply an example? Pretend I’m stupid :)
Update by f.d: the className "cd-20070321" will also be given to the TD cell that represents the date 21/03/2007. Use that to style the cell instead of the other two.
Hi! First of all, thanks for this great tool! I would like to use this to set only year span, i.e. for the admin area of an hotel to set hte high season and low season days. In this case I don’t need to let the user change the year, so I could easily let the datepicker only show the current year from january to december, but i don’t like to see the year at the top, is it possibile to use the datepicker for only one year and not let the user see the year? Also, not saving the year to the db would be great, but I think i can do this using the split feature right?
Thanks
Update by f.d: Use CSS to remove the year from the visual display. As for not saving the year within the DB, that's entirely up to you - I have no control over what you do with the data on the server!
Great work F.D , but i was having some issues using the date picker.
1. Date picker logo does not appear in front of the element.
2. also the size of the date picker is too large as compared to the size poping in the examples given.
Am I missing out or not following a proper way of using it, and does restriction of HTML version have a considerable impact on it?.
Update by f.d: Hi Rick, without a URL I can't look into the dissappearing "button" issue you are having (is the image uploaded to your server and have you changed the image path within the CSS file to point to this location?)... datepicker size is due to not using a doctype.
Is it possible to use multiple instances of that date picker?
Instead of targetting the textbox ID, is it possible to use a css class in order to apply the datepicker to all date fields in my application?
Sometimes I need to add dynamic date rows and I think the current version can’t handle it…
We are currently using the jquery UI datepicker, which is pretty good IMHO, BUT we would like to replace it with the Unobtrusive Date-Picker Widget V5 because of the accessibility features.
Does anyone here implemented that datepicker in the jQuery library?
example:
$(document).ready(function() { $(‘input:text#jqueryDatePicker’).createDatePicker(opts…);
});
Regards
Update by f.d: Hi Charles, no, all form elements require an ID, CSS classes won't cut the mustard here. Also, you're jQuery syntax is all wrong. I'm no jQuery expert but I imagine it's something like:
When adding a new form element, just call the createDatePicker method again...
The jQuery U.I. datepicker is good though - why use mine when there's an accessible alternative already available for the JS framework you're currently using? (I'm just being inquisitive)
bug!
fix
try { datePickerController.loadLanguage(); } catch(err) {}
to
try { datePickerController.loadLanguage(); } catch(err) {}
Update by f.d: Well caught Jeroen - I've updated the language files and the language file creator script within the download... Thanks for the warning!
Hey Thanx FD, I did checked, images are getting uploaded on server, and regarding the DOC type is there a way of using it in normal HTML Docs, way of using in the sense like limiting it to normal size. If so then please pass the solution bro.
Update by f.d: Hi Rck, normal HTML documents should have a doctype - but let's not get into that argument. The font-size issue is easily solved by:
Instructions on solving the problem are also given within the CSS file itself! Have a look…
First of all, great piece of code, i’ve searched for hours, and yours is the best by far!
I’m trying to create arrival and departure datepickers, i’ve got the two inputs working seperately, but i want them to work together; in particular when someone selects an arrival date, the departure date automatically selects a date 1 week later.
I’m assuming i need to set up a callbackFunctions using dateset which calls a function that i create that has datePickerController.setSelectedDate(“dd”, newdd);
I’ve tried to get it to work but my knowledge of javascript is ‘novice’ at best!
Could you give me an idea of how to do this please.
Update by f.d: Hi Philip, try the following link http://www.frequency-decoder.com/demo/date-picker-v5/booking/ and check the source code to see how it was done. Be warned though - it's very beta code and may/will have to be tweaked to suit your installation. Good luck.
Hi, I’ve been working on creating a helper to make this datepicker work with Cakephp, I’ve gotten pretty good progress and I really love the way you made this datepicker.
I have one and only one problem though. Cakephp (connected to the database) has its way of creeping time with the date (since the database date is set with time included), and I can use your datepicker to save things into the database, but when i “edit the date” the page is loaded and the date is in the form y-ds-m-ds-d 00:00:00 therefore when you click on the datepicker the date does not load (as the format seems unrecognized). When you manually remove the time zeros, then when you click on the picker, the date is auto set properly with the corresponding text field date.
I looked into your documentation and I couldn’t find a way to have the picker completely ignore anything after the date (like 00:00:00) to have it preload the date properly into the picker.
Do you have any suggestions on how to help this? Do you think you could fix it with a small fix from your picker?
I would greatly appreciate it.
All the best,
Germán
Update by f.d: You could tweak the code to remove time parts automatically (by using a regExp for example). You would have to change the "parseDateString" function in order to do this... Hope this helps!
Brian, you’re the man! (sorry for the american lingo, but if the cap fits!)
Tested your booking example and it looks great, not implimented it on the site i’m doing yet but wanted to say thanks, and to let you know there is a paypal donation on its way. Keep up the great work
Update by f.d: Nah - yer da man (Irish version). Glad the booking form example helped you out and many, many thanks for the donation!
“the className “cd-20070321” will also be given to the TD cell that represents the date 21/03/2007. Use that to style the cell instead of the other two.”
OK, I made a file called “highlightdates.css” with this code:
.cd-20101227 { background-color:#66FF66; }
December 27 2010 doesn’t have a colored background. What am I doing wrong?
Update by f.d: Try reading up on CSS specifity. Your rule isn't "strong" enough...
Can’t find any reference to setting weekend days (Fridays and Saturdays)
Update by f.d: Hi Neil, can you be a bit more specific please - I don't know what you mean by "setting weekend days". Thanks.
Figured out the problem – the gradient .gif in the sample datepicker.css was covering up my highlighted dates. Once I removed that from the background of div.datePicker table td, div.datePicker table tbody th and added an !important to the date class, it worked.
Your date picker really rocks !
I have a question, is it possible to highlight dates instead of weekdays?
Or set a css on specific dates?
My case is it, I have a list of disabled dates but in another screen, I still want them to be Highlighted/Flagged but I also want them to be selected…
Guy
Forget me for my post, I found how to do it
“the className “cd-20070321” will also be given to the TD cell that represents the date 21/03/2007. Use that to style the cell instead of the other two.”
TIM: I had the same problem and I fix it with the following css
<style type=“text/css”> body div.datePicker table tbody td.cd-20091022 { background:rgb(255,0,255); color:rgb(255,10,10) !important; } </style>
Hi,
another question to your great tool:
I use callback “dateset”. This callback seems to be used on the initial filling of the input field as well when the date is changed by the datepicker itself.
I want to handle only the changes that come through changing the date manually with the datepicker. Is there a posibillity to distinguish between the two different actions?
Thanks a lot,
Heiko
Update by f.d: Hi Heiko, the "dateset" callback is thrown every time the datePicker internally updates it's date - which, of course, happens whenever the datepicker is created. You can use a counter in your code to avoid the dateset callback logic from being ran...
Very nice script. I like the fact that it can be styled and themed using CSS. Very easy to use and easier to implement. The only con that I have experienced is that you can not use flash anywhere near the calendar. But hey it’s still a great tool.
Update by f.d: Hi webmasterfx, can you give more detail on the Flash problem? I think the Flash movie requires certain parameters (wmode?) if you wish the datePicker to show above it.
Hi
I love your datepicker and am trying to customise it for my uses. But I could do with a bit of advice.
I want to use an inline datepicker as a sort of event planner. I have my redraw method working fine so that when a date is picked the method goes to my database, fetches the dates to be disabled and disables them. But I would like to know how to get the datepicker to do the same when it is first loaded so that the initial month displayed shows the disabled dates for that month. I have tried the dateset and domcreate callbacks to no avail. Help much appreciated.
Update by f.d: Hi Janice, you can pass the initial list of disabledDates during the datePicker creation. Hope this helps, Brian.
Great! Thanks for using european date format ;-) and for not building it on top of jquery, mootools, or what-have-you…
Thanks Brian
disabledDates worked a treat…
I see there is a method getSelectedDate() that is not documented here. Is it safe to use it?
Update by f.d: Yep, it returns a JavaScript Date on success or a null/false when no date is selected. I'll add it to the article a.s.a.p. Thanks for the warning!
Hi,
Is it possible to link two calendars? In the sense that when I select a date in calendar 1 it will default a date in calendar 2? What I’d like to do is have a user pick a start date and default the end date to 2 days after the start date they selected. Great script!!! Thanks in advance for any suggestions.
Update by f.d: Check http://www.frequency-decoder.com/demo/date-picker-v5/booking/
Hi,
there seems to be a bug with setting the “bespokeTabindex” option. It is not working because in the code it is later referenced as “bespokeTabIndex” (with a capital “I”).
And a feature request: “finalOpacity” should be a global configuration parameter.
Hi,
This Calender is this best out there. I like it very much.
I was wondering, if it is possible to show an additional (custom) text in the status bar when you hover over a date. So for example, when i hover with the mouse over “01-01-2009” instead the date is shown in the status bar it would say “new years day”.
Thanks for the help!
Update by f.d: Hi Tom, you would have to hack the script a bit - perhaps to let the redraw callback object also stipulate bespoke text phrases to place into the footer. I'll think about integrating this as a feature into the next release. Thanks for the interest.
Love the new script, but am wondering if there is a bug in the low-range-date. In Demo 5 it does not limit the range to 35 days before today, I can go back exactly 2 months…
I want the low range to start on the day after tomorrow, or in other words all dates up till and including today and tomorrow disabled. I tried today.getDate() + 1 but that doesn’t work.
Update by f.d:
Hi Frits, I'll look into it next week when I get back. Thanks for the warning...It was a bug in the demo code, not the datePicker script (I forgot to increment the getMonth() value by one - a common JS Date Object mistake). Thanks for the warning - I've updated the demo to fix the bug.
This is perfect! Only, I’m having trouble setting up a function that is called on “dateset”. I saw your comment about using a counter in the code, but I’m not so great with javascript. I don’t suppose you post some code to fire “dateset” only once?
Update by f.d: Hi Mike, dateset is called every time the calendar updates (or nullifies) the currently selected date. If you're looking for a function that is called only once, then use the domcreate function. I'm just about to head off for a weeks non-keyboard related antics and shan't be able to provide a code sample. Apologies!
Hi, your script has always been very cool to use, but I was wondering if it was safe enough to jump from version 4.4 to version 5.3? I read you almost entirely rewrote the codebase, but is the API strictly the same? (or at least backward compatible). Thanks for your answer.
Update by f.d: The A.P.I has changed considerably. The script no longer uses className initialisation etc. Apologies - but it took too much dead code to make it backwards compatible so I made the choice to start afresh.
Great widget!
I also tried to use the callbackFunctions method “dateset” to use the selected date but the event is fired twice, at the click on the datepicker icon and when I select a date! Can you pass any options to fire the event only once (only after the date is selected)?
My code:
http://pastebin.com/m400bc48a
Really nice date tool!!
But it wont give the week number by using the option -W.
When I use this configuration
formElements:"d-sl-m-sl-Y-sp-W"
It write this into the input element:
19/11/2009 NaN
Update by f.d: Hi Iija, you must have found a bug... I'll look into it for you. Thanks for the warning.
Hi,
I am having a problem with disabling a range of dates in my inline datepicker using disabledDates in the datepicker set up. If I specify a range within the month on view it works fine e.g.
disabledDates:20091110"
but if the range goes into the next month then the dates aren’t disabled at all e.g.
disabledDates:20091120"
is there something I am doing wrong?
Thanks
Janice
Regarding the problem with disabledDates the code is at
http://pastebin.com/m1718d45c
To recap – when I specify a range of dates the span 2 different months the dates aren’t disabled. If the 2 dates are within the month on view in the inline datepicker it works fine. Just wondering if I was doing something wrong.
Thanks
Janice
Update by f.d: Hi Janice, should be fixed in the new release. Thanks for the warning.
Thanks for the response.
When do you think the new release will be?
Janice
Update by f.d: Hi Janice, I updated the script yesterday - check the update log at the bottom of the page for the gory details.
I hope I’m not missing something fundamental but I’m trying to get your great UDP to accept and output a (ideally) yearless day of year. I’m no javascript expert and am having difficulty working out what I do and don’t need to change. I’ve added “z” back in as a date specifier and can output day of year in place of day of month – can you give me any pointers as to where I should be looking next to allow a user to use “z” as the whole date format?
Thanks
Update by f.d: Hi Damion, I don't really understand what you mean (sorry!) but I know that each datePicker has to be able to parse the day, month and year parts from the combined form elements - Using "z" and just "z" to represent a date will not work. Apologies.
Great script! This does everything I set out to do. I have a question however. Is there a way to style the pop-up to go to absolute position 0,0 (upper left corner). It seems to open just under the button used to activate the pop-up. If I use the “Positioned: parameter and point it to a Div ID elsewhere in the document that moves the button and pop-up. I want the button in-line but the pop-up to be positioned at 0,0. The reason for this is the control itself runs in a fairly small iframe and it causes scroll bars.
Thanks!
Scott
Update by f.d: Hi Scott, I'm afraid this functionality isn't (yet?) available - feel free to hack the source to get the datePicker to appear where you would like it.
Thanks f.d. – your answer confirms what I had thought about having a day of year-only date. I think what I’ll have to do is to create hidden elements for month and year.
Just out of interest, why was ‘z’ part of v4 (but I believe not fully implemented?) and not v5.
Thanks again, Damion
Update by f.d: Hi Damion, it was removed as it's a nightmare to try to calculate a "correct" date when using it (daylight savings madness doesn't help any etc). Again - apologies!
Firstly, let may say how much I love your datepicker widget – probably the best, most accessible such widget I have come across! Now, I’ve been asked to not show the calendar button, and instead have the calendar appear when the associated input field is clicked. Is this something that is supported, and if not is it something that could be easily achieved?
Update by f.d: You can hide the button using CSS and add an onmousedown event to the associated form element that calls the showDatePicker() method. This will have the calendar appear but without the integrated keyboard control.
Sounds good. I’m using Prototype in my pages, and although trying to follow your instructions, I’m not having much luck:
$(‘element_id’).observe(‘click’, showDatePicker);
$(‘element_id’).observe(‘click’, show);
$(‘element_id’).observe(‘click’, datePickerController.showDatePicker);
$(‘element_id’).observe(‘click’, datePickerController.show);
Not sure how to get access to the showDatePicker method after I have called datePickerController.addDatePicker(opts)
Update by f.d:
I was looking for an example of the setDisabledDates function. I am creating an Array of strings with the proper format but the datepicker does not appear to be honoring the the collection of dates. The dates are formatted as “20091225” so I don’t think the format is the issue.
first of all thanks for your wonderful code.
I am looking for another requirement. Can i get this with small change in code.
The requirement is i need only one Inline calender and multiple text field that get the date when click on the text field.
Can this be archived using the code above.
Update by f.d: Sorry, a datePicker is tied to one set of form elements, not multiple - and I can't even think of a quick hack that would work. Apologies.
Good Day FD!
I’d like to know how to create date pickers dynamically. Currently, I have a form that dynamically creates row in a table. One of the columns is shows the date. On another column, is an “Edit” button which will turn all the columns of that row it belongs to to editable fields. I wanted to change the date column to become a date picker too but I can’t seem to get it to work. Help?
A very strange bug occurs when the calendar is set to May 1998 (I have tried many other dates and they all work OK except for May 1998 — may be there are others but I didn’t discover them) … Here is how to reproduce this bug:
1. In the demo page at http://www.frequency-decoder.com/demo/date-picker-v5/ go to demo 1 (or any other demo) and type any date prior to May 1998, for example 12/04/1998.
2. Click the calendar icon to open it.
3. Try to navigate to next month or next year and won’t be able to.
The above bug seems to be triggered only when May 1998 is shown … navigation is working fine for any other date after that or before that.
Update by f.d: Hi Ahmad, I can't reproduce the bug, even when following the steps given above. Is there a URL I can look at? Send it to frequency.decoder at google's shiny email app dot com if you want to keep the address private. Thanks.
Great job! This picker is excellent. I love the tolerance on the date inputs (so users can enter the dates in any way they want) and the keyboard accessibility.
I do think I’ve found a bit of a bug however. I cannot input dates in the Czech date format being picked up from Windows, as it seems the parseDateString function doesn’t like them.
The Czech dates use, for the month abbreviations, roman numerals. The picker is fine with some numerals but not others: i.e. “II” (Feb), “VI” (June) and “XI” (November) all work ok, but all other months don’t seem to be handled properly by the parseDateString function.
The format I’m using is “d-dt-M-dt-Y”. The locale is set as follows:
var fdLocale = {“fullMonths”:[“leden”,“únor”,“březen”,“duben”,“květen”,“červen”,“červenec”,“srpen”,“září”,“říjen”,“listopad”,“prosinec”],“monthAbbrs”:[“I”,“II”,“III”,“IV”,“V”,“VI”,“VII”,“VIII”,“IX”,“X”,“XI”,“XII”],“fullDays”:[“pondělí”,“úterý”,“středa”,“čtvrtek”,“pátek”,“sobota”,“neděle”],“dayAbbrs”:[“po”,“út”,“st”,“čt”,“pá”,“so”,“ne”],“titles”:[“Previous month”,“Next month”,“Previous Year”,“Next Year”,“Today”,“Open Calendar”,“wk”,“Week [0] of [1]”,“Week”,“Select a date”,“Click & Drag to move”,“Display “[0]” first”,“Go to Today’s date”,“Disabled date:”],“firstDayOfWeek”:0};
This results in the following call returning empty string: parseDateString(“12.III.2006”, “d-dt-M-dt-Y”)
Which in turn results in an empty string being returned from: getSelectedDate(<input id>)
OS: Windows Vista
Browsers: any
Sorry can’t provide a url.
Cheers
Carl
Correction: it’s the 1 digit months that are working – “I” (Feb) “V” (May) and “X” (October) (not “II”, “VI” and “XI” as I stated above).
As an earlier poster stated, in the code bespokeTabIndex sometimes has a lowercase i (bespokeTabindex). Took me a while to figure out why it wouldn’t work.
Very nice utility. Thanks for sharing.
Have a question. Could we disable dates based on, viz. “Disable every 3rd Monday in July.”
That’s absolutely a charm for calendar needs! Thank you for sharing the code with us.
Hi, Im using Datepicker V. 4.4 without problem. I have been checking the “Easter disable” example to follow it. Im trying to disable dinamically TODAY, TOMORROW, SATURDAY & SUNDAY days. And I cant figure out how to do it.
Could you help me with this, please?
I dont know if this is the correct place to this question, but i have been looking for a way to contact you and I havent found it.
Thanks in advance.
Hi,
Thanks for your DatePicker, it’s very good and nice.
I have a feature request, if worth implementing it – DatePicker constructor to check itself if a DatePicker already exists for the given element ID.
I had an issue with ajax called html and solved it by adding datePickerController.destroyDatePicker(‘element ID’); before
datePickerController.createDatePicker({formElements:{‘element ID’:’…’});
Thanks.
Hi,
Could you tell me how to change the total width and height of the popup.
It appear too big in my page.
Do I need to use css to do that.
Sorry I’m a newbee…
Thanks a lot in advance
Best regards
Hi there, great work on the date picker, I was also using the Matt Krause one but it caused a conflict with another javascript library so it had to go.
I have one small problem – in my app, the option values for the month select box run 0-11 instead of 1-12 like in your examples… is there a quick way to compensate for this in your code?
Cheers
Paul
Hi from Spain, great job.
I would like to know if there is a way to highlight dates in a range instead of days of the week, for example, days from 20100201 to 20100215, in the same way as it’s possible to disable ranges of dates.
I love the calendar.
Can you ‘splain how – using two date fields, each with its own script giving me 2 popup calendars – I can input using calendar1 entered date1 (start date) and it inputs that date as (start) date+1 in date2 (end date) into the date2 field and opens calendar 2 indicating date2 as selected?
I’d appreciate any help.
Thank you very much for this great widget – I love it!
I have a question:
How can I pass the Element Id (calendarId in the below example)dynamically to the opts tag?
function weeklyCalendar(calendarId) {
var opts = {
formElements:{calendarId:“m-sl-d-sl-Y”},
showWeeks:false,
statusFormat:“l-cc-sp-d-sp-F-sp-Y”,
fillGrid:true,
constrainSelection:true
};
datePickerController.createDatePicker(opts);
}
I’d appreciate any help.
Thank you for the datepicker. It’s great. I do have a very weird problem, though. In IE, the calendar button isn’t visible until I move the mouse over the location where it is hidden. This doesn’t happen in my development environment but does in my test environment. Any ideas?
Thank you for making this. Seriously thank you. Major bacon saving here.
Thank you for calender. It is very nice. I am using it in my site.
I’m having trouble with the calendar disappearing every time I click on it; trying to drag or click on any button involves the calendar disappearing (being hidden) from the page. If I take my code and put it into a fresh page, it stops doing this. However, the code I use to invoke the date-picker is the same. I don’t have any fancy focus-grabbing happening, so I’m not sure what exactly is happening… any clues? I know it’s annoying that I don’t have any code to post, but I can give my parameters for the date-picker:
One form element with “Y-ds-m-ds-d”
noFadeEffect: true
finalOpacity: 100
Oh, and this is happening in the latest developer build of Chromium on Ubuntu, Firefox 3.0.17 (I know, I know…) on Ubuntu and the latest developer build of Google Chrome on Windows 7.
Thanks!
You’ve saved me oodles and oodles of time. Thanks. I only help with people’s websites part time, so this is a life-saver.
hi… how do we style individual dates (such as i want the color of 4 april 2010 and 14 april 2010 on the calender to be different from others)
as you said above, to style individual dates, “each TD node is now given two extra classNames of the format yyyymm-YYYYMM and mmdd-MMDD, where MM is replaced by the two figure month value and YYYY replaced by the four figure year value e.g. the TD node for the date 21/03/2007 will be given the classNames “yyyymm-200703” and “mmdd-0321”…
i don’t really get what you meant by that, in order to achieve what i’m trying to do..
thanks a lot for your precious time and code ;)
Hi, nice widget. Is it possible to clear the ranges somehow?
@Val S
I had the same problem. The formElements object should have separate key/value pairs for the element’s ID and then for the date format. That would have saved me many hours of frustration. But actually there is a solution, just add an empty formElements to opts after creating opts. Then set the values manually.
using your example:
function weeklyCalendar(calendarId) {
var opts = {
showWeeks:false,
statusFormat:“l-cc-sp-d-sp-F-sp-Y”,
fillGrid:true,
constrainSelection:true
};
opts.formElements=new Object();
opts.formElements[calendarId]=“m-sl-d-sl-Y”;
datePickerController.createDatePicker(opts);
}
Hi !
A very nice script ! Thank you for sharing it with us ;-)
However, if someone could tell me how to use the selected date, it would be very appreciated !
For example, save date in $mydate (a php variable), I do some
$myDate = datePicker;
…
//I do some actions on it
…
$url = “index.php?date=”.$myDate;
//User is automatically redirected to the URL with selected date variable without any submit button help.
Thank you for your help !
I am loving this, but is there a way to get it to actually select today when you click on the today button? Right now when you click on the today button it simply highlights the day and then an additional step is necessary to click on the highlighted day. Is it possible to skip this step and just have today enter the current date in the input field?
thanks again!!!
I changed the setSelectedDate() method so it can work with Date objects aswell, not only Strings. This might be useful if you want to set the date to a value coming from another DatePicker, by calling the getSelectedDate() method of the latter, which returns a Date object.
The changed method can be found here:
http://pastebin.com/UVhAEJTi
Maybe others find this useful aswell.
Kudos and a possible bug…
First of all…nice implementation of ARIA date picker pattern. Keyboard nav works as expected for keyboard users who don’t need assistive technology.
As for the possible bug, keyboard nav doesn’t work with assistive technology. When I start listening to the page with JAWS, I can use the keyboard to open the widget but I can’t navigate inside the widget.
I think for keyboard navigation to work properly with screen readers, ARIA widgets have to be wrapped inside a page element having role=“application”. For more info, refer to: http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#application
Now the details of how to reproduce this…
My config: OS: Win XP, Browser: FF 3.6.3, Scree reader: JAWS 11.0.1430
(#1) Keyboard testing without JAWS:
Press Tab key til focus is on Demo 1 calendar icon. Press Enter to activate calendar icon. Datepicker opens; focus is on 13/03/2009. Press Down Arrow key. Focus moves to 20/03/2009. Press Enter. Datepicker closes; 20/03/2009 displayed in date field.
(#2) Keyboard testing with JAWS:
Repeat key presses in #1. ISSUE: Everything works fine up through datepicker opening. BUT can’t seem to use the keyboard to move around inside the datepicker. Pressing TAB moves me to Demo#2 date field. Alternatively, pressing Down Arrow key, takes me to the instructional text above Demo #2.
Cheers!
Hello,
this widget is awesome ! Big thanks !
However I can’t make rangeHigh to work… I tried several dates, even without rangeLow but still nothing.
Here is my little piece of code : http://pastebin.com/PQzTvebB
Thanks in advance for your help.
Excellent piece of work.. … I know I can modify the CSS to alter the display but is there a simple way to reduce the size of the control when displaying the calendar, without reducing the font size from 12.
Tks
Aidan
Great job!!!!!!!
I spent nearly 70 hours trying to add this in breezing-forms for Joomla, but I made it in the end!! Its a 2 minute job really…..and what a great combination!!!!!!!!
Your calendar is so much better and easier to configure than the JSCal2-1.8 people recommend for joomla (or breezingforms for Joomla) and that guy wants $80 for it!!
Also I think yours has more features….or at least more useful ones!!
The only slight negative is that it is attached to a unique ID and every time I clone the form the ID is new, so I have to change it … that’s all its needed though everything else works straight away.
Oh and I tested the greek file i translated for you….
Well, the intonation is visible on the upercase text (there is no intonation on the Greek upercase text) but its not bad at all!!!
Thank you for this excellent software :)
Hello,
As Pete mentions a few posts up, it would be great, even necessary, to have the parameters as pairs. I am trying to upgrade to v5 in a large application where I’m using many calendards, some of which are called on Ajax generated inputs, as I thought it would cut down on the amount of JS needed, but there is no way to have global parameters for the calendars (besides the few mentioned on this page), and because of the problem discussed above, it’s also hard to make a single function to create calendars based on passed IDs.
Pete’s workaround works to a point. For example, I want all my imputs to have the same main date format, and I can also pass a target container ID, and the workaround works fine for that.
But I also want different date formats to be parsed and reformatted in case the users type them by hand, and that means that each “create” call needs to have the list of all the various accepted formats. It seems to me that v4 would parse certain formats automatically.
It would be great also if we could specify those things (main input format, additional dateFormats) in the global var definition. Even better actually.
I have another question quickly: as the datePicker parses dateFormats and puts them back the right way into the input, it does not do it when the date is out of the allowed range, and just leaves the entered date there, unformatted. It would be very cool, and potentially save a lot of work, if it could simply revert the date to one of the limits in those cases. It obviously knows that the date is out of range, since it does not reformat it, so could it also reset the date to either the rangeLow or rangeHigh setting depending on the date entered?
Thanks a lot for this great tool.
Of course, the workaround does work for dateFormats as well, but still, it’s clunky:
opts.dateFormats=new Object();
opts.dateFormats[elemId]=[“Y-sl-m-sl-d”,“y-sl-m-sl-d”,“Y-ds-m-ds-d”,“Y-m-d”,“d-m-Y”];
Hello,
Firstly thanks for this utility!!
I’d like to put your web datepicker in my class work, and I would like to put a reference to the author of the datepicker, how should I put it?
sorry if my english is not very good
Thanks. Bye
Many many many thanks!
Your product is awesome!
Comments are currently closed but feel free to contact me on twitter with your questions or suggestions - I’d love to hear from you.