From af67ce5e18525ba52ee4533229468ed07f912536 Mon Sep 17 00:00:00 2001 From: Roberto Aguilar Date: Sat, 7 Sep 2013 21:12:13 +0000 Subject: [PATCH] Fixed #4574 -- Added CSS classes to the admin calendar widget for better control over styling. --- .../admin/js/admin/DateTimeShortcuts.js | 3 +- .../contrib/admin/static/admin/js/calendar.js | 43 +++++++++-- tests/admin_widgets/tests.py | 73 +++++++++++++++++++ 3 files changed, 112 insertions(+), 7 deletions(-) diff --git a/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js b/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js index aa12f8cf01..754c4f71a6 100644 --- a/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js +++ b/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js @@ -293,8 +293,9 @@ var DateTimeShortcuts = { var date_parts = inp.value.split('-'); var year = date_parts[0]; var month = parseFloat(date_parts[1]); + var selected = new Date(inp.value); if (year.match(/\d\d\d\d/) && month >= 1 && month <= 12) { - DateTimeShortcuts.calendars[num].drawDate(month, year); + DateTimeShortcuts.calendars[num].drawDate(month, year, selected); } } diff --git a/django/contrib/admin/static/admin/js/calendar.js b/django/contrib/admin/static/admin/js/calendar.js index 8e38c41c68..458eece92f 100644 --- a/django/contrib/admin/static/admin/js/calendar.js +++ b/django/contrib/admin/static/admin/js/calendar.js @@ -27,13 +27,29 @@ var CalendarNamespace = { } return days; }, - draw: function(month, year, div_id, callback) { // month = 1-12, year = 1-9999 + draw: function(month, year, div_id, callback, selected) { // month = 1-12, year = 1-9999 var today = new Date(); var todayDay = today.getDate(); var todayMonth = today.getMonth()+1; var todayYear = today.getFullYear(); var todayClass = ''; + // Use UTC functions here because the date field does not contain time + // and using the UTC function variants prevent the local time offset + // from altering the date, specifically the day field. For example: + // + // ``` + // var x = new Date('2013-10-02'); + // var day = x.getDate(); + // ``` + // + // The day variable above will be 1 instead of 2 in, say, US Pacific time + // zone. + var isSelectedMonth = false; + if (typeof selected != 'undefined') { + isSelectedMonth = (selected.getUTCFullYear() == year && (selected.getUTCMonth()+1) == month); + } + month = parseInt(month); year = parseInt(year); var calDiv = document.getElementById(div_id); @@ -55,7 +71,7 @@ var CalendarNamespace = { tableRow = quickElement('tr', tableBody); for (var i = 0; i < startingPos; i++) { var _cell = quickElement('td', tableRow, ' '); - _cell.style.backgroundColor = '#f3f3f3'; + _cell.className = "nonday"; } // Draw days of month @@ -69,6 +85,13 @@ var CalendarNamespace = { } else { todayClass=''; } + + // use UTC function; see above for explanation. + if (isSelectedMonth && currentDay == selected.getUTCDate()) { + if (todayClass != '') todayClass += " "; + todayClass += "selected"; + } + var cell = quickElement('td', tableRow, '', 'class', todayClass); quickElement('a', cell, currentDay, 'href', 'javascript:void(' + callback + '('+year+','+month+','+currentDay+'));'); @@ -78,7 +101,7 @@ var CalendarNamespace = { // Draw blanks after end of month (optional, but makes for valid code) while (tableRow.childNodes.length < 7) { var _cell = quickElement('td', tableRow, ' '); - _cell.style.backgroundColor = '#f3f3f3'; + _cell.className = "nonday"; } calDiv.appendChild(calTable); @@ -86,7 +109,7 @@ var CalendarNamespace = { } // Calendar -- A calendar instance -function Calendar(div_id, callback) { +function Calendar(div_id, callback, selected) { // div_id (string) is the ID of the element in which the calendar will // be displayed // callback (string) is the name of a JavaScript function that will be @@ -97,14 +120,22 @@ function Calendar(div_id, callback) { this.today = new Date(); this.currentMonth = this.today.getMonth() + 1; this.currentYear = this.today.getFullYear(); + if (typeof selected != 'undefined') { + this.selected = selected; + } } Calendar.prototype = { drawCurrent: function() { - CalendarNamespace.draw(this.currentMonth, this.currentYear, this.div_id, this.callback); + CalendarNamespace.draw(this.currentMonth, this.currentYear, this.div_id, this.callback, this.selected); }, - drawDate: function(month, year) { + drawDate: function(month, year, selected) { this.currentMonth = month; this.currentYear = year; + + if(selected) { + this.selected = selected; + } + this.drawCurrent(); }, drawPreviousMonth: function() { diff --git a/tests/admin_widgets/tests.py b/tests/admin_widgets/tests.py index 95449ff47c..7eb68be4d0 100644 --- a/tests/admin_widgets/tests.py +++ b/tests/admin_widgets/tests.py @@ -549,6 +549,79 @@ class DateTimePickerSeleniumFirefoxTests(AdminSeleniumWebDriverTestCase): self.assertEqual( self.get_css_value('#clockbox0', 'display'), 'none') + def test_calendar_nonday_class(self): + """ + Ensure cells that are not days of the month have the `nonday` CSS class. + Refs #4574. + """ + self.admin_login(username='super', password='secret', login_url='/') + # Open a page that has a date and time picker widgets + self.selenium.get('%s%s' % (self.live_server_url, + '/admin_widgets/member/add/')) + + # fill in the birth date. + self.selenium.find_element_by_id('id_birthdate_0').send_keys('2013-06-01') + + # Click the calendar icon + self.selenium.find_element_by_id('calendarlink0').click() + + # get all the tds within the calendar + calendar0 = self.selenium.find_element_by_id('calendarin0') + tds = calendar0.find_elements_by_tag_name('td') + + # make sure the first and last 6 cells have class nonday + for td in tds[:6] + tds[-6:]: + self.assertEqual(td.get_attribute('class'), 'nonday') + + def test_calendar_selected_class(self): + """ + Ensure cell for the day in the input has the `selected` CSS class. + Refs #4574. + """ + self.admin_login(username='super', password='secret', login_url='/') + # Open a page that has a date and time picker widgets + self.selenium.get('%s%s' % (self.live_server_url, + '/admin_widgets/member/add/')) + + # fill in the birth date. + self.selenium.find_element_by_id('id_birthdate_0').send_keys('2013-06-01') + + # Click the calendar icon + self.selenium.find_element_by_id('calendarlink0').click() + + # get all the tds within the calendar + calendar0 = self.selenium.find_element_by_id('calendarin0') + tds = calendar0.find_elements_by_tag_name('td') + + # verify the selected cell + selected = tds[6] + self.assertEqual(selected.get_attribute('class'), 'selected') + + self.assertEqual(selected.text, '1') + + def test_calendar_no_selected_class(self): + """ + Ensure no cells are given the selected class when the field is empty. + Refs #4574. + """ + self.admin_login(username='super', password='secret', login_url='/') + # Open a page that has a date and time picker widgets + self.selenium.get('%s%s' % (self.live_server_url, + '/admin_widgets/member/add/')) + + # Click the calendar icon + self.selenium.find_element_by_id('calendarlink0').click() + + # get all the tds within the calendar + calendar0 = self.selenium.find_element_by_id('calendarin0') + tds = calendar0.find_elements_by_tag_name('td') + + # verify there are no cells with the selected class + selected = [td for td in tds if td.get_attribute('class') == 'selected'] + + self.assertEqual(len(selected), 0) + + class DateTimePickerSeleniumChromeTests(DateTimePickerSeleniumFirefoxTests): webdriver_class = 'selenium.webdriver.chrome.webdriver.WebDriver'