Permalink
Browse files

Datepicker: Rewrite datepicker to use managed popup widget. Updates t…

…emplate structure to rerender only the calender part on refresh, making live regions much more effective. Makes both the inline and popup datepicker work with screenreaders. Implements full keyboard controls for navigation within the open datepicker.
  • Loading branch information...
1 parent bfbd64f commit de6e41b2c8c77f0858e808dc53821df1dbbdb036 @hanshillen hanshillen committed with jzaefferer Oct 19, 2011
@@ -1,205 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <script src="../jquery-1.4.4.js"></script>
- <script src="../ui/jquery.ui.core.js"></script>
- <script src="../ui/jquery.ui.widget.js"></script>
- <script src="../ui/jquery.ui.button.js"></script>
- <script src="../ui/jquery.ui.position.js"></script>
- <script src="jquery.tmpl.js"></script>
- <script src="../external/jquery.global.js"></script>
- <script src="../external/jquery.global.de-DE.js"></script>
- <script src="../external/jquery.global.ja-JP.js"></script>
- <script src="localization.js"></script>
- <script src="date.js"></script>
- <script src="picker.js"></script>
- <link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
- <title>jQuery UI Datepicker Rewrite</title>
- <style>
- body { font:62.5% Verdana,Arial,sans-serif; }
- .ui-datepicker-multi-3 { width: 51em !important; }
- </style>
-</head>
-<body>
- <select id="culture">
- <option value="en-US">en-US</option>
- <option value="de-DE">de-DE</option>
- <option value="ja-JP">ja-JP</option>
- </select>
- <input id="inline-output" />
- <div id="datepicker-inline-default"></div>
- <div id="datepicker-inline-multi"></div>
- <div id="datepicker-inline"></div>
- <input id="datepicker" type="text" />
- <input id="datepicker2" type="text" />
- <script>
- $( function() {
- $( "#culture" ).change( function() {
- $.global.preferCulture( $( this ).val() );
- $( ":ui-datepicker" ).datepicker( "refresh" );
- })
- $( "#datepicker-inline-default" ).datepicker( {
- select: function( event, ui ) {
- $( "#inline-output" ).val( ui.date );
- }
- });
- $( "#datepicker-inline-multi" ).datepicker( {
- tmpl: "#ui-datepicker-multi-tmpl",
- select: function( event, ui ) {
- $( "#inline-output" ).val( ui.date );
- }
- })
- $( "#datepicker-inline" ).datepicker( {
- tmpl: "#ui-datepicker-weeks-tmpl",
- select: function( event, ui ) {
- $( "#inline-output" ).val( ui.date );
- },
- eachDay: function( day ) {
- if ( day.lead && day.date > 20 ) {
- day.selectable = false;
- day.render = true;
- day.title = "These are the days of last month";
- day.extraClasses = "ui-state-disabled";
- }
- if ( day.lead && day.date < 3 ) {
- day.selectable = true;
- day.render = true;
- day.extraClasses = "ui-state-disabled";
- }
- if ( day.date == 1 ) {
- day.extraClasses = "ui-state-error";
- day.title = "Something bad explaining the error highlight";
- }
- if ( day.today ) {
- day.title = "A good day!";
- }
- }
- });
- $( "#datepicker, #datepicker2" ).datepicker();
- });
- </script>
-
- <script id="ui-datepicker-month" type="text/x-jquery-tmpl">
- <table class="ui-datepicker-calendar">
- <thead>
- <tr>
- {{each(index, day) $data.weekdays()}}
- <th class=""><span title="${day.fullname}">${day.shortname}</span></th>
- {{/each}}
- </tr>
- </thead>
- <tbody>
- {{each(index, week) $data.days()}}
- <tr>
- {{each(index, day) week.days}}
- <td>
- {{if day.render}}
- {{if day.selectable}}
- <a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
- ${day.date}
- </a>
- {{/if}}
- {{if !day.selectable}}
- <span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
- ${day.date}
- </span>
- {{/if}}
- {{/if}}
- </td>
- {{/each}}
- </tr>
- {{/each}}
- </tbody>
- </table>
- </script>
-
- <script id="ui-datepicker-tmpl" type="text/x-jquery-tmpl">
- <div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
- <a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
- <a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
- <div class="ui-datepicker-title">
- <span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
- </div>
- </div>
- {{tmpl(date) "#ui-datepicker-month"}}
- <div class="ui-datepicker-buttonpane ui-widget-content">
- <button class="ui-datepicker-current">${labels.currentText}</button>
- <button class="ui-datepicker-close">${labels.closeText}</button>
- </div>
- </div>
- </script>
-
- <script id="ui-datepicker-weeks-tmpl" type="text/x-jquery-tmpl">
- <div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
- <a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
- <a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
- <div class="ui-datepicker-title">
- <span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
- </div>
- </div>
- <table class="ui-datepicker-calendar">
- <thead>
- <tr>
- <th>${labels.weekHeader}</th>
- {{each(index, day) date.weekdays()}}
- <th class=""><span title="${day.fullname}">${day.shortname}</span></th>
- {{/each}}
- </tr>
- </thead>
- <tbody>
- {{each(index, week) date.days()}}
- <tr>
- <td>${week.number}</td>
- {{each(index, day) week.days}}
- <td>
- {{if day.render}}
- {{if day.selectable}}
- <a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
- ${day.date}
- </a>
- {{/if}}
- {{if !day.selectable}}
- <span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
- ${day.date}
- </span>
- {{/if}}
- {{/if}}
- </td>
- {{/each}}
- </tr>
- {{/each}}
- </tbody>
- </table>
- </div>
- </script>
-
- <script id="ui-datepicker-multi-tmpl" type="text/x-jquery-tmpl">
- <div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi-3 ui-datepicker-multi">
- {{each(index, month) date.months(2)}}
- <div class="ui-datepicker-group">
- <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix {{if month.first}}ui-corner-left{{/if}}{{if month.last}}ui-corner-right{{/if}}">
- {{if month.first}}
- <a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
- {{/if}}
- {{if month.last}}
- <a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
- {{/if}}
- <div class="ui-datepicker-title">
- <span class="ui-datepicker-month">${month.monthname()}</span> <span class="ui-datepicker-year">${month.year()}</span>
- </div>
- </div>
- {{tmpl(month) "#ui-datepicker-month"}}
- </div>
- {{/each}}
- <div class="ui-datepicker-row-break"></div>
- <div class="ui-datepicker-buttonpane ui-widget-content">
- <button class="ui-datepicker-current">${labels.currentText}</button>
- <button class="ui-datepicker-close">${labels.closeText}</button>
- </div>
- </div>
- </script>
-</body>
-</html>
View
@@ -6,17 +6,19 @@
*/
(function( $, undefined ) {
-if ( typeof( $.global.culture ) == "undefined" ) {
- $.global.culture = $.global.cultures[ "default" ];
-}
-
$.date = function ( datestring, formatstring ) {
- var calendar = $.global.culture.calendar,
+ //TODO: Need to refactor $.date to be a constructor, move the methods to a prototype.
+ var calendar = Globalize.culture().calendar,
format = formatstring ? formatstring : calendar.patterns.d,
- date = datestring ? $.global.parseDate(datestring, format) : new Date();
+ date = datestring ? Globalize.parseDate(datestring, format) : new Date();
+
+ if ( !date ) {
+ date = new Date()
+ }
+
return {
refresh: function() {
- calendar = $.global.culture.calendar;
+ calendar = Globalize.culture().calendar;
format = formatstring || calendar.patterns.d;
return this;
},
@@ -26,10 +28,31 @@ $.date = function ( datestring, formatstring ) {
}
return this;
},
+ //TODO: same as the underlying Date object's terminology, but still misleading.
+ //TODO: We can use .setTime() instead of new Date and rename to setTimestamp.
+ setTime: function( time ) {
+ date = new Date( time );
+ return this;
+ },
setDay: function( day ) {
date = new Date( date.getFullYear(), date.getMonth(), day );
return this;
},
+ setMonth: function( month ) {
+ //TODO: Should update this to keep the time component (hour, min, sec) intact. Same for setYear and setFullDate.
+ //TODO: Do we want to do any special handling when switching to a month that causes the days to overflow?
+ date = new Date( date.getFullYear(), month, date.getDate());
+ return this;
+ },
+ setYear: function( year ) {
+ //TODO: Same question as setMonth, but I suppose only for leap years.
+ date = new Date( year, date.getMonth(), date.getDate() );
+ return this;
+ },
+ setFullDate: function( year, month, day ) {
+ date = new Date( year, month, day );
+ return this;
+ },
adjust: function( period, offset ) {
var day = period == "D" ? date.getDate() + offset : date.getDate(),
month = period == "M" ? date.getMonth() + offset : date.getMonth(),
@@ -86,6 +109,7 @@ $.date = function ( datestring, formatstring ) {
var day = week.days[ week.days.length ] = {
lead: printDate.getMonth() != date.getMonth(),
date: printDate.getDate(),
+ timestamp: printDate.getTime(),
current: this.selected && this.selected.equal( printDate ),
today: today.equal( printDate )
};
@@ -133,15 +157,15 @@ $.date = function ( datestring, formatstring ) {
// TODO compare year, month, day each for better performance
equal: function( other ) {
function format( date ) {
- return $.global.format( date, "d" );
+ return Globalize.format( date, "d" );
}
return format( date ) == format( other );
},
date: function() {
return date;
},
format: function( formatstring ) {
- return $.global.format( date, formatstring ? formatstring : format );
+ return Globalize.format( date, formatstring ? formatstring : format );
},
calendar: function( newcalendar ) {
if ( newcalendar ) {
Oops, something went wrong.

0 comments on commit de6e41b

Please sign in to comment.