Skip to content
Browse files

Added a new config option and made the API easier

* New config option "dateParseFallback"
* Ability to pass Javascript Date Objects as arguments to API functions
* Option "staticPos" replaced by "nopopup" (both continue to work)
* Whitespace cleanup
  • Loading branch information...
1 parent 3e8a843 commit 501962cd7371cc9706e6c4eb267661490678af64 @freqdec committed Jul 18, 2013
Showing with 1,252 additions and 1,290 deletions.
  1. +16 −21 README.textile
  2. +107 −103 css/datepicker.css
  3. +1 −1 css/datepicker.min.css
  4. +34 −26 css/demo.css
  5. +164 −202 index.html
  6. +723 −732 js/datepicker.js
  7. +27 −26 js/datepicker.min.js
  8. +180 −179 language/index.html
View
37 README.textile
@@ -1,35 +1,30 @@
-h1. Unobtrusive datePicker Widgit
+h1. Yet Another Datepicker
-An attempt at writing a flexible, framework free, feature-rich and accessible datepicker.
+An attempt at writing a flexible, framework free, feature-rich and accessible datepicker.
-h2. At a glance
+h2. At a glance...
-* Keyboard shortcuts adhere to "The DHTML Style Guide Working Group (DSGWG) recommendations":http://dev.aol.com/dhtml_style_guide#datepicker
+* Keyboard shortcuts adhere to "The DHTML Style Guide Working Group (DSGWG) recommendations":http://access.aol.com/dhtml-style-guide-working-group/#datepicker * Accessibility enhancements including support for ARIA Roles and States
* Accessibility enhancements including support for ARIA Roles and States
* The script can parse and format dates using a subset of the "PHP date":http://www.php.net/date/ conversion specifiers
* 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
-* 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
-* Includes a "smart" localisation option and has been translated into 28 locales
-* Can display an optional status bar and week numbers within the U.I.
+* Bespoke dates can be disabled/enabled and "*" wildcards used to stipulate the dates in question
+* Bespoke days of the week can be highlighted
+* Works with any combination of text inputs or select lists
+* DOM friendly - the datepicker is only added to the DOM when actually required
+* Includes a "smart localisation" option and has been translated into many languages
+* Can display an optional status bar and week numbers
* Can be dragged within the viewport by the user
* 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, focus, active and disabled states, be arbitrarily positioned within the DOM and removed from the document tabindex if so desired
-* The "button" updates to show a small cursor should the associated form element contain a valid date
-* Inline datePickers possible (i.e. no button activation is required), are automatically added to the document tabindex and can be arbitrarily positioned within the DOM
-* A bespoke final opacity can be defined and the fade in/out animation effect disabled completely
-* The entire grid can be filled with dates
+* Inline datepickers are now available, are automatically added to the document tabindex and can be arbitrarily positioned within the DOM
+* A bespoke final opacity can be defined and if desired, the fade in/out animation effect disabled
+* The entire U.I. grid can now be filled with dates
* The "Today" button can be removed from the U.I.
* Fully skinnable with CSS
-* Compatible down to IE6
+* Compatible down to IE6
-h2. Demo
+h2. Demo & Documentation
-A comprehensive "demo":http://www.frequency-decoder.com/demo/datePicker/ showing most of the available functionality is available.
-
-h2. More Info
-
-Full info on using the script can be found within the associated "blog post":http://www.frequency-decoder.com/2011/10/11/unobtrusive-accessible-datepicker-widgit-v6
+A comprehensive "demo":http://freqdec.github.io/datePicker/demo/ and full "documentation":http://freqdec.github.io/datePicker/ is available.
View
210 css/datepicker.css
@@ -5,7 +5,7 @@
info can be found in the header of the minified file.
F.Y.I: Here's the HTML produced for each instance of the datePicker, in this
- case associated with a form element whose id is "demo-1"
+ case associated with a form element having an id of "demo-1"
<div id="fd-demo-1" class="date-picker drag-enabled" aria-describedby="fd-dp-aria-describedby" aria-labelledby="demo-1_label" aria-hidden="false" role="application" dir="ltr">
<div>
@@ -60,16 +60,16 @@
*/
-/*
- Hide the datepickers associated input by using a className
+/*
+ Hide the datepickers associated input by using a className
*/
.fd-hidden-input
{
display:none;
}
-/*
- Screen reader class - used to hide spans inside each cell from the visual
- display. See: http://webaim.org/techniques/css/invisiblecontent/
+/*
+ Screen reader class - used to hide spans inside each cell from the visual
+ display. See: http://webaim.org/techniques/css/invisiblecontent/
*/
.fd-screen-reader
{
@@ -78,30 +78,30 @@
top:auto;
width:1px;
height:1px;
- overflow:hidden;
+ overflow:hidden;
-moz-outline: 0 none;
outline: 0 none;
}
-/*
- The wrapper div
+/*
+ The wrapper div
*/
.date-picker
{
- position:absolute;
+ position:absolute;
z-index:9999;
text-align:center;
/*
Change the font-size to suit your needs. The following line is for the demo
that has a 14px font-size defined on the body tag.
-
- All other rules are "em" based and inherit from the font-size set here.
+
+ All other rules are "em" based and inherit from the font-size set here.
*/
font:900 0.8em/1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Verdana, Arial, "Lucida Grande", sans-serif;
background:transparent;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
- -o-user-select:none;
+ -o-user-select:none;
user-select:none;
/*
Set the fade in/out animation time here. This is used for browsers that
@@ -115,6 +115,11 @@
-o-transition:opacity .75s ease-in-out;
transition:opacity .75s ease-in-out;
}
+.date-picker div
+ {
+ border:1px solid rgba(255, 255, 255, 0.8);
+ border-radius:0.8em;
+ }
/*
The following rule is used whenever CSS Animations are supported by the
browser
@@ -123,18 +128,18 @@
{
opacity:0;
}
-/*
- Styles for the static datePickers
+/*
+ Styles for the static datePickers
*/
.static-datepicker
{
- position:relative;
+ position:relative;
top:5px;
left:0;
margin-bottom:1.5em;
}
-/*
- The iframe hack to cover selectlists in IE6
+/*
+ The iframe hack to cover selectlists in IE6
*/
.iehack
{
@@ -146,8 +151,8 @@
border:0;
display:none;
}
-/*
- The activation "button" created beside each input for popup datePickers
+/*
+ The activation "button" created beside each input for popup datePickers
*/
.date-picker-control span
{
@@ -171,7 +176,7 @@
box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
border-radius:2px;
}
-/*
+/*
A base64 encoded image-sprite is used for the activation button. IE6 and 7
get fed "normal" png images within the rule that follows.
*/
@@ -193,29 +198,29 @@
visibility:visible;
text-decoration:none;
vertical-align:text-bottom;
- resize:none;
+ resize:none;
}
-/*
- IE6 & 7 fed "normal" png images
+/*
+ IE6 & 7 fed "normal" png images
*/
.oldie .date-picker-control:link,
.oldie .date-picker-control:visited
{
- /*
- IE7 gets a non-base64 encoded image sprite of the base64 encoded image
+ /*
+ IE7 gets a non-base64 encoded image sprite of the base64 encoded image
declared above. That's all you have to do for IE7 support as it inherits
the background-position declarations used to reposition the sprite
*/
- *background-image:url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-sprite.png);
- /*
- IE6 gets the filter treatment and an individual image for each animation
+ *background-image:url(http://www.yourdomain.com/the/path/to/the/images/datepicker-sprite.png);
+ /*
+ IE6 gets the filter treatment and an individual image for each animation
state. This pattern is repeated for all other image-based rules within the
stylesheet
*/
_background-image:none;
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-normal.png');
- }
-/*
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-normal.png');
+ }
+/*
If the datepicker has a valid date then use a different icon for the
activation button to let the user know. It's a little detail but it's the
little things in life etc
@@ -224,17 +229,17 @@
.date-picker-dateval:visited
{
background-position:0 -108px;
- }
-/*
+ }
+/*
Again, IE6 gets a "normal" png image from the server. Rinse, repeat.
*/
.oldie .date-picker-dateval:link,
.oldie .date-picker-dateval:visited
{
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-selected.png');
- }
-/*
- Hover states etc for the activation button
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-selected.png');
+ }
+/*
+ Hover states etc for the activation button
*/
.date-picker-button-active:link,
.date-picker-button-active:visited,
@@ -244,19 +249,19 @@
{
background-position:0 0;
}
-/*
- IE 6 activation button hover states
+/*
+ IE 6 activation button hover states
*/
.oldie .date-picker-button-active:link,
.oldie .date-picker-button-active:visited,
.oldie .date-picker-control:focus,
.oldie .date-picker-control:hover,
.oldie .date-picker-control:active
{
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-focused.png');
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-focused.png');
}
-/*
- Disabled activation button
+/*
+ Disabled activation button
*/
.date-picker-control-disabled:link,
.date-picker-control-disabled:visited,
@@ -266,38 +271,39 @@
background-position:0 -36px;
cursor:default;
}
-/*
- IE 6 disabled activation button
+/*
+ IE 6 disabled activation button
*/
.oldie .date-picker-control-disabled:link,
.oldie .date-picker-control-disabled:visited,
.oldie .date-picker-control-disabled:hover,
.oldie .date-picker-control-disabled:active
{
- _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-disabled.png');
+ _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-disabled.png');
}
.date-picker-control-disabled:hover span,
.date-picker-control-disabled:active span
{
box-shadow:none !important;
}
-/*
+/*
Feed IE6 the following rule, IE7 should handle the min-width declared
- previously.
+ previously.
*/
.oldie .date-picker-control
{
_width:18px;
}
-/*
- IE, older Safari & Opera. Seperate CSS rule seems to be required.
+/*
+ IE, older Safari & Opera. Seperate CSS rule seems to be required.
*/
.date-picker-control
{
display:inline-block;
+ outline:none !important;
}
-/*
- Default datepicker "button" styles
+/*
+ Default datepicker "button" styles
*/
.date-picker th span
{
@@ -311,8 +317,8 @@
font-weight:bold;
cursor:pointer;
}
-/*
- The "month, year" display
+/*
+ The "month, year" display
*/
.date-picker .month-display,
.date-picker .year-display
@@ -323,8 +329,8 @@
font-weight:normal;
font-size:1.2em;
}
-/*
- Generic button class for Next & Previous (both month & year) buttons
+/*
+ Generic button class for Next & Previous (both month & year) buttons
*/
.date-picker .prev-but,
.date-picker .next-but
@@ -337,15 +343,15 @@
.date-picker .prev-but,
.date-picker .next-but,
.date-picker .today-but
- {
+ {
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
- transition:all .2s ease-in-out;
+ transition:all .2s ease-in-out;
}
-/*
- Hover effect for Next & Previous (month, year) buttons
+/*
+ Hover effect for Next & Previous (month, year) buttons
*/
.date-picker .prev-but:hover,
.date-picker .next-but:hover,
@@ -356,8 +362,8 @@
.date-picker .prev-but:hover,
.date-picker .next-but:hover
{
- /*
- Uncomment this if you want a scale effect...
+ /*
+ Uncomment this if you want a scale effect
-webkit-transform:scale(1.6);
-moz-transform:scale(1.6);
@@ -368,8 +374,8 @@
text-shadow:0 2px 1px rgba(0,0,0,.4);
*/
}
-/*
- Today button
+/*
+ Today button
*/
.date-picker .today-but
{
@@ -382,10 +388,10 @@
padding-top:0.3em;
text-transform:uppercase;
vertical-align:middle;
- cursor:pointer
+ cursor:pointer
}
-/*
- Disabled buttons
+/*
+ Disabled buttons
*/
.date-picker-disabled .prev-but,
.date-picker-disabled .next-but,
@@ -400,14 +406,14 @@
{
color:#aaa;
cursor:default !important;
- opacity:1;
- }
+ opacity:1;
+ }
.date-picker .prev-but.fd-disabled:hover,
.date-picker .next-but.fd-disabled:hover
{
- /*
+ /*
Uncomment this if you have uncommented the "scale" rules above
-
+
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
@@ -416,8 +422,8 @@
*/
text-shadow:0 -1px 1px rgba(255,255,255,.8);
}
-/*
- The gradient background image
+/*
+ The gradient background image
*/
.date-picker table,
.date-picker td,
@@ -440,11 +446,11 @@
.oldie .date-picker .date-picker-unused,
.oldie .date-picker .month-out
{
- *background-image:url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-gradient.gif);
- /*
- Remove from IE6 as it has a bug that never caches images on dynamically
+ *background-image:url(http://www.yourdomain.com/the/path/to/the/images/datepicker-gradient.gif);
+ /*
+ Remove from IE6 as it has a bug that never caches images on dynamically
created elements which results in one http request being made for each
- cell of each table rendered by the script.
+ cell of each table rendered by the script.
*/
_background-image:none;
}
@@ -454,16 +460,16 @@
empty-cells:show;
border-spacing:2px;
border-collapse:separate;
- position:relative;
+ position:relative;
margin:0;
padding:0;
- border:1px solid #ccc;
+ border:1px solid #ccc;
background-position:0 -20px;
text-align:center;
- padding:0.3em;
+ padding:0.3em;
width:auto;
height:auto;
- color:#555;
+ color:#555;
font-size:1em;
border-radius:0.8em;
box-shadow:0px 0px 5px #aaa;
@@ -493,7 +499,6 @@
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
-
.date-picker table:after
{
right:10px;
@@ -509,52 +514,50 @@
{
display:none;
}
-
/*
- Common TD & TH styling
+ Common TD & TH styling
*/
.date-picker td,
.date-picker tbody th
- {
- border:0 none;
+ {
padding:0;
text-align:center;
- vertical-align:middle;
+ vertical-align:middle;
cursor:pointer;
background-position:0 -35px;
width:3em;
- height:3em;
- overflow:hidden;
- outline:transparent none 0px;
- border:1px solid #ccc;
+ height:3em;
+ overflow:hidden;
+ outline:transparent none 0px;
+ border:1px solid #cfcfcf;
text-transform:none;
font-weight:normal;
text-shadow:0 1px #fff;
- border-radius:2px;
+ border-radius:3px;
}
.date-picker th
{
border:0 none;
- padding:0;
+ padding:0;
font-weight:bold;
color:#333;
text-align:center;
- vertical-align:middle;
+ vertical-align:middle;
text-transform:none;
}
.date-picker .date-picker-week-header
- {
- border:1px solid #dcdcdc;
- font-style:oblique;
+ {
+ border:1px solid #dcdcdc;
+ font-style:oblique;
background:transparent;
- cursor:default;
+ cursor:default;
}
.date-picker .date-picker-thead .date-picker-week-header
- {
+ {
border:0 none;
- cursor:help;
+ cursor:help;
}
-/*
+/*
The "mon tue wed etc" day header styles
*/
.date-picker .date-picker-day-header
@@ -605,7 +608,7 @@
}
.oldie .date-picker .date-picker-today
{
- *background:#fff url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-today.gif) no-repeat 0 0;
+ *background:#fff url(http://www.yourdomain.com/the/path/to/the/images/datepicker-today.gif) no-repeat 0 0;
}
.date-picker .month-out.date-picker-highlight
{
@@ -660,11 +663,12 @@
color:rgb(100,130,170);
text-shadow: 0px 1px 1px #fff;
box-shadow:0 0 6px rgba(100,130,170,.6);
+ background-size:cover;
}
.oldie .date-picker .date-picker-hover,
.oldie .date-picker .month-out.date-picker-hover
{
- *background:#fff url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-cursor.jpg) no-repeat 0 0;
+ *background:#fff url(http://www.yourdomain.com/the/path/to/the/images/datepicker-cursor.jpg) no-repeat 0 0;
}
/*
The "disabled days" style
View
2 css/datepicker.min.css
@@ -3,4 +3,4 @@
absolute path to the folder in which you have uploaded the images on your
server and then delete this comment!
*/
-.fd-hidden-input{display:none}.fd-screen-reader{position:absolute;left:-999em;top:auto;width:1px;height:1px;overflow:hidden;-moz-outline:0 none;outline:0 none}.date-picker{position:absolute;z-index:9999;text-align:center;font:900 .8em/1em "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Verdana,Arial,"Lucida Grande",sans-serif;background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;opacity:1;-webkit-transition:opacity .75s ease-in-out;-moz-transition:opacity .75s ease-in-out;-ms-transition:opacity .75s ease-in-out;-o-transition:opacity .75s ease-in-out;transition:opacity .75s ease-in-out}.date-picker.fd-dp-fade{opacity:0}.static-datepicker{position:relative;top:5px;left:0;margin-bottom:1.5em}.iehack{position:absolute;background:#fff;z-index:9998;padding:0;margin:0;border:0;display:none}.date-picker-control span{display:block;width:18px;height:18px;overflow:hidden;margin:auto 0;resize:none;outline:0}.date-picker-button-active span,.date-picker-control:focus span,.date-picker-control:hover span,.date-picker-control:active span{outline:0;box-shadow:0 0 5px rgba(40,130,170,0.7);border-radius:2px}.date-picker-control:link,.date-picker-control:visited{position:relative;display:-moz-inline-box;border:0 none;padding:0;margin:0 4px;background-color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAB+CAYAAAAp+EF2AAAD8ElEQVRo3u2Zu0scXxTHz8zcXR0H8UnEIpXyQ8TGaJNCFAlqEUyTMlUaWTC/IoR0vxQ2vz8hfZJGIki2URARkkbxhSJq4avI7uqK7x2V9XF/93v83WGzmIezKVLcL1zmvubcc+49w352xurr63tZW1s7EI1GPSkloVxfX5Ou55f8sYuLCz+TybwRMNLf3++dn5+jk8vl5eU39Ww2G/TlX6+urrzZ2dkBAU9gZGVlBZ08If+qC9r5Y6WlpeQ4jmf/714oI9orhCuOj49peXmZDg4OCDo6OqKSkhKswm0stL+/T5WVlWTbNvchVLQxhjpsiEgkQm1tbWwANy8uLlJ9fT2Vl5dzGzePjY1RR0cH1zFvfX2dOjs7ybIs2tjYoOHhYbLhHizrmyBcc0tuH25GKLhCqMOGQEgTExMcKzQ1NUX/vntHjoiS1l8lxbwYdHJywl4cHh5y3/b2NteF53kcGjYQK66urtL1wzYSKjQtMfyRuru7eRz7hT1FG8L8oaEhsmEAljFJb/Bt0uMoOiwdGmxwaOPj48FebG1tUTqRIqfYDSaXp1I0MjLCdZXFtLa2xp7BSCKRuDnxWCwmVZxSnYZU8Ut1QjKVSkl1rFJtolSTZTweD9o7OztydHRUai0sLMiWlhYpckPTp5J7YmgLIQhpokPMVRAakml6eppc1+WbsJG+73Pq64TE4wNDqOs80qeIMHGSAqvV1dUFmQsjjY2NQeZCu7u71NzcHGQ5rq2trUH+wYbARKxeVVXFhlCHERQtpAjGtYeYU11dze2ysrKbFFEe+Ol02kNCYlIymeRnDZN1/DjJmZkZbus8gnGMbW5u0unpqW8pF1/W1NQMKPc8TOQHULCjwROPvqKiIq5jQYSv2zCiUuANGRkZGRl9R5ZiyGcK/2KK3NyQDHmmfn3fgiFjiiHdAhjSVQwZA0O6v4EhXcOQIRiSQSudZjrRAt7dmSHn5uaooaGBKioqAg9Qurq6fsiQ4jaG1GHk8uKdGRJuK/Tjk9NaWloKQvseQ3Jo7e3tvCcwNjk5SU1NTQEvoYA8enp6uL63t0fz8/NBaDjlwcFBMgz5awx5phLQLZAhz8CQzxRDxpR7bkiGPFMp8Nb8RhgZGRn9iCHNe0jDkIYhzXtI8x7SvIc0MjIyuhNDPn/x9NP9qsbeomgxhWHI7MU5HWa/xgWMvOj/mwpgSJqZlb0CnhTKkMKJkmHIkN+y3394T8Xql1QrEomG+5b9+MkjevCgmRxbqJVtev3qn59+y76dIS2HjdgolhOOIUEeXwY+M23chGPxzeZb9p/EkBk/w39iCmFI/9QnMOSnezX3eiMiQmEYEkaSiWT8P0zZxbn5chQoAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:0 -72px;min-width:18px;line-height:1;cursor:pointer;visibility:visible;text-decoration:none;vertical-align:text-bottom;resize:none}.oldie .date-picker-control:link,.oldie .date-picker-control:visited{*background-image:url(http://www.yourdomain.com/the/path/to/the/images/datepicker-sprite.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-normal.png')}.date-picker-dateval:link,.date-picker-dateval:visited{background-position:0 -108px}.oldie .date-picker-dateval:link,.oldie .date-picker-dateval:visited{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-selected.png')}.date-picker-button-active:link,.date-picker-button-active:visited,.date-picker-control:focus,.date-picker-control:hover,.date-picker-control:active{background-position:0 0}.oldie .date-picker-button-active:link,.oldie .date-picker-button-active:visited,.oldie .date-picker-control:focus,.oldie .date-picker-control:hover,.oldie .date-picker-control:active{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-focused.png')}.date-picker-control-disabled:link,.date-picker-control-disabled:visited,.date-picker-control-disabled:hover,.date-picker-control-disabled:active{background-position:0 -36px;cursor:default}.oldie .date-picker-control-disabled:link,.oldie .date-picker-control-disabled:visited,.oldie .date-picker-control-disabled:hover,.oldie .date-picker-control-disabled:active{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-disabled.png')}.date-picker-control-disabled:hover span,.date-picker-control-disabled:active span{box-shadow:none!important}.oldie .date-picker-control{_width:18px}.date-picker-control{display:inline-block}.date-picker th span{display:block;padding:0;margin:0;text-align:center;line-height:1em;border:0 none;background:transparent;font-weight:bold;cursor:pointer}.date-picker .month-display,.date-picker .year-display{display:inline;text-transform:uppercase;letter-spacing:1px;font-weight:normal;font-size:1.2em}.date-picker .prev-but,.date-picker .next-but{font-weight:normal;font-size:2.4em;font-family:georgia,times new roman,palatino,times,bookman,serif;cursor:pointer}.date-picker .prev-but,.date-picker .next-but,.date-picker .today-but{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.date-picker .prev-but:hover,.date-picker .next-but:hover,.date-picker .today-but:hover{color:#a84444}.date-picker .today-but{text-align:center;margin:0 auto;font-weight:normal;font-size:1em;width:100%;text-decoration:none;padding-top:.3em;text-transform:uppercase;vertical-align:middle;cursor:pointer}.date-picker-disabled .prev-but,.date-picker-disabled .next-but,.date-picker-disabled .today-but,.date-picker-disabled .prev-but:hover,.date-picker-disabled .next-but:hover,.date-picker-disabled .today-but:hover,.date-picker .prev-but.fd-disabled:hover,.date-picker .next-but.fd-disabled:hover,.date-picker .fd-disabled,.date-picker .fd-disabled:hover{color:#aaa;cursor:default!important;opacity:1}.date-picker .prev-but.fd-disabled:hover,.date-picker .next-but.fd-disabled:hover{text-shadow:0 -1px 1px rgba(255,255,255,.8)}.date-picker table,.date-picker td,.date-picker tbody th,.date-picker .day-disabled,.date-picker .date-picker-hover.day-disabled,.date-picker .date-picker-unused,.date-picker .month-out{background-color:#fff;background-image:url(data:image/gif;base64,R0lGODlhJgBbAMQAAAAAAP////7+/v39/fz8/Pv7+/r6+vn5+fj4+Pf39/b29vX19fT09PPz8/Ly8vHx8fDw8O/v7+7u7u3t7ezs7Ovr6+rq6unp6ejo6Ofn5+bm5uXl5f///wAAAAAAAAAAACH5BAEAABwALAAAAAAmAFsAAAX/4CaOZGmeaKqubOu+cCzPWm3feK7vfO//wCAvQywaj8ikcslsOp/QJWZKrVqv2Kx2y+16v9qLeEwum8/otHqttrjf8Lh8Tq/b7/aKfs/v+/+AgYKDhIWGgRSJiouMjY6PkJGSkROVlpeYmZqbnJ2enRKhoqOkpaanqKmqqRGtrq+wsbKztLW2tRC5uru8vb6/wMHCwQ/FxsfIycrLzM3OzQ7R0tPU1dbX0Q3a29zd3t/g4eLj4gzm5+jp6uvs7e7v7gvy8/T19vf4+fr7+gr+/wADChxIsKDBgwYTKFzIsKHDhxAjSpwoEYHFixgzatzIsaPHjx4PiBxJsqTJkyhTi6pcybKly5QGYsqcSbOmzZs4c+rMWaCnz59AgwodSrSo0aIEkipdyrSp06dQo0qdSrUq1AFYs2rdyrWr169gw4odS/argLNo06pdy7at27dw48qd6zaA3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0ueTLmy5cuYM2vezLmz58+gQ4tOHAIAOw==);background-repeat:repeat-x;background-position:0 0}.oldie .date-picker table,.oldie .date-picker td,.oldie .date-picker tbody th,.oldie .date-picker .day-disabled,.oldie .date-picker .date-picker-hover.day-disabled,.oldie .date-picker .date-picker-unused,.oldie .date-picker .month-out{*background-image:url(http://www.yourdomain.com/the/path/to/the/images/datepicker-gradient.gif);_background-image:none}.date-picker table{table-layout:auto;empty-cells:show;border-spacing:2px;border-collapse:separate;position:relative;margin:0;padding:0;border:1px solid #ccc;background-position:0 -20px;text-align:center;padding:.3em;width:auto;height:auto;color:#555;font-size:1em;border-radius:.8em;box-shadow:0 0 5px #aaa}.date-picker table:before,.date-picker table:after{content:"";position:absolute;z-index:-2;bottom:15px;left:10px;width:50%;height:20%;max-width:300px;max-height:100px;-webkit-box-shadow:0 15px 10px rgba(0,0,0,0.7);-moz-box-shadow:0 15px 10px rgba(0,0,0,0.7);box-shadow:0 15px 10px rgba(0,0,0,0.7);-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}.date-picker table:after{right:10px;left:auto;-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}.oldie .date-picker table:before,.oldie .date-picker table:after{display:none}.date-picker td,.date-picker tbody th{border:0 none;padding:0;text-align:center;vertical-align:middle;cursor:pointer;background-position:0 -35px;width:3em;height:3em;overflow:hidden;outline:transparent none 0;border:1px solid #ccc;text-transform:none;font-weight:normal;text-shadow:0 1px #fff;border-radius:2px}.date-picker th{border:0 none;padding:0;font-weight:bold;color:#333;text-align:center;vertical-align:middle;text-transform:none}.date-picker .date-picker-week-header{border:1px solid #dcdcdc;font-style:oblique;background:transparent;cursor:default}.date-picker .date-picker-thead .date-picker-week-header{border:0 none;cursor:help}.date-picker .date-picker-day-header{cursor:help;border:0 none;padding:0 0 .2em 0;text-transform:lowercase;height:auto}.date-picker .date-picker-statusbar{cursor:default;font-weight:normal;text-transform:uppercase;letter-spacing:.1em;border:0 none;background:#fff;height:2.8em}.date-picker .date-picker-unused{border-color:#dcdcdc;cursor:default!important;background-position:0 -25px}.date-picker .date-picker-title{width:auto;height:auto;padding:.4em 0}.date-picker .date-picker-today{background:#fff url(data:image/gif;base64,R0lGODlhKwEoAJEAAKnT6v////X6+gAAACH5BAAAAAAALAAAAAArASgAAALXjI+py+0Po5y02ouz3lz4D4biSJbmiabqyrbuC8fyLAcCgOf0zvf+DwwKhyJbDkdMKpfMpnNo1D2n1Kr1GowCsNyu99uNgsfksnlnPKvX7LbA5o7L51Q4/Y7P8+z6vv9fwgc4SJgnWIiYuHao2OgY9hgpecU4aXkJVIm5yQmj2QkaavIpWmpKapraiaraasnqGusIK1tbSGub64er23vH6xvsBixcfEZsnAyGrNyMxewcPQUtXb1EbZ0thK3d3cPtHV4jTl5Xft4Ejr4eyO6e9R7/LU8/UwAAOw==) no-repeat 0 0}.oldie .date-picker .date-picker-today{*background:#fff url(http://www.yourdomain.com/the/path/to/the/images/datepicker-today.gif) no-repeat 0 0}.date-picker .month-out.date-picker-highlight{color:#b87676}.date-picker .date-picker-highlight{color:#a86666}.date-picker-focus .date-picker-hover{-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25)}.date-picker .date-picker-hover,.date-picker .month-out.date-picker-hover{background:#fff url(data:image/jpg;base64,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) no-repeat 0 0;cursor:pointer;border-color:#6482aa!important;border-color:rgba(100,130,170,.7)!important;color:#6482aa;text-shadow:0 1px 1px #fff;box-shadow:0 0 6px rgba(100,130,170,.6)}.oldie .date-picker .date-picker-hover,.oldie .date-picker .month-out.date-picker-hover{*background:#fff url(http://www.yourdomain.com/the/path/to/the/images/datepicker-cursor.jpg) no-repeat 0 0}.date-picker .day-disabled{color:#888;cursor:default;text-decoration:line-through;background-position:0 -15px}.date-picker .month-out{border-color:#ddd;border-color:rgba(220,220,220,0.8);color:#aaa;background-position:0 -25px}.date-picker .date-picker-selected-date{border-color:#888!important;border-color:rgba(7,7,7,.6)!important}.date-picker .out-of-range,.date-picker .not-selectable{color:#ccc;font-style:oblique;background:#fcfcfc;cursor:default}.date-picker th.month-out,.date-picker th.out-of-range{color:#aaa;font-style:oblique;background:#fcfcfc}.date-picker .out-of-range{opacity:.6}.date-picker .not-selectable{opacity:.8}.oldie .date-picker .out-of-range{filter:alpha(opacity=60)}.oldie .date-picker .not-selectable{filter:alpha(opacity=80)}.date-picker tr{display:table-row}.date-picker sup{font-size:.86em;letter-spacing:normal;text-transform:none;height:0;line-height:1;position:relative;top:-0.2em;vertical-align:baseline!important;vertical-align:top}.date-picker .date-picker-day-header,.date-picker .month-display,.date-picker .year-display{text-shadow:0 1px 1px #fff}.date-picker .month-display,.date-picker .year-display{cursor:default}.date-picker td:focus,.date-picker .date-picker-hover{overflow:hidden;-moz-outline:0 none;outline:0 none;-o-highlight:0 none}.date-picker-focus .date-picker-hover,.date-picker-control:focus span{-webkit-animation:fd-dp-pulse 1.5s infinite alternate;-moz-animation:fd-dp-pulse 1.5s infinite alternate;-ms-animation:fd-dp-pulse 1.5s infinite alternate;-o-animation:fd-dp-pulse 1.5s infinite alternate}.date-picker .date-picker-selected-date{color:#333;color:rgba(3,3,3,.8);font-weight:bold;font-size:1.2em;width:2.4em;height:2.4em}.static-datepicker table{box-shadow:0 0 0 transparent}.static-datepicker table:before,.static-datepicker table:after{display:none}.date-picker-focus table{border-color:#999;border-color:rgba(153,153,153,.8);box-shadow:0 0 5px #aaa}.date-picker .drag-enabled,.date-picker .drag-enabled span{cursor:move}.date-picker-disabled table{opacity:.8!important}.date-picker-disabled table:before,.date-picker-disabled table:after{display:none}.oldie .date-picker-disabled table{filter:alpha(opacity=80)}.date-picker-disabled,.date-picker-disabled td,.date-picker-disabled th,.date-picker-disabled th span{cursor:default!important}.date-picker-disabled .prev-but:hover,.date-picker-disabled .next-but:hover{text-shadow:none}body.fd-drag-active{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@-webkit-keyframes fd-dp-pulse{from{box-shadow:0 0 2px rgba(100,130,170,0.8)}to{box-shadow:0 0 6px rgba(10,130,170,0.5)}}@-moz-keyframes fd-dp-pulse{from{box-shadow:0 0 2px rgba(100,130,170,0.8)}to{box-shadow:0 0 6px rgba(10,130,170,0.5)}}@-ms-keyframes fd-dp-pulse{from{box-shadow:0 0 2px rgba(100,130,170,0.8)}to{box-shadow:0 0 6px rgba(10,130,170,0.5)}}@-o-keyframes fd-dp-pulse{from{box-shadow:0 0 2px rgba(100,130,170,0.8)}to{box-shadow:0 0 6px rgba(10,130,170,0.5)}}
+.fd-hidden-input{display:none}.fd-screen-reader{position:absolute;left:-999em;top:auto;width:1px;height:1px;overflow:hidden;-moz-outline:0 none;outline:0 none}.date-picker{position:absolute;z-index:9999;text-align:center;font:900 .8em/1em "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Verdana,Arial,"Lucida Grande",sans-serif;background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;opacity:1;-webkit-transition:opacity .75s ease-in-out;-moz-transition:opacity .75s ease-in-out;-ms-transition:opacity .75s ease-in-out;-o-transition:opacity .75s ease-in-out;transition:opacity .75s ease-in-out}.date-picker div{border:1px solid rgba(255,255,255,0.8);border-radius:.8em}.date-picker.fd-dp-fade{opacity:0}.static-datepicker{position:relative;top:5px;left:0;margin-bottom:1.5em}.iehack{position:absolute;background:#fff;z-index:9998;padding:0;margin:0;border:0;display:none}.date-picker-control span{display:block;width:18px;height:18px;overflow:hidden;margin:auto 0;resize:none;outline:0}.date-picker-button-active span,.date-picker-control:focus span,.date-picker-control:hover span,.date-picker-control:active span{outline:0;box-shadow:0 0 5px rgba(40,130,170,0.7);border-radius:2px}.date-picker-control:link,.date-picker-control:visited{position:relative;display:-moz-inline-box;border:0 none;padding:0;margin:0 4px;background-color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAB+CAYAAAAp+EF2AAAD8ElEQVRo3u2Zu0scXxTHz8zcXR0H8UnEIpXyQ8TGaJNCFAlqEUyTMlUaWTC/IoR0vxQ2vz8hfZJGIki2URARkkbxhSJq4avI7uqK7x2V9XF/93v83WGzmIezKVLcL1zmvubcc+49w352xurr63tZW1s7EI1GPSkloVxfX5Ou55f8sYuLCz+TybwRMNLf3++dn5+jk8vl5eU39Ww2G/TlX6+urrzZ2dkBAU9gZGVlBZ08If+qC9r5Y6WlpeQ4jmf/714oI9orhCuOj49peXmZDg4OCDo6OqKSkhKswm0stL+/T5WVlWTbNvchVLQxhjpsiEgkQm1tbWwANy8uLlJ9fT2Vl5dzGzePjY1RR0cH1zFvfX2dOjs7ybIs2tjYoOHhYbLhHizrmyBcc0tuH25GKLhCqMOGQEgTExMcKzQ1NUX/vntHjoiS1l8lxbwYdHJywl4cHh5y3/b2NteF53kcGjYQK66urtL1wzYSKjQtMfyRuru7eRz7hT1FG8L8oaEhsmEAljFJb/Bt0uMoOiwdGmxwaOPj48FebG1tUTqRIqfYDSaXp1I0MjLCdZXFtLa2xp7BSCKRuDnxWCwmVZxSnYZU8Ut1QjKVSkl1rFJtolSTZTweD9o7OztydHRUai0sLMiWlhYpckPTp5J7YmgLIQhpokPMVRAakml6eppc1+WbsJG+73Pq64TE4wNDqOs80qeIMHGSAqvV1dUFmQsjjY2NQeZCu7u71NzcHGQ5rq2trUH+wYbARKxeVVXFhlCHERQtpAjGtYeYU11dze2ysrKbFFEe+Ol02kNCYlIymeRnDZN1/DjJmZkZbus8gnGMbW5u0unpqW8pF1/W1NQMKPc8TOQHULCjwROPvqKiIq5jQYSv2zCiUuANGRkZGRl9R5ZiyGcK/2KK3NyQDHmmfn3fgiFjiiHdAhjSVQwZA0O6v4EhXcOQIRiSQSudZjrRAt7dmSHn5uaooaGBKioqAg9Qurq6fsiQ4jaG1GHk8uKdGRJuK/Tjk9NaWloKQvseQ3Jo7e3tvCcwNjk5SU1NTQEvoYA8enp6uL63t0fz8/NBaDjlwcFBMgz5awx5phLQLZAhz8CQzxRDxpR7bkiGPFMp8Nb8RhgZGRn9iCHNe0jDkIYhzXtI8x7SvIc0MjIyuhNDPn/x9NP9qsbeomgxhWHI7MU5HWa/xgWMvOj/mwpgSJqZlb0CnhTKkMKJkmHIkN+y3394T8Xql1QrEomG+5b9+MkjevCgmRxbqJVtev3qn59+y76dIS2HjdgolhOOIUEeXwY+M23chGPxzeZb9p/EkBk/w39iCmFI/9QnMOSnezX3eiMiQmEYEkaSiWT8P0zZxbn5chQoAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:0 -72px;min-width:18px;line-height:1;cursor:pointer;visibility:visible;text-decoration:none;vertical-align:text-bottom;resize:none}.oldie .date-picker-control:link,.oldie .date-picker-control:visited{*background-image:url(http://www.yourdomain.com/the/path/to/the/images/datepicker-sprite.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-normal.png')}.date-picker-dateval:link,.date-picker-dateval:visited{background-position:0 -108px}.oldie .date-picker-dateval:link,.oldie .date-picker-dateval:visited{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-selected.png')}.date-picker-button-active:link,.date-picker-button-active:visited,.date-picker-control:focus,.date-picker-control:hover,.date-picker-control:active{background-position:0 0}.oldie .date-picker-button-active:link,.oldie .date-picker-button-active:visited,.oldie .date-picker-control:focus,.oldie .date-picker-control:hover,.oldie .date-picker-control:active{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-focused.png')}.date-picker-control-disabled:link,.date-picker-control-disabled:visited,.date-picker-control-disabled:hover,.date-picker-control-disabled:active{background-position:0 -36px;cursor:default}.oldie .date-picker-control-disabled:link,.oldie .date-picker-control-disabled:visited,.oldie .date-picker-control-disabled:hover,.oldie .date-picker-control-disabled:active{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-disabled.png')}.date-picker-control-disabled:hover span,.date-picker-control-disabled:active span{box-shadow:none!important}.oldie .date-picker-control{_width:18px}.date-picker-control{display:inline-block;outline:none!important}.date-picker th span{display:block;padding:0;margin:0;text-align:center;line-height:1em;border:0 none;background:transparent;font-weight:bold;cursor:pointer}.date-picker .month-display,.date-picker .year-display{display:inline;text-transform:uppercase;letter-spacing:1px;font-weight:normal;font-size:1.2em}.date-picker .prev-but,.date-picker .next-but{font-weight:normal;font-size:2.4em;font-family:georgia,times new roman,palatino,times,bookman,serif;cursor:pointer}.date-picker .prev-but,.date-picker .next-but,.date-picker .today-but{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.date-picker .prev-but:hover,.date-picker .next-but:hover,.date-picker .today-but:hover{color:#a84444}.date-picker .today-but{text-align:center;margin:0 auto;font-weight:normal;font-size:1em;width:100%;text-decoration:none;padding-top:.3em;text-transform:uppercase;vertical-align:middle;cursor:pointer}.date-picker-disabled .prev-but,.date-picker-disabled .next-but,.date-picker-disabled .today-but,.date-picker-disabled .prev-but:hover,.date-picker-disabled .next-but:hover,.date-picker-disabled .today-but:hover,.date-picker .prev-but.fd-disabled:hover,.date-picker .next-but.fd-disabled:hover,.date-picker .fd-disabled,.date-picker .fd-disabled:hover{color:#aaa;cursor:default!important;opacity:1}.date-picker .prev-but.fd-disabled:hover,.date-picker .next-but.fd-disabled:hover{text-shadow:0 -1px 1px rgba(255,255,255,.8)}.date-picker table,.date-picker td,.date-picker tbody th,.date-picker .day-disabled,.date-picker .date-picker-hover.day-disabled,.date-picker .date-picker-unused,.date-picker .month-out{background-color:#fff;background-image:url(data:image/gif;base64,R0lGODlhJgBbAMQAAAAAAP////7+/v39/fz8/Pv7+/r6+vn5+fj4+Pf39/b29vX19fT09PPz8/Ly8vHx8fDw8O/v7+7u7u3t7ezs7Ovr6+rq6unp6ejo6Ofn5+bm5uXl5f///wAAAAAAAAAAACH5BAEAABwALAAAAAAmAFsAAAX/4CaOZGmeaKqubOu+cCzPWm3feK7vfO//wCAvQywaj8ikcslsOp/QJWZKrVqv2Kx2y+16v9qLeEwum8/otHqttrjf8Lh8Tq/b7/aKfs/v+/+AgYKDhIWGgRSJiouMjY6PkJGSkROVlpeYmZqbnJ2enRKhoqOkpaanqKmqqRGtrq+wsbKztLW2tRC5uru8vb6/wMHCwQ/FxsfIycrLzM3OzQ7R0tPU1dbX0Q3a29zd3t/g4eLj4gzm5+jp6uvs7e7v7gvy8/T19vf4+fr7+gr+/wADChxIsKDBgwYTKFzIsKHDhxAjSpwoEYHFixgzatzIsaPHjx4PiBxJsqTJkyhTi6pcybKly5QGYsqcSbOmzZs4c+rMWaCnz59AgwodSrSo0aIEkipdyrSp06dQo0qdSrUq1AFYs2rdyrWr169gw4odS/argLNo06pdy7at27dw48qd6zaA3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0ueTLmy5cuYM2vezLmz58+gQ4tOHAIAOw==);background-repeat:repeat-x;background-position:0 0}.oldie .date-picker table,.oldie .date-picker td,.oldie .date-picker tbody th,.oldie .date-picker .day-disabled,.oldie .date-picker .date-picker-hover.day-disabled,.oldie .date-picker .date-picker-unused,.oldie .date-picker .month-out{*background-image:url(http://www.yourdomain.com/the/path/to/the/images/datepicker-gradient.gif);_background-image:none}.date-picker table{table-layout:auto;empty-cells:show;border-spacing:2px;border-collapse:separate;position:relative;margin:0;padding:0;border:1px solid #ccc;background-position:0 -20px;text-align:center;padding:.3em;width:auto;height:auto;color:#555;font-size:1em;border-radius:.8em;box-shadow:0 0 5px #aaa}.date-picker table:before,.date-picker table:after{content:"";position:absolute;z-index:-2;bottom:15px;left:10px;width:50%;height:20%;max-width:300px;max-height:100px;-webkit-box-shadow:0 15px 10px rgba(0,0,0,0.7);-moz-box-shadow:0 15px 10px rgba(0,0,0,0.7);box-shadow:0 15px 10px rgba(0,0,0,0.7);-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}.date-picker table:after{right:10px;left:auto;-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}.oldie .date-picker table:before,.oldie .date-picker table:after{display:none}.date-picker td,.date-picker tbody th{padding:0;text-align:center;vertical-align:middle;cursor:pointer;background-position:0 -35px;width:3em;height:3em;overflow:hidden;outline:transparent none 0;border:1px solid #cfcfcf;text-transform:none;font-weight:normal;text-shadow:0 1px #fff;border-radius:3px}.date-picker th{border:0 none;padding:0;font-weight:bold;color:#333;text-align:center;vertical-align:middle;text-transform:none}.date-picker .date-picker-week-header{border:1px solid #dcdcdc;font-style:oblique;background:transparent;cursor:default}.date-picker .date-picker-thead .date-picker-week-header{border:0 none;cursor:help}.date-picker .date-picker-day-header{cursor:help;border:0 none;padding:0 0 .2em 0;text-transform:lowercase;height:auto}.date-picker .date-picker-statusbar{cursor:default;font-weight:normal;text-transform:uppercase;letter-spacing:.1em;border:0 none;background:#fff;height:2.8em}.date-picker .date-picker-unused{border-color:#dcdcdc;cursor:default!important;background-position:0 -25px}.date-picker .date-picker-title{width:auto;height:auto;padding:.4em 0}.date-picker .date-picker-today{background:#fff url(data:image/gif;base64,R0lGODlhKwEoAJEAAKnT6v////X6+gAAACH5BAAAAAAALAAAAAArASgAAALXjI+py+0Po5y02ouz3lz4D4biSJbmiabqyrbuC8fyLAcCgOf0zvf+DwwKhyJbDkdMKpfMpnNo1D2n1Kr1GowCsNyu99uNgsfksnlnPKvX7LbA5o7L51Q4/Y7P8+z6vv9fwgc4SJgnWIiYuHao2OgY9hgpecU4aXkJVIm5yQmj2QkaavIpWmpKapraiaraasnqGusIK1tbSGub64er23vH6xvsBixcfEZsnAyGrNyMxewcPQUtXb1EbZ0thK3d3cPtHV4jTl5Xft4Ejr4eyO6e9R7/LU8/UwAAOw==) no-repeat 0 0}.oldie .date-picker .date-picker-today{*background:#fff url(http://www.yourdomain.com/the/path/to/the/images/datepicker-today.gif) no-repeat 0 0}.date-picker .month-out.date-picker-highlight{color:#b87676}.date-picker .date-picker-highlight{color:#a86666}.date-picker-focus .date-picker-hover{-moz-transform:scale(1.25);-ms-transform:scale(1.25);-o-transform:scale(1.25);transform:scale(1.25)}.date-picker .date-picker-hover,.date-picker .month-out.date-picker-hover{background:#fff url(data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAASwAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAwICAgICAwICAwUDAwMFBQQDAwQFBgUFBQUFBggGBwcHBwYICAkKCgoJCAwMDAwMDA4ODg4OEBAQEBAQEBAQEAEDBAQGBgYMCAgMEg4MDhIUEBAQEBQREBAQEBARERAQEBAQEBEQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIwIIAwERAAIRAQMRAf/EAHgAAQEBAQEBAAAAAAAAAAAAAAABBAMCCQEBAQEBAQEAAAAAAAAAAAAAAAECAwQFEAABAQgBAwMFAQEBAAAAAAAAEwFh0QIDkwQVVDFBgSFRBRFxkaGyczVEEQEAAgMBAAIDAQAAAAAAAAAAARFRAhITMQMhcTIi/9oADAMBAAIRAxEAPwD6R53yGZJm5EkmRUlZLUnYxjKkzGMYyZvb6npiIp8f7Ps26n8z8uOzzuTUuTRNcwx6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNnncmpcmiOYPTbMmyzuTUuTRHMHptmTZ5vJqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZvJqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2edyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzmf+mpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmzzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZ53JqXJojmD02zJss7k1Lk0RzB6bZk2edyalyaI5g9NsybLO5NS5NEcwem2ZZvkqv0+RymfXpVqf201rH4hj7Z/3P7Z1XlpzsWeKLFWiixV4osVeKLFniixZ4osV9miixZ4osWeKLFXiixUUWKvFFioosWeKLFXiixZ4osVaKLFniixZ4osWeKLFWiixUUWKiixV4osWeKLFvXqKLFWiixb06iixZ4osWeKLFniixVoosVFFioosWeKLFniixV4osVeKLFniixZ4osWeKLFXiixUUWKvFFioosWeKLFniixUUWLPFFizxRYq0UWKiixUUWLPFFizxRYs8UWKvFFioosWeKLFXiixZ4osVaKLFXii3n5Wp9PlMxntWq/20a/EL9v9z+5ZWVTTnYq8FirPcFivqCxV4LFXgsVBYo/9gsVBYqCxV4LFQWK+nUFirwWKgFXgsVBYq8FioLFQWKgsVZ7gsVeCxUFirwCoLFX/ALBYqCxUFioLFfUFirwWKs9wWKgsVeCxV4LFQWKv/YLFQWKvBYqAVBYq8FioLFfTqCxV4LFQCr/2CxUFivqCxV4LFWe4LFQWKvBYq8FjaoLFQWKvBYr3+oLFQDKoLFXgsVZ7gsV9QW7fLf8AWzf96v8AbSa/EN/b/c/uWQ05J5AM69QHdoDyBfIACAXsBAHkAzoA7dQHkCsIIUPIBgFYAaBADfuAb0AoEZ9wKBAAAAzqBWgQA37gX2AnkB5AoE8+QKzuBG+AKQQoeQDOgDt1AeQKAAgFaBADfuBfYCeQHkCt6AQA37gOwFIBRPIBnXqA7tA2fLf9bN/3q/20zr8Q6fb/AHP7lkNOQwgFAgNAAOwAB2KJ+AKQOxQIAAIn4KqkAoAAJ+AK0gAADAHcAA7tKAAA0AAIAD2AM6AAABncojfAFAn4ApA7FAgAAAD2KDQAAgAPYAzoAaUAHYgdigRAqjCAUCD/2Q==) no-repeat 0 0;cursor:pointer;border-color:#6482aa!important;border-color:rgba(100,130,170,.7)!important;color:#6482aa;text-shadow:0 1px 1px #fff;box-shadow:0 0 6px rgba(100,130,170,.6);background-size:cover}.oldie .date-picker .date-picker-hover,.oldie .date-picker .month-out.date-picker-hover{*background:#fff url(http://www.yourdomain.com/the/path/to/the/images/datepicker-cursor.jpg) no-repeat 0 0}.date-picker .day-disabled{color:#888;cursor:default;text-decoration:line-through;background-position:0 -15px}.date-picker .month-out{border-color:#ddd;border-color:rgba(220,220,220,0.8);color:#aaa;background-position:0 -25px}.date-picker .date-picker-selected-date{border-color:#888!important;border-color:rgba(7,7,7,.6)!important}.date-picker .out-of-range,.date-picker .not-selectable{color:#ccc;font-style:oblique;background:#fcfcfc;cursor:default}.date-picker th.month-out,.date-picker th.out-of-range{color:#aaa;font-style:oblique;background:#fcfcfc}.date-picker .out-of-range{opacity:.6}.date-picker .not-selectable{opacity:.8}.oldie .date-picker .out-of-range{filter:alpha(opacity=60)}.oldie .date-picker .not-selectable{filter:alpha(opacity=80)}.date-picker tr{display:table-row}.date-picker sup{font-size:.86em;letter-spacing:normal;text-transform:none;height:0;line-height:1;position:relative;top:-0.2em;vertical-align:baseline!important;vertical-align:top}.date-picker .date-picker-day-header,.date-picker .month-display,.date-picker .year-display{text-shadow:0 1px 1px #fff}.date-picker .month-display,.date-picker .year-display{cursor:default}.date-picker td:focus,.date-picker .date-picker-hover{overflow:hidden;-moz-outline:0 none;outline:0 none;-o-highlight:0 none}.date-picker-focus .date-picker-hover,.date-picker-control:focus span{-webkit-animation:fd-dp-pulse 1.5s infinite alternate;-moz-animation:fd-dp-pulse 1.5s infinite alternate;-ms-animation:fd-dp-pulse 1.5s infinite alternate;-o-animation:fd-dp-pulse 1.5s infinite alternate}.date-picker .date-picker-selected-date{color:#333;color:rgba(3,3,3,.8);font-weight:bold;font-size:1.2em;width:2.4em;height:2.4em}.static-datepicker table{box-shadow:0 0 0 transparent}.static-datepicker table:before,.static-datepicker table:after{display:none}.date-picker-focus table{border-color:#999;border-color:rgba(153,153,153,.8);box-shadow:0 0 5px #aaa}.date-picker .drag-enabled,.date-picker .drag-enabled span{cursor:move}.date-picker-disabled table{opacity:.8!important}.date-picker-disabled table:before,.date-picker-disabled table:after{display:none}.oldie .date-picker-disabled table{filter:alpha(opacity=80)}.date-picker-disabled,.date-picker-disabled td,.date-picker-disabled th,.date-picker-disabled th span{cursor:default!important}.date-picker-disabled .prev-but:hover,.date-picker-disabled .next-but:hover{text-shadow:none}body.fd-drag-active{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@-webkit-keyframes fd-dp-pulse{from{box-shadow:0 0 2px rgba(100,130,170,0.8)}to{box-shadow:0 0 6px rgba(10,130,170,0.5)}}@-moz-keyframes fd-dp-pulse{from{box-shadow:0 0 2px rgba(100,130,170,0.8)}to{box-shadow:0 0 6px rgba(10,130,170,0.5)}}@-ms-keyframes fd-dp-pulse{from{box-shadow:0 0 2px rgba(100,130,170,0.8)}to{box-shadow:0 0 6px rgba(10,130,170,0.5)}}@-o-keyframes fd-dp-pulse{from{box-shadow:0 0 2px rgba(100,130,170,0.8)}to{box-shadow:0 0 6px rgba(10,130,170,0.5)}}
View
60 css/demo.css
@@ -1,25 +1,28 @@
-/* DATEPICKER DEMO CSS */
body
{
padding:2em 0 0 0;
border:0;
margin:0;
text-align:center;
font-size:14px;
- font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ font-family: 'Source Sans Pro', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color:#545454;
min-width: 800px;
background:#fcfcfc;
}
-sup
- {
- height: 0;
- line-height: 1;
- vertical-align: baseline;
- _vertical-align: bottom;
- position: relative;
- bottom: 1ex;
- }
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
ol
{
margin-top:1em;
@@ -33,14 +36,18 @@ p
line-height:1.6em;
margin:0 0 1em 0;
}
+h1, h2, h3, h4
+ {
+ font-family:Bitter, georgia, serif;
+ }
+h4
+ {
+ font-weight:normal;
+ }
h1
{
- font-weight:lighter;
- font-family:georgia, times new roman, times, georgia, palatino, serif;
text-align:center;
- margin-top:0.6em;
color:#000;
- font-size:2em;
}
h2,
legend
@@ -51,13 +58,13 @@ legend
text-transform:uppercase;
letter-spacing:1px;
font-size:1.2em;
- line-height:1.5em;
+ line-height:1.5em;
}
fieldset legend
- {
+ {
text-align:left;
}
-code
+code
{
font-family:'andale mono', 'lucida console', 'courier new', monospace;
font-size:12px;
@@ -85,6 +92,7 @@ kbd
background: -moz-linear-gradient(top, rgb(230,230,230), rgb(245,245,245));
background: -ms-linear-gradient(top, rgb(230,230,230), rgb(245,245,245));
background: -o-linear-gradient(top, rgb(230,230,230), rgb(245,245,245));
+ background: linear-gradient(top, rgb(230,230,230), rgb(245,245,245));
color:#222;
text-shadow: 0 1px 0 rgb(255,255,255);
border:1px solid #ccc;
@@ -123,7 +131,7 @@ form
margin:0 auto;
-webkit-border-radius:5px;
-moz-border-radius:5px;
- border-radius:5px;
+ border-radius:5px;
}
fieldset
{
@@ -143,7 +151,7 @@ label
{
line-height:1em;
margin:0;
- font-weight:bold;
+ font-weight:normal;
color:#545454;
display:inline;
}
@@ -188,7 +196,7 @@ option.alt
{
width:16em;
}
-#fd-dp-aria-describedby
+#fd-dp-aria-describedby
{
padding:1em;
border:3px solid #a84444;
@@ -206,7 +214,7 @@ option.alt
}
#fd-dp-aria-describedby td
{
- padding:0.6em 0;
+ padding:0.6em 0;
border-top:1px solid #ccc;
vertical-align:top;
text-align:left;
@@ -219,8 +227,8 @@ option.alt
font-style:oblique;
}
#date-sel-out
- {
+ {
color:888;
- margin-left:1.5em;
- font-style:oblique;
- }
+ margin-left:1.5em;
+ font-style:oblique;
+ }
View
366 index.html
@@ -1,79 +1,78 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
<html lang="en">
-<head>
- <title>Unobtrusive JavaScript datePicker demo by frequency decoder</title>
- <meta charset="utf-8" />
- <!--
-
- Add the English language translation file
-
- -->
- <script src="./js/lang/en.js"></script>
- <!--
-
- Add the datepicker script and set the ARIA describedby property to point to
- the table that explains keyboard controls (by passing it in a JSON block
- within the script tag). Of course, you don't have to set the describedby
- parameter, I'm just showing you how it can be done should you want to.
-
- -->
- <script src="./js/datepicker.min.js">{"describedby":"fd-dp-aria-describedby"}</script>
-
- <!-- Styles for the demo -->
- <link href="./css/demo.css" rel="stylesheet" type="text/css" />
-
- <!-- Add the datepicker stylesheet -->
- <link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
+<head>
+ <title>Yet Another Datepicker demo - a frequency decoder production</title>
+ <meta charset="utf-8" />
+ <!--
+
+ Add the English language translation file
+
+ -->
+ <script src="./js/lang/en.js"></script>
+ <!--
+
+ Add the datepicker script and set the ARIA describedby property to point to
+ the table that explains keyboard controls (by passing it in a JSON block
+ within the script tag). Don't worry, you don't have to set the describedby
+ parameter, I'm just showing you how it can be done.
+
+ -->
+ <script src="./js/datepicker.js">{"describedby":"fd-dp-aria-describedby"}</script>
+
+ <!-- Styles for the demo -->
+ <link href="./css/demo.css" rel="stylesheet" type="text/css" />
+ <link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
+
+ <!-- Add the datepicker stylesheet -->
+ <link href="./css/datepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="">
- <h1>Unobtrusive JavaScript datepicker widgit</h1>
- <!-- The ARIA "describedby" property set above points to the following div -->
- <div id="fd-dp-aria-describedby">
+ <h1>Yet Another Datepicker Demo</h1>
+ <!-- The ARIA describedby property set above points to the following div -->
+ <div id="fd-dp-aria-describedby">
<h2>Keyboard Controls</h2>
- <p><kbd>Tab</kbd> to the button and press <kbd>Enter</kbd> to launch a keyboard aware datepicker control.</p>
+ <p><kbd>Tab</kbd> to the activation button and press <kbd>Enter</kbd> to launch a keyboard aware datepicker control.</p>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr><td><kbd>&larr;</kbd> <kbd>&rarr;</kbd> <kbd>&uarr;</kbd> <kbd>&darr;</kbd></td><td>Day navigation</td></tr>
<tr><td><kbd>Page Up</kbd></td><td>Previous month</td></tr>
<tr><td><kbd>Page Down</kbd></td><td>Next month</td></tr>
<tr><td><kbd>Ctrl</kbd> + <kbd>page up</kbd></td><td>Previous year</td></tr>
- <tr><td><kbd>Ctrl</kbd> + <kbd>page down</kbd></td><td>Next year</td></tr>
+ <tr><td><kbd>Ctrl</kbd> + <kbd>page down</kbd></td><td>Next year</td></tr>
<tr><td><kbd>Space</kbd></td><td>Today&#8217;s date</td></tr>
<tr><td><kbd>Esc</kbd></td><td>Close datepicker (without selecting date)</td></tr>
<tr><td><kbd>Return</kbd></td><td>Select highlighted date and close datepicker</td></tr>
<tr><td><kbd>2</kbd>&ndash;<kbd>7</kbd></td><td>Select the corresponding day as the first day of the week</td></tr>
</tbody>
</table>
</div>
- <p class="asusual">Please view the source code of the page in order to see how the datepîcker controls were created&#8230;</p>
- <!--
-
- DEMO #1
-
+ <!--
+
+ DEMO #1
+
-->
<fieldset>
- <legend>Demo #1</legend>
+ <legend>Demo #1</legend>
<ul>
<li>A bare-bones datepicker that uses a single text input to represent the day, month and year date parts</li>
</ul>
<label for="demo-1">Date</label> <input type="text" class="w8em" id="demo-1" name="demo-1" value="" maxlength="10" />
</fieldset>
<script>
-// Create the first datepicker
-datePickerController.createDatePicker({
- // Associate the text input (with an id of "demo-1") with a DD/MM/YYYY date
- // format
+datePickerController.createDatePicker({
+ // Associate the text input to a DD/MM/YYYY date format
formElements:{"demo-1":"%d/%m/%Y"}
- });
- </script>
- <!--
-
- DEMO #2
-
- -->
+ });
+ </script>
+ <!--
+
+ DEMO #2
+
+ -->
<fieldset>
- <legend>Demo #2</legend>
+ <legend>Demo #2</legend>
<ul>
<li>Displaying the week number within the datePicker interface</li>
<li>Setting a statusbar date format</li>
@@ -92,20 +91,15 @@
<label for="demo-2">Date</label> <input type="text" class="w8em" id="demo-2" name="demo-2" value="" />
</fieldset>
<script>
-// OK, there's a lot going on in this demo. We shall be disabling and enabling
-// a range of dates, most of which are stipulated using wildcards "*" within
-// the date format.
-
-// Create a variable to hold the list of disabled dates
+// Create a few variables to pass to the datePicker
var disabledDates = {
// Disable March the 13th for all years
"****0313":1,
// Disable the 25th to the 31st for all months and all years
"******25":"******31",
- // Disable July 01st to July 08th for all years
+ // Disable July 01st to July 08th for all years
"****0701":"****0708"
},
- // Create a variable to hold the list of enabled dates
enabledDates = {
// Enable the 03rd to the 05th of July for all years - this should
// take precedence over the last disabled date rule declared above
@@ -115,34 +109,29 @@
"****1225":1
};
- // Disable today's date also (add it to the object created previously)
+ // Disable today's date
disabledDates[datePickerController.dateToYYYYMMDDStr(new Date())] = 1;
-
+
// Create the datePicker
-datePickerController.createDatePicker({
- // Associate the text input with an id of "demo-2" with a DD/MM/YYYY date
- // format
+datePickerController.createDatePicker({
+ // Associate the three text inputs to their date parts
formElements:{"demo-2":"%d/%m/%Y"},
- // Show week numbers within the datepicker U.I.
+ // Show week numbers
showWeeks:true,
- // Set a statusbar format - which automatically displays a statusbar
- // within the datepicker U.I.
- statusFormat:"%l, %d%S %F %Y"
+ // Set a statusbar format
+ statusFormat:"%l, %d%S %F %Y"
});
-// Now the datepicker has been created, we can immediately pass the list of
-// date to disable/enable
-
-// Disable the dates we defined earlier
+// Disable the required dates
datePickerController.setDisabledDates("demo-2", disabledDates);
-// Enable the dates we defined earlier. As these have been set after the
-// disabled dates they will take precedence
+// Enable the required dates. As these have been set after the
+// disabled dates they will take precedence.
datePickerController.setEnabledDates("demo-2", enabledDates);
- </script>
- <!--
-
+ </script>
+ <!--
+
DEMO #3
-
+
-->
<fieldset>
<legend>Demo #3</legend>
@@ -152,45 +141,44 @@
<li>Disabling the 25<sup>th</sup> of December for all years</li>
<li>Filling the entire grid with dates</li>
<li>Enabling the selection of all dates rendered within the grid</li>
- </ul>
+ </ul>
<input type="text" class="w2em" id="demo-3-dd" name="demo-3-dd" value="" maxlength="2" placeholder="DD" />
/
<input type="text" class="w2em" id="demo-3-mm" name="demo-3-mm" value="" maxlength="2" placeholder="MM" />
/
<input type="text" class="w4em" id="demo-3" name="demo-3" value="" maxlength="4" placeholder="YYYY" />
- </fieldset>
- <script>
-datePickerController.createDatePicker({
- // Associate the three text inputs to their date parts
+ </fieldset>
+ <script>
+datePickerController.createDatePicker({
+ // Associate the three text inputs to their date parts
formElements:{"demo-3":"%Y","demo-3-mm":"%m","demo-3-dd":"%d"},
// Show the week numbers
showWeeks:true,
// Set a statusbar format
- statusFormat:"%l, %d%S %F %Y",
- // Remove the "Today" button from the U.I.
+ statusFormat:"%l, %d%S %F %Y",
+ // Remove the "Today" button
noTodayButton:true,
- // Fill the entire grid with dates, even dates outside of the month
- // currently displayed within the U.I.
+ // Fill the entire grid with dates
fillGrid:true,
// Enable the selection of dates not within the current month
// but rendered within the grid (as we used fillGrid:true)
constrainSelection:false
});
-// Disable the 25th of December for all years using a wildcard date format
+// Disable the 25th of December for all years
datePickerController.setDisabledDates("demo-3", {"****1225":1});
- </script>
- <!--
-
- DEMO #4
-
+ </script>
+ <!--
+
+ DEMO #4
+
-->
<fieldset>
<legend>Demo #4</legend>
<ul>
<li>Using three select lists to represent the day, month and year date parts</li>
<li>Disabling Monday and Tuesday</li>
<li>Using a callback function to display a long-hand date format beside the form elements</li>
- </ul>
+ </ul>
<p>Note: the high &amp; low ranges will be automatically calculated by the script when a select list is used to represent the year date part, so there&#8217;s no need to set a <code>rangeLow</code> or <code>rangeHigh</code> when creating the datepicker.</p>
<select id="date-sel-dd" name="date-sel-dd">
<option value="-1">Day</option>
@@ -265,77 +253,51 @@
<option value="1989">1989</option>
<option value="1990">1990</option>
</select>
- <!--
-
- A span to display the long-hand date format using the "showEnglishDate"
- function defined below
-
+ <!--
+
+ A span to display the long-hand date format using the "showEnglishDate"
+ function defined below
+
-->
<span id="date-sel-out"></span>
</fieldset>
- <!--
-
- We know the datepicker will be given an id of the format:
-
- #fd-[the id of the first associated form element]
-
- So, in this case:
-
- #fd-date-sel
-
- This enables us to set a final opacity using CSS for browsers that will
- use CSS transforms to fade in/out the datepicker.
-
- It is also necessary to set the opacity during the creation of the
- datepicker as is shown directly below, in order to deal with browsers that
- do not support CSS transitions and end up using a Javascript fade effect
- fallback.
-
- -->
- <style type="text/css">
- #fd-date-sel { opacity:90% }
- </style>
- <script>
-datePickerController.createDatePicker({
+ <script type="text/javascript">
+datePickerController.createDatePicker({
formElements:{"date-sel":"%Y","date-sel-mm":"%n","date-sel-dd":"%j"},
- // Set a final opacity of 90% (for browsers using a Javascript fade in/out
- // fallback)
- finalOpacity:90,
- // Show week numbers
showWeeks:true,
- // Show a status format
statusFormat:"%l, %d%S %F %Y",
// Fill the entire grid with dates
fillGrid:true,
// Disable the selection of dates not within the current month
// but rendered within the grid (as we used fillGrid:true)
constrainSelection:true,
+ // Set a final opacity of 90%
+ finalOpacity:95,
// Disable Monday (index =0) and Tuesday (index = 1)
disabledDays:[1,1,0,0,0,0,0],
// The function "showEnglishDate" is declared below
- callbackFunctions:{"create":[showEnglishDate],"dateset":[showEnglishDate]}
+ callbackFunctions:{"create":[showEnglishDate],"dateset":[showEnglishDate]}
});
// This is the actual function used by the "create" and "dateset" events
-// in order to display a longhand English date beside the form element
function showEnglishDate(argObj) {
// Grab the span & get a more English-ised version of the selected date
var spn = document.getElementById(argObj.id+"-out"),
formattedDate = !argObj.date ? "Please select a valid date" : datePickerController.printFormattedDate(argObj.date, "%l, %d%S %F %Y", false);
-
+
// Remove the current contents of the span
while(spn.firstChild) {
spn.removeChild(spn.firstChild);
};
-
+
// Add a new text node containing our formatted date
spn.appendChild(document.createTextNode(formattedDate));
};
- </script>
- <!--
-
- DEMO #5
-
+ </script>
+ <!--
+
+ DEMO #5
+
-->
<fieldset>
<legend>Demo #5</legend>
@@ -344,10 +306,10 @@
<li>Positioning the button within a specified DOM node (which is why it&#8217;s rendered to the left of the associated form controls)</li>
<li>Highlighting Monday only</li>
</ul>
- <!--
-
- The datePicker button is created as a child of the following span
-
+ <!--
+
+ The datePicker button is created as a child of the following span
+
-->
<span id="demo-5-button"></span>
<select id="demo-5-dd" name="demo-5-dd">
@@ -399,23 +361,23 @@
<option value="11">November</option>
<option value="12">December</option>
</select>
- <input type="text" name="demo-5" id="demo-5" maxlength="4" class="w4em" />
+ <input type="text" name="demo-5" id="demo-5" maxlength="4" class="w4em" />
</fieldset>
<script>
-datePickerController.createDatePicker({
+datePickerController.createDatePicker({
formElements:{"demo-5":"%Y","demo-5-mm":"%n","demo-5-dd":"%j"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
- // Highlight Monday only
+ // Highlight Monday only
highlightDays:[1,0,0,0,0,0,0],
// Position the button in a wrapper span to the left of the input
- positioned:"demo-5-button"
+ positioned:"demo-5-button"
});
</script>
- <!--
-
- DEMO #6
-
+ <!--
+
+ DEMO #6
+
-->
<fieldset>
<legend>Demo #6</legend>
@@ -438,21 +400,21 @@
<option value="102008">October 2008</option>
<option value="112008">November 2008</option>
<option value="122008">December 2008</option>
- </select>
+ </select>
</fieldset>
- <script>
-datePickerController.createDatePicker({
+ <script>
+datePickerController.createDatePicker({
formElements:{"demo-6-1":"%m%Y","demo-6":"%d"},
showWeeks:true,
fillGrid:true,
constrainSelection:false,
- statusFormat:"%l, %d%S %F %Y"
+ statusFormat:"%l, %d%S %F %Y"
});
</script>
- <!--
-
- DEMO #7
-
+ <!--
+
+ DEMO #7
+
-->
<fieldset>
<legend>Demo #7</legend>
@@ -475,22 +437,22 @@
<option value="12102008">12th October 2008</option>
<option value="16112008">16th November 2008</option>
<option value="17122008">17th December 2008</option>
- </select>
- <button onclick="datePickerController.disable('demo-7'); return false;">Disable</button> <button onclick="datePickerController.enable('demo-7'); return false;">Enable</button>
+ </select>
+ <button onclick="datePickerController.disable('demo-7'); return false;">Disable</button> <button onclick="datePickerController.enable('demo-7'); return false;">Enable</button>
</fieldset>
- <script>
+ <script>
datePickerController.createDatePicker({
// Associate the select list above and set the date format to match
- // the option values
+ // the options value
formElements:{"demo-7":"%d%m%Y"},
showWeeks:true,
- statusFormat:"%l, %d%S %F %Y"
+ statusFormat:"%l, %d%S %F %Y"
});
</script>
- <!--
-
- DEMO #8
-
+ <!--
+
+ DEMO #8
+
-->
<fieldset>
<legend>Demo #8</legend>
@@ -499,11 +461,11 @@
<li>Setting a callback function for the &#8220;redraw&#8221; event that dynamically calculates and disables Easter Monday for the given year and sets a bespoke title that reads &#8220;Easter Monday&#8221; for the date in question</li>
<li>Setting the <code>rangeLow</code> to be today&#8217;s date</li>
</ul>
- <label for="demo-8">Date</label>
+ <label for="demo-8">Date</label>
<input type="text" class="w8em" id="demo-8" name="demo-8" value="" />
- </fieldset>
- <script>
-datePickerController.createDatePicker({
+ </fieldset>
+ <script>
+datePickerController.createDatePicker({
formElements:{"demo-8":"%d/%m/%Y"},
showWeeks:true,
// Set a list of titles to use in the statusbar for specific dates
@@ -517,73 +479,74 @@
},
statusFormat:"%l, %d%S %F %Y",
// Set the rangeLow to be today's date
- rangeLow:datePickerController.dateToYYYYMMDDStr(new Date()),
+ //rangeLow:datePickerController.dateToYYYYMMDDStr(new Date()),
+ rangeLow:new Date(),
// Set a callback function for the redraw event
- callbackFunctions:{"redraw":[function(argObj) {
+ callbackFunctions:{"redraw":[function(argObj) {
- // Dynamically calculate Easter Monday - I've forgotten where this code
+ // Dynamically calculate Easter Monday - I've forgotten where this code
// was originally found and I don't even know if it returns a valid
// result in all cases.
-
+
// Only run the code if the month is March or April though
if(+argObj.mm < 3 || +argObj.mm > 4) {
return;
};
-
+
var y = argObj.yyyy,
a=y%4,
b=y%7,
c=y%19,
d=(19*c+15)%30,
e=(2*a+4*b-d+34)%7,
m=Math.floor((d+e+114)/31),
- g=(d+e+114)%31+1,
+ g=(d+e+114)%31+1,
yyyymmdd = y + "0" + m + String(g < 10 ? "0" + g : g),
ret = {},
- titles = {};
-
+ titles = {};
+
// Disable the date
ret[yyyymmdd] = 1;
datePickerController.addDisabledDates(argObj.id, ret);
-
+
// Just for fun, also set an "Easter Monday" status bar title for the
// date we just calculated
- ret[yyyymmdd] = "Easter Monday";
-
+ ret[yyyymmdd] = "Easter Monday";
+
datePickerController.addBespokeTitles(argObj.id, ret);
-
- }]}
+
+ }]}
});
</script>
- <!--
-
- DEMO #9
-
+ <!--
+
+ DEMO #9
+
-->
<fieldset>
<legend>Demo #9</legend>
<ul>
<li>Creating a static (inline) datepicker</li>
<li>Setting the opacity to 90%</li>
</ul>
- <label for="demo-9">Date</label>
- <input type="text" class="w16em" id="demo-9" name="demo-9" value="" />
+ <label for="demo-9">Date</label>
+ <input type="text" class="w16em" id="demo-9" name="demo-9" value="" />
</fieldset>
<script>
-datePickerController.createDatePicker({
+datePickerController.createDatePicker({
formElements:{"demo-9":"%d/%m/%Y"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
// We want an inline datepicker
staticPos:true,
// Set an opacity of 90%
- finalOpacity:90
+ finalOpacity:90
});
</script>
- <!--
-
- DEMO #10
-
+ <!--
+
+ DEMO #10
+
-->
<fieldset>
<legend>Demo #10</legend>
@@ -594,43 +557,42 @@
<li>Testing the <code>enable</code> and <code>disable</code> methods</li>
</ul>
<label for="demo-10">Date</label> <input type="text" class="w16em" id="demo-10" name="demo-10" value="" />
- <button onclick="datePickerController.disable('demo-10'); return false;">Disable</button> <button onclick="datePickerController.enable('demo-10'); return false;">Enable</button>
+ <button onclick="datePickerController.disable('demo-10'); return false;">Disable</button> <button onclick="datePickerController.enable('demo-10'); return false;">Enable</button>
</fieldset>
<script>
-datePickerController.createDatePicker({
+datePickerController.createDatePicker({
formElements:{"demo-10":"%d/%m/%Y"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
staticPos:true,
fillGrid:true,
// Enable the selection of all dates rendered within the grid
- constrainSelection:false
+ constrainSelection:false
});
</script>
- <!--
-
- DEMO #11
-
+ <!--
+
+ DEMO #11
+
-->
<fieldset>
<legend>Demo #11</legend>
<ul>
<li>Removing the associated input from the U.I.</li>
</ul>
- <input type="text" class="w16em" id="demo-11" name="demo-11" value="" />
+ <input type="text" class="w16em" id="demo-11" name="demo-11" value="" />
</fieldset>
<script>
-datePickerController.createDatePicker({
+datePickerController.createDatePicker({
formElements:{"demo-11":"%d/%m/%Y"},
showWeeks:true,
statusFormat:"%l, %d%S %F %Y",
staticPos:true,
fillGrid:true,
// Remove the associated input from the U.I.
- hideInput:true
+ hideInput:true
});
</script>
</form>
</body>
</html>
-
View
1,455 js/datepicker.js
723 additions, 732 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
53 js/datepicker.min.js
27 additions, 26 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
359 language/index.html
@@ -5,152 +5,152 @@
<title>Language File Creator</title>
<style>
body
- {
- padding:2em 0 2em 0;
- border:0;
- margin:0;
- text-align:center;
- font-size:16px;
- font-family: verdana,arial,sans-serif;
- color:#545454;
- min-width: 800px;
- background:#fff;
- border-top:3px solid #000;
- }
+ {
+ padding:2em 0 2em 0;
+ border:0;
+ margin:0;
+ text-align:center;
+ font-size:16px;
+ font-family: verdana,arial,sans-serif;
+ color:#545454;
+ min-width: 800px;
+ background:#fff;
+ border-top:3px solid #000;
+ }
h1
- {
- font-weight:lighter;
- font-family:georgia, times new roman, times, georgia, palatino, serif;
- text-align:center;
- margin-top:0.6em;
- color:#000;
- font-size:36px;
- }
+ {
+ font-weight:lighter;
+ font-family:georgia, times new roman, times, georgia, palatino, serif;
+ text-align:center;
+ margin-top:0.6em;
+ color:#000;
+ font-size:36px;
+ }
h2
- {
- font-weight:lighter;
- font-family:verdana,arial,sans-serif;
- text-align:center;
- margin-top:1em;
- color:#333;
- text-transform:uppercase;
- letter-spacing:1px;
- font-size:1.2em;
- }
+ {
+ font-weight:lighter;
+ font-family:verdana,arial,sans-serif;
+ text-align:center;
+ margin-top:1em;
+ color:#333;
+ text-transform:uppercase;
+ letter-spacing:1px;
+ font-size:1.2em;
+ }
a:link,
a:visited
- {
- color:#333;
- text-decoration:underline;
- }
+ {
+ color:#333;
+ text-decoration:underline;
+ }
a:hover
- {
- color:#fff;
- text-decoration:none;
- background:#000;
- }
+ {
+ color:#fff;
+ text-decoration:none;
+ background:#000;
+ }
a:active
- {
- color:#000;
- text-decoration:underline;
- }
+ {
+ color:#000;
+ text-decoration:underline;
+ }
form
- {
- width:738px;
- background:#fcfcfc;
- border:3px double #ccc;
- text-align:left;
- padding:10px;
- margin:0 auto;
- border-radius:5px;
- }
+ {
+ width:738px;
+ background:#fcfcfc;
+ border:3px double #ccc;
+ text-align:left;
+ padding:10px;
+ margin:0 auto;
+ border-radius:5px;
+ }
input, textarea
- {
- background:#fff;
- float:left;
- width:173px;
- border:1px solid #ccc;
- border-top-color:#aaa;
- border-left-color:#aaa;
- padding:0;
- margin:0 5px 4px 0;
- border-radius:3px;
- }
+ {
+ background:#fff;
+ float:left;
+ width:173px;
+ border:1px solid #ccc;
+ border-top-color:#aaa;
+ border-left-color:#aaa;
+ padding:0;
+ margin:0 5px 4px 0;
+ border-radius:3px;
+ }
textarea
- {
- width:736px;
- height:14em;
- float:none;
- margin:0;
- border-radius:5px;
- }
+ {
+ width:736px;
+ height:14em;
+ float:none;
+ margin:0;
+ border-radius:5px;
+ }
#doit
- {
- font-size:28px;
- background:#9cd001;
- border:1px solid #bce058;
- border-bottom-color:#80a300;
- border-right-color:#80a300;
- color:#fff;
- padding:4px 0;
- line-height:1;
- font-weight:normal;
- text-transform:uppercase;
- text-decoration:none;
- cursor:pointer;
- text-shadow:0 1px 0 #80a300;
- width:738px;
- clear:top;
- float:none;
- display:block;
- margin:0 0 0.5em 0;
- border-radius:6px;
- }
+ {
+ font-size:28px;
+ background:#9cd001;
+ border:1px solid #bce058;
+ border-bottom-color:#80a300;
+ border-right-color:#80a300;
+ color:#fff;
+ padding:4px 0;
+ line-height:1;
+ font-weight:normal;
+ text-transform:uppercase;
+ text-decoration:none;
+ cursor:pointer;
+ text-shadow:0 1px 0 #80a300;
+ width:738px;
+ clear:top;
+ float:none;
+ display:block;
+ margin:0 0 0.5em 0;
+ border-radius:6px;
+ }
fieldset
- {
- border:1px solid #ccc;
- margin:0 0 1em 0;
- padding:10px 5px 10px 10px;
- border-radius:5px;
- }
+ {
+ border:1px solid #ccc;
+ margin:0 0 1em 0;
+ padding:10px 5px 10px 10px;
+ border-radius:5px;
+ }
legend
- {
- color:#222;
- font-size:11px;
- font-weight:bold;
- text-transform:uppercase;
- letter-spacing:1px;
- }
- </style>
- <script>
+ {
+ color:#222;
+ font-size:11px;
+ font-weight:bold;
+ text-transform:uppercase;
+ letter-spacing:1px;
+ }
+ </style>
+ <script>
function safeVal(val) {
- var str = "";
- for(var i = 0, c; c = val.charAt(i); i++) {
- if(/^([a-zA-Z0-9\s\[\]%])$/.test(c)) {
- str += c;
- } else {
- c = c.charCodeAt(0).toString(16).toUpperCase();
- while(c.length<4) c = "0" + c;
- str += "\\u" + c;
- };
+ var str = "";
+ for(var i = 0, c; c = val.charAt(i); i++) {
+ if(/^([a-zA-Z0-9\s\[\]%])$/.test(c)) {
+ str += c;
+ } else {
+ c = c.charCodeAt(0).toString(16).toUpperCase();
+ while(c.length<4) c = "0" + c;
+ str += "\\u" + c;
};
- return str;
+ };
+ return str;
};
-var texts = {
- fullMonths:["January","February","March","April","May","June","July","August","September","October","November","December"],
- monthAbbrs:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
- fullDays: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
- dayAbbrs: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
- titles: ["Previous month","Next month","Previous year","Next year", "Today", "Show Calendar", "wk", "Week [[%0%]] of [[%1%]]", "Week", "Select a date", "Click \u0026 Drag to move", "Display \u201C[[%0%]]\u201D first", "Go to Today\u2019s date", "Disabled date:"]
+var texts = {
+ fullMonths:["January","February","March","April","May","June","July","August","September","October","November","December"],
+ monthAbbrs:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
+ fullDays: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
+ dayAbbrs: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
+ titles: ["Previous month","Next month","Previous year","Next year", "Today", "Show Calendar", "wk", "Week [[%0%]] of [[%1%]]", "Week", "Select a date", "Click \u0026 Drag to move", "Display \u201C[[%0%]]\u201D first", "Go to Today\u2019s date", "Disabled date:"]
};
var titleTrad = {
- "fullMonths":"Month Names",
- "monthAbbrs":"Abbreviated month names",
- "titles":"Miscellaneous titles",
- "dayAbbrs":"Abbreviated days of the week",
- "fullDays":"Days of the week"
+ "fullMonths":"Month Names",
+ "monthAbbrs":"Abbreviated month names",
+ "titles":"Miscellaneous titles",
+ "dayAbbrs":"Abbreviated days of the week",
+ "fullDays":"Days of the week"
};
var fs = document.createElement('fieldset'),
@@ -161,64 +161,66 @@
fsc, ipc, lgc, parts;
fm.onsubmit = function() {
- var out = [], parts, txt, inp, vals;
-
- for(textType in texts) {
- txt = "\n" + textType + ":[";
- parts = texts[textType];
- vals = [];
-
- for(var i = 0, pt; pt = parts[i]; i++) {
- vals.push('"' + safeVal(document.getElementById(textType + "_" + i).value) + '"');
- };
-
- txt += vals.join(", ") + "]";
-
- out.push(txt);
+ var out = [], parts, txt, inp, vals;
+
+ for(textType in texts) {
+ txt = "\n" + textType + ":[";
+ parts = texts[textType];
+ vals = [];
+
+ for(var i = 0, pt; pt = parts[i]; i++) {
+ vals.push('"' + safeVal(document.getElementById(textType + "_" + i).value) + '"');
};
- ta.value = "/* Please save this as a Javascript file using the appropriate two letter (e.g. fr.js) or four letter (e.g. pt-br.js) language code and send it to frequency.decoder at gmail (dot com) - thanks! */\n\nvar fdLocale = {\n/* Uncomment the following line if the first day of the week does not start on Monday */\n//firstDayOfWeek:0," + out.join(",") + "};\ntry { if(\"datePickerController\" in window) { datePickerController.loadLanguage(); }; } catch(err) {};";
+ txt += vals.join(", ") + "]";
- return false;
+ out.push(txt);
+ };
+
+ ta.value = "/* Please save this as a Javascript file using the appropriate two letter (e.g. fr.js) or four letter (e.g. pt-br.js) language code and send it to frequency.decoder at gmail (dot com) - thanks! */\n\nvar fdLocale = {\n/* Uncomment the following line if the first day of the week does not start on Monday */\n//firstDayOfWeek:0," + out.join(",") + "};\ntry { if(\"datePickerController\" in window) { datePickerController.loadLanguage(); }; } catch(err) {};";
+
+ return false;
};
fm.action = "";
fm.method = "post";
for(textType in texts) {
- fsc = fs.cloneNode(true);
- lgc = lg.cloneNode(true);
-
- lgc.appendChild(document.createTextNode(titleTrad[textType]));
- fsc.appendChild(lgc);
-
- parts = texts[textType];
-
- for(var i = 0, pt; pt = parts[i]; i++) {
- ipc = ip.cloneNode(true);
- ipc.type = "text";
- ipc.id = textType + "_" + i;
- ipc.value = pt;
- ipc.onfocus = function() {
- var parts = this.id.split("_"),
- deftxt = texts[parts[0]][parts[1]];
-
- if(this.value == deftxt) {
- this.value = "";
- };
- };
- ipc.onblur = function() {
- if(this.value) return;
-
- var parts = this.id.split("_"),
- deftxt = texts[parts[0]][parts[1]];
-
- this.value = deftxt;
- };
- fsc.appendChild(ipc);
+ fsc = fs.cloneNode(true);
+ lgc = lg.cloneNode(true);
+
+ lgc.appendChild(document.createTextNode(titleTrad[textType]));
+ fsc.appendChild(lgc);
+
+ parts = texts[textType];
+
+ for(var i = 0, pt; pt = parts[i]; i++) {
+ ipc = ip.cloneNode(true);
+ ipc.type = "text";
+ ipc.id = textType + "_" + i;
+ ipc.value = pt;
+ ipc.onfocus = function() {
+ var parts = this.id.split("_"),
+ deftxt = texts[parts[0]][parts[1]];
+
+ if(this.value == deftxt) {
+ this.value = "";
+ };
};
-
- fm.appendChild(fsc);
+ ipc.onblur = function() {
+ if(this.value) {
+ return;
+ };
+
+ var parts = this.id.split("_"),
+ deftxt = texts[parts[0]][parts[1]];
+
+ this.value = deftxt;
+ };
+ fsc.appendChild(ipc);
+ };
+
+ fm.appendChild(fsc);
};
ip.type = "submit";
@@ -230,13 +232,12 @@
fm.appendChild(ta);
window.onload = function() {
- document.body.appendChild(fm);
+ document.body.appendChild(fm);
};
- </script>
+ </script>
</head>
<body>
<h1>Language File Creator</h1>
- <p>View the related &#8220;<a href="http://www.frequency-decoder.com/2011/10/11/unobtrusive-accessible-datepicker-widgit-v6/">language in the lab</a>&#8221; post.</p>
</body>
-</html>
+</html>

0 comments on commit 501962c

Please sign in to comment.
Something went wrong with that request. Please try again.