Reset date in a p:calendar

[pauga]

Hi,

now i´m working with primefaces v3.M2. In my app I use p:calendar component as 'readonly' field. I have a problem with that, when users select a date, is imposible to unselect it ... i propose to add a button that clear the calendar, and unselect the previous date.

I found another problem with p:calendar, when click the 'today' button, ajax event doesnt´t work; only work fine when I select a date clicking over the number of the day.

Please help me out in this.

Thanks in advance

[khizar]

+1 for the clear button request

[gsouza]

yeah!
i want this to!

[pauga]

have someone found any way to implement that????

Best regards.

[palace]

You have to make it not read-only for this to work right now. Can you make it not read-only? Should be more user-friendly then since users can just tab and enter the value directly. To clear the date you just submit an empty value

[pauga]

I cannot make it not read-only, that is the problem

[muwooer]

I need this, too. Can someone add reset button to calendar?

[ltune]

Should be more user-friendly then since users can just tab and enter the value directly.

You can initalize your Date member in construtor to the date you want and make the component readonly="true" (note in userguide: readonly, not "read-only")
and to prevent users to type anything use: readOnlyInputText="true". To be completely sure use minDate and maxDate to the Intialized value.

Can someone add reset button to calendar?

You just add a simple p:commandbutton with update={calndars`id} and an action that resets the beanValue, (method: String yourMethod() in your Bean) Make sure to return null to prevent navigation. Ready.

Stay tuned.

Adam

[george.gastaldi]

Placing a button is not enough, there are screens which do not accept adding another button.

It should be allowed to render a "Clear" button or any custom button

[MikeK]

You can do this with Javascript.


Here is the code...

Code: Select all

 
<p:calendar value="#{property.propDate}" id="date" readOnlyInputText="true" pattern="MM/dd/yyyy" size="15" widgetVar="dateVar" />
                        <p:spacer width="10" />
                        <p:commandLink value="Clear Date" onclick="javascript:clearDate();" />

Here is the Javascript...

Code: Select all

function clearDate() {
    dateVar.setDate(null);
}

Alternative Javascript

Code: Select all

function clearDate() {
    document.getElementById("form1:date_input").value = "";
}