How to extend jQuery UI datepicker to change today button and add help icon

I would like to extend the jQuery UI datepicker widget (and name it datepickerHelp), which is based on the jQuery UI datepicker widget . The reason I'm interested in the extension, rather than directly changing the source of the jQuery user interface, is because the extension will allow me to configure the jQuery interface on a server with a fast CDN.

An extension will do two things:

  • Overrides the Today button, so when it is pressed, today's date is selected and the date picker closes.
  • Prepare a help icon in front of the Today button.

I created this script to demonstrate what I'm looking for, but it does not work, because the Today button does nothing and the help icon disappears when the Previous and Next buttons are clicked to change the months. Here is the javascript:

$.widget("ui.datepickerHelp", { _init: function() { var $el = this.element; $el.datepicker(this.options); }, _gotoToday: function(id) { var target = $(id); var inst = this._getInst(target[0]); if (this._get(inst, 'gotoCurrent') && inst.currentDay) { inst.selectedDay = inst.currentDay; inst.drawMonth = inst.selectedMonth = inst.currentMonth; inst.drawYear = inst.selectedYear = inst.currentYear; } else { var date = new Date(); inst.selectedDay = date.getDate(); inst.drawMonth = inst.selectedMonth = date.getMonth(); inst.drawYear = inst.selectedYear = date.getFullYear(); // the below two lines are new this._setDateDatepicker(target, date); this._selectDate(id, this._getDateDatepicker(target)); } this._notifyChange(inst); this._adjustDate(target); } }); $(".datepicker").datepickerHelp({ showButtonPanel: true, changeMonth: true, changeYear: true, showOtherMonths: true, beforeShow: function(input) { //prepend help button setTimeout(function() { var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane"); var btn = $("<img alt='Help' title='Help' src='http://www.amazegps.com/images/shop/helpIcon.png' width='26' height='26' style='float: left; margin: 0.6em 0.2em 0.4em; cursor: pointer;' />"); btn.prependTo(buttonPane); }, 1); } }) 

My demo was paved from these SO answers:

  • Irvin Dominin answers this question shows an example of how to extend the datepicker, which I used as a starting point.
  • This example uses the Today button, but it is not “packaged” as an extension where the existing _gotoToday method is correctly overridden.
  • This example tries to access the help icon, but since it is implemented in the beforeShow method, the icon disappears when navigating the calendar. The solution I need is to modify the existing button bar and is “packaged” into one extension.

Can someone fix my demo to be a proper extension or to provide pointers or resources explaining how to extend the jQuery UI datepicker?

+1
jquery-ui jquery-plugins jquery-ui-datepicker
Dec 09 '16 at 17:47
source share

No one has answered this question yet.

See similar questions:

64
Today button in jQuery Datepicker not working
twenty
How to add buttons to jQuery datepicker on button bar?
eleven
Extension of jQuery user interface components (overriding jQuery Datepicker to prevent incorrect input)

or similar:

764
How to remove close button in jQuery UI dialog?
380
How to change button text in jQuery?
232
How to pre-populate jQuery Datepicker text box with today's date?
191
How to resize jQuery DatePicker control
fifty
jQuery datepicker from today as maxdate
13
jQuery Datepicker: prevent closing selection when clicking on date
2
JQuery UI datepicker extension
one
jquery datepicker after setDate can no longer change month and year in title
0
How to activate jquery dialogs returned inside tab widget generated by ajax datepicker date event?
0
DatePicker JQUERY-UI control does not respond to formatting



All Articles