mirror of
https://github.com/django/django.git
synced 2025-11-24 21:00:12 +00:00
Fixed #4574 -- Added CSS classes to the admin calendar widget for better control over styling.
This commit is contained in:
parent
2bc5143866
commit
af67ce5e18
3 changed files with 112 additions and 7 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue