Skip to main content

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.

Attachments (2)
Change History (2)

Changed November 12, 2008 10:55PM UTC by kbwood comment:1

resolution: → wontfix
status: newclosed

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); }

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:2

milestone: TBD

Milestone TBD deleted