CODEWITHSUNDEEP
primefaces
goodprg
goodprg

Reputation: 65

p:calendar today button

I am using PF RC1, JSF 2.0.

When I click on the today button of p:calendar, by default it highlights the today's date, but the requirement is if i click on "Today" button i should get the highlighted date (today's date) in the respective text field.

This doesn't seem to work in the show case also. http://www.primefaces.org/showcase-labs/ui/calendarButtonPanel.jsf

Is it possible to write a custom code on Today button or make today button work as explained above.

Thanks.

Upvotes: 1

Views: 6083

Answers (3)

Jon
Jon

Reputation: 66

Try to include the following code into your page:

    $.datepicker._gotoToday = function( id ) {
        var date,
            target = $( id ),
            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 {
            date = new Date();
            inst.selectedDay = date.getDate();
            inst.drawMonth = inst.selectedMonth = date.getMonth();
            inst.drawYear = inst.selectedYear = date.getFullYear();
        }
        this._notifyChange( inst );
        this._setDateDatepicker(target, date);
        this._selectDate(id, this._getDateDatepicker(target));
        this._adjustDate( target );
    }

This works fine for me.

Or use mask="false" in p:calendar tag.

Upvotes: 1

Master Azazel
Master Azazel

Reputation: 600

Using PrimeFaces 5.2, you can just add showButtonPanel="true" to the p:calendar-tag

That would look something like this

datepicker with buttonpanel

When clicking on the button, todays date is selected (generates selectevent) as follows:

todays date

Upvotes: 0

maple_shaft
maple_shaft

Reputation: 10463

Basically you would need to do a jQuery bind of an event handler to the Today button on the popup. This button can be found easily enough using a specific jQuery UI class.

jQuery('.ui-datepicker-current').bind('click', function() { ... });

The problem comes within the handler for the click event, because you would need to somehow trigger a select event from within the popup and there are some challenges to doing this. The first problem that I ran into is that the Datepicker javascript object doesn't seem to have a meaningful or predictable id for me to find it. I am sure there is a way I am just not seeing it yet.

Once you have found this JS object you can call the _selectDay function on it passing the following arguments...

Datepicker._selectDay('#cal_input',0,2012, this);

Where cal_input is the id of the Calendar components text field, the second and third arguments I assume are month and year respectively, then the fourth argument I assume is the Datepicker itself.

Even if this were to work, there are existing jQuery UI bugs regarding select events not firing on the datepicker that Primefaces utilizes for its Calendar component. http://forum.primefaces.org/viewtopic.php?f=3&t=9301 This could impact the ability to do this as well.

I know this isn't a clear answer but it is a difficult problem, and I hope this gives you some insight.

Upvotes: 2

Related Questions