Opened 11 years ago

Closed 11 years ago

Last modified 7 years ago

#3513 closed feature (wontfix)

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') || '&#xa0;') : '') + '>' +
<                               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') || '&#xa0;') : '') + '>' +
>                       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)

datepicker-with-prev-next-images.png (20.2 KB) - added by ruler 11 years ago.
Screen shot using images
ruler.ui.datepicker.js (65.9 KB) - added by ruler 11 years ago.
Modified datepicker with changes described

Download all attachments as: .zip

Change History (4)

Changed 11 years ago by ruler

Screen shot using images

Changed 11 years ago by ruler

Attachment: ruler.ui.datepicker.js added

Modified datepicker with changes described

comment:1 Changed 11 years ago by kbwood

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

comment:2 Changed 7 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.