Search and Top Navigation
#3513 closed feature (wontfix)
Opened October 24, 2008 05:54PM UTC
Closed November 12, 2008 10:55PM UTC
Last modified October 11, 2012 09:15PM UTC
Images for Prev/next in DatePicker
| Reported by: | ruler | Owned by: | grabanski |
|---|---|---|---|
| Priority: | minor | Milestone: | |
| Component: | ui.datepicker | Version: | 1.5.2 |
| Keywords: | Prev Next Image | Cc: | |
| Blocked by: | Blocking: |
Description
I would like to be able to:
- Use images for Prev/Next for the datepicker, and
- Have the images show up on both sides of the datepicker
This requires modification of the rendering code, which I have attached as well. I added three new properties:
prevTextDisabled - To supply html for the prevText when disabled
nextTextDisabled - To supply html for the nextText when disabled
prevNextAlone - To specify that the Prev/Next should be rendered before/after the calendar
The code changes from UI 1.5.2 is as follows:
1210d1209
< var prevTextDisabled = this._get(inst, 'prevTextDisabled');
1213d1211
< if (!prevTextDisabled) prevTextDisabled = prevText;
1217c1215
< (hideIfNoPrevNext ? '' : '<label>' + prevTextDisabled + '</label>')) + '</div>';
---
> (hideIfNoPrevNext ? '' : '<label>' + prevText + '</label>')) + '</div>';
1219d1216
< var nextTextDisabled = this._get(inst, 'nextTextDisabled');
1222d1218
< if (!nextTextDisabled) nextTextDisabled = nextText;
1226c1222
< (hideIfNoPrevNext ? '' : '<label>' + nextTextDisabled + '</label>')) + '</div>';
---
> (hideIfNoPrevNext ? '' : '<label>' + nextText + '</label>')) + '</div>';
1230,1246c1226,1233
< var html = '';
< var prompt_html = (prompt ? '<div class="' + this._promptClass + '">' + prompt + '</div>' : '');
< var today_html = (this._isInRange(inst, (this._get(inst, 'gotoCurrent') && inst.currentDay ?
< currentDate : today)) ? '<div class="ui-datepicker-current">' +
< '<a onclick="jQuery.datepicker._gotoToday(\\'#' + inst.id + '\\');"' +
< (showStatus ? this._addStatus(inst, this._get(inst, 'currentStatus') || ' ') : '') + '>' +
< currentText + '</a></div>' : '');
< if (this._get(inst, 'prevNextAlone')) {
< html = prompt_html + today_html +
< (closeAtTop && !inst.inline ? controls : '') +
< '<div class="ui-datepicker-links">' + (isRTL ? next : prev) + '</div>';
< } else {
< html = prompt_html +
< (closeAtTop && !inst.inline ? controls : '') +
< '<div class="ui-datepicker-links">' + (isRTL ? next : prev) +
< today_html + (isRTL ? prev : next) + '</div>';
< }
---
> var html = (prompt ? '<div class="' + this._promptClass + '">' + prompt + '</div>' : '') +
> (closeAtTop && !inst.inline ? controls : '') +
> '<div class="ui-datepicker-links">' + (isRTL ? next : prev) +
> (this._isInRange(inst, (this._get(inst, 'gotoCurrent') && inst.currentDay ?
> currentDate : today)) ? '<div class="ui-datepicker-current">' +
> '<a onclick="jQuery.datepicker._gotoToday(\\'#' + inst.id + '\\');"' +
> (showStatus ? this._addStatus(inst, this._get(inst, 'currentStatus') || ' ') : '') + '>' +
> currentText + '</a></div>' : '') + (isRTL ? prev : next) + '</div>';
1334,1338c1321,1322
< (!closeAtTop && !inst.inline ? controls : '');
< if (this._get(inst, 'prevNextAlone')) {
< html += '<div class="ui-datepicker-links">' + (isRTL ? prev : next) + '</div>';
< }
< html += '<div style="clear: both;"></div>' +
---
> (!closeAtTop && !inst.inline ? controls : '') +
> '<div style="clear: both;"></div>' +
I have also attached the full, changed, js, and a screenshot of what it looks like when implemented.
This can already be achieved. Set the prevText and nextText to show the desired images:
$("#dp").datepicker({prevText: '<img src="prev.gif"/>', nextText: '<img src="next.gif"/>'});
Then use CSS to make room for and reposition these links:
#dp { position: relative; padding: 0px 20px; width: 190px; }
#dp .ui-datepicker-prev { position: absolute; left: 0px; top: 50px; }
#dp .ui-datepicker-next { position: absolute; right: 0px; top: 50px; }
The latest CSS dims the prev/next images when they are not applicable. The relevant section is:
.ui-datepicker-links label img { opacity: 0.5; filter: alpha(opacity = 50); }