lib/dijit/CalendarLite.js.uncompressed.js

   1 require({cache:{
   2 'url:dijit/templates/Calendar.html':"<table cellspacing=\"0\" cellpadding=\"0\" class=\"dijitCalendarContainer\" role=\"grid\" aria-labelledby=\"${id}_mddb ${id}_year\">\n\t<thead>\n\t\t<tr class=\"dijitReset dijitCalendarMonthContainer\" valign=\"top\">\n\t\t\t<th class='dijitReset dijitCalendarArrow' data-dojo-attach-point=\"decrementMonth\">\n\t\t\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitCalendarIncrementControl dijitCalendarDecrease\" role=\"presentation\"/>\n\t\t\t\t<span data-dojo-attach-point=\"decreaseArrowNode\" class=\"dijitA11ySideArrow\">-</span>\n\t\t\t</th>\n\t\t\t<th class='dijitReset' colspan=\"5\">\n\t\t\t\t<div data-dojo-attach-point=\"monthNode\">\n\t\t\t\t</div>\n\t\t\t</th>\n\t\t\t<th class='dijitReset dijitCalendarArrow' data-dojo-attach-point=\"incrementMonth\">\n\t\t\t\t<img src=\"${_blankGif}\" alt=\"\" class=\"dijitCalendarIncrementControl dijitCalendarIncrease\" role=\"presentation\"/>\n\t\t\t\t<span data-dojo-attach-point=\"increaseArrowNode\" class=\"dijitA11ySideArrow\">+</span>\n\t\t\t</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t${!dayCellsHtml}\n\t\t</tr>\n\t</thead>\n\t<tbody data-dojo-attach-point=\"dateRowsNode\" data-dojo-attach-event=\"onclick: _onDayClick\" class=\"dijitReset dijitCalendarBodyContainer\">\n\t\t\t${!dateRowsHtml}\n\t</tbody>\n\t<tfoot class=\"dijitReset dijitCalendarYearContainer\">\n\t\t<tr>\n\t\t\t<td class='dijitReset' valign=\"top\" colspan=\"7\" role=\"presentation\">\n\t\t\t\t<div class=\"dijitCalendarYearLabel\">\n\t\t\t\t\t<span data-dojo-attach-point=\"previousYearLabelNode\" class=\"dijitInline dijitCalendarPreviousYear\" role=\"button\"></span>\n\t\t\t\t\t<span data-dojo-attach-point=\"currentYearLabelNode\" class=\"dijitInline dijitCalendarSelectedYear\" role=\"button\" id=\"${id}_year\"></span>\n\t\t\t\t\t<span data-dojo-attach-point=\"nextYearLabelNode\" class=\"dijitInline dijitCalendarNextYear\" role=\"button\"></span>\n\t\t\t\t</div>\n\t\t\t</td>\n\t\t</tr>\n\t</tfoot>\n</table>\n"}});
   3 define("dijit/CalendarLite", [
   4         "dojo/_base/array", // array.forEach array.map
   5         "dojo/_base/declare", // declare
   6         "dojo/cldr/supplemental", // cldrSupplemental.getFirstDayOfWeek
   7         "dojo/date", // date
   8         "dojo/date/locale",
   9         "dojo/dom", // dom.setSelectable
  10         "dojo/dom-class", // domClass.contains
  11         "dojo/_base/event", // event.stop
  12         "dojo/_base/lang", // lang.getObject, lang.hitch
  13         "dojo/_base/sniff", // has("ie") has("webkit")
  14         "dojo/string", // string.substitute
  15         "dojo/_base/window", // win.doc.createTextNode
  16         "./_WidgetBase",
  17         "./_TemplatedMixin",
  18         "dojo/text!./templates/Calendar.html"
  19 ], function(array, declare, cldrSupplemental, date, local, dom, domClass, event, lang, has, string, win,
  20                         _WidgetBase, _TemplatedMixin, template){
  21
  22 /*=====
  23         var _WidgetBase = dijit._WidgetBase;
  24         var _TemplatedMixin = dijit._TemplatedMixin;
  25 =====*/
  26
  27         // module:
  28         //              dijit/CalendarLite
  29         // summary:
  30         //              Lightweight version of Calendar widget aimed towards mobile use
  31
  32         var CalendarLite = declare("dijit.CalendarLite", [_WidgetBase, _TemplatedMixin], {
  33                 // summary:
  34                 //              Lightweight version of Calendar widget aimed towards mobile use
  35                 //
  36                 // description:
  37                 //              A simple GUI for choosing a date in the context of a monthly calendar.
  38                 //              This widget can't be used in a form because it doesn't serialize the date to an
  39                 //              `<input>` field.  For a form element, use dijit.form.DateTextBox instead.
  40                 //
  41                 //              Note that the parser takes all dates attributes passed in the
  42                 //              [RFC 3339 format](http://www.faqs.org/rfcs/rfc3339.html), e.g. `2005-06-30T08:05:00-07:00`
  43                 //              so that they are serializable and locale-independent.
  44                 //
  45                 //              Also note that this widget isn't keyboard accessible; use dijit.Calendar for that
  46                 // example:
  47                 //      |       var calendar = new dijit.CalendarLite({}, dojo.byId("calendarNode"));
  48                 //
  49                 // example:
  50                 //      |       <div data-dojo-type="dijit.CalendarLite"></div>
  51
  52                 // Template for main calendar
  53                 templateString: template,
  54
  55                 // Template for cell for a day of the week (ex: M)
  56                 dowTemplateString: '<th class="dijitReset dijitCalendarDayLabelTemplate" role="columnheader"><span class="dijitCalendarDayLabel">${d}</span></th>',
  57
  58                 // Templates for a single date (ex: 13), and for a row for a week (ex: 20 21 22 23 24 25 26)
  59                 dateTemplateString: '<td class="dijitReset" role="gridcell" data-dojo-attach-point="dateCells"><span class="dijitCalendarDateLabel" data-dojo-attach-point="dateLabels"></span></td>',
  60                 weekTemplateString: '<tr class="dijitReset dijitCalendarWeekTemplate" role="row">${d}${d}${d}${d}${d}${d}${d}</tr>',
  61
  62                 // value: Date
  63                 //              The currently selected Date, initially set to invalid date to indicate no selection.
  64                 value: new Date(""),
  65                 // TODO: for 2.0 make this a string (ISO format) rather than a Date
  66
  67                 // datePackage: String
  68                 //              JavaScript object containing Calendar functions.  Uses Gregorian Calendar routines
  69                 //              from dojo.date by default.
  70                 datePackage: date,
  71
  72                 // dayWidth: String
  73                 //              How to represent the days of the week in the calendar header. See locale
  74                 dayWidth: "narrow",
  75
  76                 // tabIndex: Integer
  77                 //              Order fields are traversed when user hits the tab key
  78                 tabIndex: "0",
  79
  80                 // currentFocus: Date
  81                 //              Date object containing the currently focused date, or the date which would be focused
  82                 //              if the calendar itself was focused.   Also indicates which year and month to display,
  83                 //              i.e. the current "page" the calendar is on.
  84                 currentFocus: new Date(),
  85
  86                 baseClass:"dijitCalendar",
  87
  88                 _isValidDate: function(/*Date*/ value){
  89                         // summary:
  90                         //              Runs various tests on the value, checking that it's a valid date, rather
  91                         //              than blank or NaN.
  92                         // tags:
  93                         //              private
  94                         return value && !isNaN(value) && typeof value == "object" &&
  95                                 value.toString() != this.constructor.prototype.value.toString();
  96                 },
  97
  98                 _getValueAttr: function(){
  99                         // summary:
 100                         //              Support get('value')
 101
 102                         // this.value is set to 1AM, but return midnight, local time for back-compat
 103                         if(this.value && !isNaN(this.value)){
 104                                 var value = new this.dateClassObj(this.value);
 105                                 value.setHours(0, 0, 0, 0);
 106
 107                                 // If daylight savings pushes midnight to the previous date, fix the Date
 108                                 // object to point at 1am so it will represent the correct day. See #9366
 109                                 if(value.getDate() < this.value.getDate()){
 110                                         value = this.dateFuncObj.add(value, "hour", 1);
 111                                 }
 112                                 return value;
 113                         }else{
 114                                 return null;
 115                         }
 116                 },
 117
 118                 _setValueAttr: function(/*Date|Number*/ value, /*Boolean*/ priorityChange){
 119                         // summary:
 120                         //              Support set("value", ...)
 121                         // description:
 122                         //              Set the current date and update the UI.  If the date is disabled, the value will
 123                         //              not change, but the display will change to the corresponding month.
 124                         // value:
 125                         //              Either a Date or the number of seconds since 1970.
 126                         // tags:
 127                         //      protected
 128                         if(value){
 129                                 // convert from Number to Date, or make copy of Date object so that setHours() call below
 130                                 // doesn't affect original value
 131                                 value = new this.dateClassObj(value);
 132                         }
 133                         if(this._isValidDate(value)){
 134                                 if(!this._isValidDate(this.value) || this.dateFuncObj.compare(value, this.value)){
 135                                         value.setHours(1, 0, 0, 0); // round to nearest day (1am to avoid issues when DST shift occurs at midnight, see #8521, #9366)
 136
 137                                         if(!this.isDisabledDate(value, this.lang)){
 138                                                 this._set("value", value);
 139
 140                                                 // Set focus cell to the new value.   Arguably this should only happen when there isn't a current
 141                                                 // focus point.   This will also repopulate the grid, showing the new selected value (and possibly
 142                                                 // new month/year).
 143                                                 this.set("currentFocus", value);
 144
 145                                                 if(priorityChange || typeof priorityChange == "undefined"){
 146                                                         this.onChange(this.get('value'));
 147                                                 }
 148                                         }
 149                                 }
 150                         }else{
 151                                 // clear value, and repopulate grid (to deselect the previously selected day) without changing currentFocus
 152                                 this._set("value", null);
 153                                 this.set("currentFocus", this.currentFocus);
 154                         }
 155                 },
 156
 157                 _setText: function(node, text){
 158                         // summary:
 159                         //              This just sets the content of node to the specified text.
 160                         //              Can't do "node.innerHTML=text" because of an IE bug w/tables, see #3434.
 161                         // tags:
 162                         //      private
 163                         while(node.firstChild){
 164                                 node.removeChild(node.firstChild);
 165                         }
 166                         node.appendChild(win.doc.createTextNode(text));
 167                 },
 168
 169                 _populateGrid: function(){
 170                         // summary:
 171                         //      Fills in the calendar grid with each day (1-31)
 172                         // tags:
 173                         //      private
 174
 175                         var month = new this.dateClassObj(this.currentFocus);
 176                         month.setDate(1);
 177
 178                         var firstDay = month.getDay(),
 179                                 daysInMonth = this.dateFuncObj.getDaysInMonth(month),
 180                                 daysInPreviousMonth = this.dateFuncObj.getDaysInMonth(this.dateFuncObj.add(month, "month", -1)),
 181                                 today = new this.dateClassObj(),
 182                                 dayOffset = cldrSupplemental.getFirstDayOfWeek(this.lang);
 183                         if(dayOffset > firstDay){ dayOffset -= 7; }
 184
 185                         // Mapping from date (as specified by number returned from Date.valueOf()) to corresponding <td>
 186                         this._date2cell = {};
 187
 188                         // Iterate through dates in the calendar and fill in date numbers and style info
 189                         array.forEach(this.dateCells, function(template, idx){
 190                                 var i = idx + dayOffset;
 191                                 var date = new this.dateClassObj(month),
 192                                         number, clazz = "dijitCalendar", adj = 0;
 193
 194                                 if(i < firstDay){
 195                                         number = daysInPreviousMonth - firstDay + i + 1;
 196                                         adj = -1;
 197                                         clazz += "Previous";
 198                                 }else if(i >= (firstDay + daysInMonth)){
 199                                         number = i - firstDay - daysInMonth + 1;
 200                                         adj = 1;
 201                                         clazz += "Next";
 202                                 }else{
 203                                         number = i - firstDay + 1;
 204                                         clazz += "Current";
 205                                 }
 206
 207                                 if(adj){
 208                                         date = this.dateFuncObj.add(date, "month", adj);
 209                                 }
 210                                 date.setDate(number);
 211
 212                                 if(!this.dateFuncObj.compare(date, today, "date")){
 213                                         clazz = "dijitCalendarCurrentDate " + clazz;
 214                                 }
 215
 216                                 if(this._isSelectedDate(date, this.lang)){
 217                                         clazz = "dijitCalendarSelectedDate " + clazz;
 218                                         template.setAttribute("aria-selected", true);
 219                                 }else{
 220                                         template.setAttribute("aria-selected", false);
 221                                 }
 222
 223                                 if(this.isDisabledDate(date, this.lang)){
 224                                         clazz = "dijitCalendarDisabledDate " + clazz;
 225                                         template.setAttribute("aria-disabled", true);
 226                                 }else{
 227                                         clazz = "dijitCalendarEnabledDate " + clazz;
 228                                         template.removeAttribute("aria-disabled");
 229                                 }
 230
 231                                 var clazz2 = this.getClassForDate(date, this.lang);
 232                                 if(clazz2){
 233                                         clazz = clazz2 + " " + clazz;
 234                                 }
 235
 236                                 template.className = clazz + "Month dijitCalendarDateTemplate";
 237
 238                                 // Each cell has an associated integer value representing it's date
 239                                 var dateVal = date.valueOf();
 240                                 this._date2cell[dateVal] = template;
 241                                 template.dijitDateValue = dateVal;
 242
 243                                 // Set Date string (ex: "13").
 244                                 this._setText(this.dateLabels[idx], date.getDateLocalized ? date.getDateLocalized(this.lang) : date.getDate());
 245                         }, this);
 246
 247                         // set name of this month
 248                         this.monthWidget.set("month", month);
 249
 250                         // Fill in localized prev/current/next years
 251                         var y = month.getFullYear() - 1;
 252                         var d = new this.dateClassObj();
 253                         array.forEach(["previous", "current", "next"], function(name){
 254                                 d.setFullYear(y++);
 255                                 this._setText(this[name+"YearLabelNode"],
 256                                         this.dateLocaleModule.format(d, {selector:'year', locale:this.lang}));
 257                         }, this);
 258                 },
 259
 260                 goToToday: function(){
 261                         // summary:
 262                         //      Sets calendar's value to today's date
 263                         this.set('value', new this.dateClassObj());
 264                 },
 265
 266                 constructor: function(/*Object*/args){
 267                         this.datePackage = args.datePackage || this.datePackage;
 268                         this.dateFuncObj = typeof this.datePackage == "string" ?
 269                                 lang.getObject(this.datePackage, false) :// "string" part for back-compat, remove for 2.0
 270                                 this.datePackage;
 271                         this.dateClassObj = this.dateFuncObj.Date || Date;
 272                         this.dateLocaleModule = lang.getObject("locale", false, this.dateFuncObj);
 273                 },
 274
 275                 _createMonthWidget: function(){
 276                         // summary:
 277                         //              Creates the drop down button that displays the current month and lets user pick a new one
 278
 279                         return CalendarLite._MonthWidget({
 280                                 id: this.id + "_mw",
 281                                 lang: this.lang,
 282                                 dateLocaleModule: this.dateLocaleModule
 283                         }, this.monthNode);
 284                 },
 285
 286                 buildRendering: function(){
 287                         // Markup for days of the week (referenced from template)
 288                         var d = this.dowTemplateString,
 289                                 dayNames = this.dateLocaleModule.getNames('days', this.dayWidth, 'standAlone', this.lang),
 290                                 dayOffset = cldrSupplemental.getFirstDayOfWeek(this.lang);
 291                         this.dayCellsHtml = string.substitute([d,d,d,d,d,d,d].join(""), {d: ""}, function(){
 292                                 return dayNames[dayOffset++ % 7]
 293                         });
 294
 295                         // Markup for dates of the month (referenced from template), but without numbers filled in
 296                         var r = string.substitute(this.weekTemplateString, {d: this.dateTemplateString});
 297                         this.dateRowsHtml = [r,r,r,r,r,r].join("");
 298
 299                         // Instantiate from template.
 300                         // dateCells and dateLabels arrays filled when _Templated parses my template.
 301                         this.dateCells = [];
 302                         this.dateLabels = [];
 303                         this.inherited(arguments);
 304
 305                         dom.setSelectable(this.domNode, false);
 306
 307                         var dateObj = new this.dateClassObj(this.currentFocus);
 308
 309                         this._supportingWidgets.push(this.monthWidget = this._createMonthWidget());
 310
 311                         this.set('currentFocus', dateObj, false);       // draw the grid to the month specified by currentFocus
 312
 313                         // Set up connects for increment/decrement of months/years
 314                         var connect = lang.hitch(this, function(nodeProp, part, amount){
 315                                 this.connect(this[nodeProp], "onclick", function(){
 316                                         this._setCurrentFocusAttr(this.dateFuncObj.add(this.currentFocus, part, amount));
 317                                 });
 318                         });
 319                         connect("incrementMonth", "month", 1);
 320                         connect("decrementMonth", "month", -1);
 321                         connect("nextYearLabelNode", "year", 1);
 322                         connect("previousYearLabelNode", "year", -1);
 323                 },
 324
 325                 _setCurrentFocusAttr: function(/*Date*/ date, /*Boolean*/ forceFocus){
 326                         // summary:
 327                         //              If the calendar currently has focus, then focuses specified date,
 328                         //              changing the currently displayed month/year if necessary.
 329                         //              If the calendar doesn't have focus, updates currently
 330                         //              displayed month/year, and sets the cell that will get focus.
 331                         // forceFocus:
 332                         //              If true, will focus() the cell even if calendar itself doesn't have focus
 333
 334                         var oldFocus = this.currentFocus,
 335                                 oldCell = oldFocus && this._date2cell ? this._date2cell[oldFocus.valueOf()] : null;
 336
 337                         // round specified value to nearest day (1am to avoid issues when DST shift occurs at midnight, see #8521, #9366)
 338                         date = new this.dateClassObj(date);
 339                         date.setHours(1, 0, 0, 0);
 340
 341                         this._set("currentFocus", date);
 342
 343                         // TODO: only re-populate grid when month/year has changed
 344                         this._populateGrid();
 345
 346                         // set tabIndex=0 on new cell, and focus it (but only if Calendar itself is focused)
 347                         var newCell = this._date2cell[date.valueOf()];
 348                         newCell.setAttribute("tabIndex", this.tabIndex);
 349                         if(this.focused || forceFocus){
 350                                 newCell.focus();
 351                         }
 352
 353                         // set tabIndex=-1 on old focusable cell
 354                         if(oldCell && oldCell != newCell){
 355                                 if(has("webkit")){      // see #11064 about webkit bug
 356                                         oldCell.setAttribute("tabIndex", "-1");
 357                                 }else{
 358                                         oldCell.removeAttribute("tabIndex");
 359                                 }
 360                         }
 361                 },
 362
 363                 focus: function(){
 364                         // summary:
 365                         //              Focus the calendar by focusing one of the calendar cells
 366                         this._setCurrentFocusAttr(this.currentFocus, true);
 367                 },
 368
 369                 _onDayClick: function(/*Event*/ evt){
 370                         // summary:
 371                         //      Handler for day clicks, selects the date if appropriate
 372                         // tags:
 373                         //      protected
 374                         event.stop(evt);
 375                         for(var node = evt.target; node && !node.dijitDateValue; node = node.parentNode);
 376                         if(node && !domClass.contains(node, "dijitCalendarDisabledDate")){
 377                                 this.set('value', node.dijitDateValue);
 378                         }
 379                 },
 380
 381                 onChange: function(/*Date*/ /*===== date =====*/){
 382                         // summary:
 383                         //              Called only when the selected date has changed
 384                 },
 385
 386                 _isSelectedDate: function(dateObject /*===== , locale =====*/){
 387                         // summary:
 388                         //              Extension point so developers can subclass Calendar to
 389                         //              support multiple (concurrently) selected dates
 390                         // dateObject: Date
 391                         // locale: String?
 392                         // tags:
 393                         //              protected extension
 394                         return this._isValidDate(this.value) && !this.dateFuncObj.compare(dateObject, this.value, "date")
 395                 },
 396
 397                 isDisabledDate: function(/*===== dateObject, locale =====*/){
 398                         // summary:
 399                         //              May be overridden to disable certain dates in the calendar e.g. `isDisabledDate=dojo.date.locale.isWeekend`
 400                         // dateObject: Date
 401                         // locale: String?
 402                         // tags:
 403                         //      extension
 404 /*=====
 405                         return false; // Boolean
 406 =====*/
 407                 },
 408
 409                 getClassForDate: function(/*===== dateObject, locale =====*/){
 410                         // summary:
 411                         //              May be overridden to return CSS classes to associate with the date entry for the given dateObject,
 412                         //              for example to indicate a holiday in specified locale.
 413                         // dateObject: Date
 414                         // locale: String?
 415                         // tags:
 416                         //      extension
 417
 418 /*=====
 419                         return ""; // String
 420 =====*/
 421                 }
 422         });
 423
 424         CalendarLite._MonthWidget = declare("dijit.CalendarLite._MonthWidget", _WidgetBase, {
 425                 // summary:
 426                 //              Displays name of current month padded to the width of the month
 427                 //              w/the longest name, so that changing months doesn't change width.
 428                 //
 429                 //              Create as new dijit.Calendar._MonthWidget({
 430                 //                      lang: ...,
 431                 //                      dateLocaleModule: ...
 432                 //              })
 433
 434                 _setMonthAttr: function(month){
 435                         // summary:
 436                         //              Set the current month to display as a label
 437                         var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang, month),
 438                                 spacer =
 439                                         (has("ie") == 6 ? "" :  "<div class='dijitSpacer'>" +
 440                                                 array.map(monthNames, function(s){ return "<div>" + s + "</div>"; }).join("") + "</div>");
 441
 442                         // Set name of current month and also fill in spacer element with all the month names
 443                         // (invisible) so that the maximum width will affect layout.   But not on IE6 because then
 444                         // the center <TH> overlaps the right <TH> (due to a browser bug).
 445                         this.domNode.innerHTML =
 446                                 spacer +
 447                                 "<div class='dijitCalendarMonthLabel dijitCalendarCurrentMonthLabel'>" +
 448                                 monthNames[month.getMonth()] + "</div>";
 449                 }
 450         });
 451
 452         return CalendarLite;
 453 });