Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
feat(calendar): starting work for date-picker.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jelbourn
jelbourn committed Aug 13, 2015
1 parent bc78501 commit b158d15
Show file tree
Hide file tree
Showing 7 changed files with 113 additions and 303 deletions.
144 changes: 10 additions & 134 deletions src/components/calendar/calendar.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@

describe('md-calendar', function() {
// When constructing a Date, the month is zero-based. This can be confusing, since people are
// used to seeing them one-based. So we create these aliases to make reading the tests easier.
var JAN = 0, FEB = 1, MAR = 2, APR = 3, MAY = 4, JUN = 5, JUL = 6, AUG = 7, SEP = 8, OCT = 9,
NOV = 10, DEC = 11;

var ngElement, element, scope, pageScope, controller, $animate, $compile;
var $rootScope, dateLocale;
describe('md-checkbox', function() {
var ngElement, element, scope, pageScope, controller, $animate;

/**
* To apply a change in the date, a scope $apply() AND a manual triggering of animation
Expand All @@ -17,158 +11,40 @@ describe('md-calendar', function() {
$animate.triggerCallbacks();
}

/**
* Extracts text as an array (one element per cell) from a tr element.
*/
function extractRowText(tr) {
var cellContents = [];
angular.forEach(tr.children, function(tableElement) {
cellContents.push(tableElement.textContent);
});

return cellContents;
}

/**
* Finds a date td given a day of the month from an .md-calendar-month element.
*/
function findDateElement(monthElement, day) {
var tds = monthElement.querySelectorAll('td');
var td;

for (var i = 0; i < tds.length; i++) {
td = tds[i];
if (td.textContent === day.toString()) {
return td;
}
}
}


/**
* Creates and compiles an md-calendar element.
*/
function createElement(parentScope) {
var directiveScope = parentScope || $rootScope.$new();
var template = '<md-calendar ng-model="myDate"></md-calendar>';
var newElement = $compile(template)(directiveScope);
directiveScope.$apply();
return newElement;
}

beforeEach(module('material.components.calendar', 'ngAnimateMock'));

beforeEach(inject(function($injector) {
$animate = $injector.get('$animate');
$compile = $injector.get('$compile');
$rootScope = $injector.get('$rootScope');
dateLocale = $injector.get('$$mdDateLocale');
beforeEach(inject(function($compile, $rootScope, _$animate_) {
$animate = _$animate_;

var template = '<md-calendar ng-model="myDate"></md-calendar>';
pageScope = $rootScope.$new();
pageScope.myDate = null;

ngElement = createElement(pageScope);
ngElement = $compile(template)(pageScope);
element = ngElement[0];
scope = ngElement.scope();
controller = ngElement.controller('mdCalendar');

pageScope.$apply();
}));

describe('ngModel binding', function() {

it('should update the calendar based on ngModel change', function() {
pageScope.myDate = new Date(2014, MAY, 30);
pageScope.myDate = new Date(2014, 4, 30);
applyDateChange();

var displayedMonth = element.querySelector('.md-calendar-month-label');
var selectedDate = element.querySelector('.md-calendar-selected-date');

expect(displayedMonth.textContent).toBe('May');
expect(selectedDate.textContent).toBe('30');
expect(selectedDate.textContent).toBe('30')
});

});

describe('calendar construction', function() {
describe('weeks header', function() {
it('should display the weeks header in the first row', function() {
var header = element.querySelector('.md-calendar-day-header tr');

expect(extractRowText(header)).toEqual(['S', 'M', 'T', 'W', 'T', 'F' ,'S']);
});

it('should use $$mdDateLocale.shortDays as weeks header values', function() {
var oldShortDays = dateLocale.shortDays;
dateLocale.shortDays = ['SZ', 'MZ', 'TZ', 'WZ', 'TZ', 'FZ', 'SZ'];

var newElement = createElement()[0];
var header = newElement.querySelector('.md-calendar-day-header tr');

expect(extractRowText(header)).toEqual(['SZ', 'MZ', 'TZ', 'WZ', 'TZ', 'FZ','SZ']);
dateLocale.shortDays = oldShortDays;
});
});

describe('#buildCalendarForMonth', function() {
it('should render a month correctly as a table', function() {
var date = new Date(2014, MAY, 30);
var monthElement = controller.buildCalendarForMonth(date);

var calendarRows = monthElement.querySelectorAll('tr');
var calendarDates = [];

angular.forEach(calendarRows, function(tr) {
calendarDates.push(extractRowText(tr));
});

var expectedDates = [
['May', '', '', '1', '2', '3'],
['4', '5', '6', '7', '8', '9', '10'],
['11', '12', '13', '14', '15', '16', '17'],
['18', '19', '20', '21', '22', '23', '24'],
['25', '26', '27', '28', '29', '30', '31'],
];
expect(calendarDates).toEqual(expectedDates);
});

it('should show the month on its own row if the first day is before Tuesday', function() {
var date = new Date(2014, JUN, 30); // 1st on Sunday
var monthElement = controller.buildCalendarForMonth(date);

var firstRow = monthElement.querySelector('tr');
expect(extractRowText(firstRow)).toEqual(['Jun']);
});
});


it('should highlight today', function() {
pageScope.myDate = controller.today;
applyDateChange();

var monthElement = element.querySelector('.md-calendar-month');
var day = controller.today.getDate();

var dateElement = findDateElement(monthElement, day);
expect(dateElement.classList.contains('md-calendar-date-today')).toBe(true);
});

it('should have ids for date elements unique to the directive instance', function() {
pageScope.myDate = controller.today;
applyDateChange();

var otherScope = $rootScope.$new();

otherScope.myDate = controller.today;
var otherNgElement = createElement(otherScope);

var monthElement = element.querySelector('.md-calendar-month');
var day = controller.today.getDate();
var dateElement = findDateElement(monthElement, day);

var otherMonthElement = otherNgElement[0].querySelector('.md-calendar-month');
var otherDateElement = findDateElement(otherMonthElement, day);

expect(dateElement.id).not.toEqual(otherDateElement.id);
});
});

describe('keyboard events', function() {
Expand Down
20 changes: 6 additions & 14 deletions src/components/calendar/dateLocaleProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
* @param $locale
* @returns {DateLocale}
*/
DateLocaleProvider.prototype.$get = function($locale) {
DateLocaleProvider.prototype.$get = function($locale, $filter) {
/**
* Default date-to-string formatting function.
* @param {Date} date
Expand All @@ -63,29 +63,21 @@
return new Date(dateString);
}

// The default "short" day strings are the first character of each day,
// e.g., "Monday" => "M".
// The default "short" day strings are the first character of each day.
var defaultShortDays = $locale.DATETIME_FORMATS.DAY.map(function(day) {
return day[0];
});

// The default dates are simply the numbers 1 through 31.
var defaultDates = Array(32);
for (var i = 1; i <= 31; i++) {
defaultDates[i] = i;
}

window.$locale = $locale;
window.$filter = $filter;

// TODO(jelbourn): Freeze this object.
return {
var dateLocale = {
months: this.months || $locale.DATETIME_FORMATS.MONTH,
shortMonths: this.shortMonths || $locale.DATETIME_FORMATS.SHORTMONTH,
days: this.days || $locale.DATETIME_FORMATS.DAY,
shortDays: this.shortDays || defaultShortDays,
dates: this.dates || defaultDates,
formatDate: this.formatDate || defaultFormatDate,
parseDate: this.parseDate || defaultParseDate
formatDate: defaultFormatDate,
parseDate: defaultParseDate
};
};

Expand Down
12 changes: 1 addition & 11 deletions src/components/calendar/dateUtil.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@
incrementDays: incrementDays,
incrementMonths: incrementMonths,
getLastDateOfMonth: getLastDateOfMonth,
isSameDay: isSameDay,
isValidDate: isValidDate
isSameDay: isSameDay
};

/**
Expand Down Expand Up @@ -163,14 +162,5 @@
function getLastDateOfMonth(date) {
return new Date(date.getFullYear(), date.getMonth(), getNumberOfDaysInMonth(date));
}

/**
* Checks whether a date is valid.
* @param {Date} date
* @return {boolean} Whether the date is a valid Date.
*/
function isValidDate(date) {
return date != null && date.getTime && !isNaN(date.getTime());
}
});
})();
Loading

0 comments on commit b158d15

Please sign in to comment.