HtmlCalendar <rich:calendar>, multiple date patterns, button

[abuit]

Hello,

I was wondering whether or not it is possible to set multiple date patterns for the RichFaces' calendar component, in a dynamich JSF environment, to be specific.

HtmlCalendar.setDatePattern("dd MMMM yyyy, HH:mm") works like a charm, however,
setDatePattern(
"dd MMMM yyyy, HH:mm;" +
"d MMMM yyyy, HH:mm;" +
"dd-MMMM-yyyy, HH:mm;" +
"d-MMMM-yyyy, HH:mm;" +
"dd-MM-yyyy, HH:mm;" +
"d-M-yyyy, HH:mm;" +
"dd-M-yyyy, HH:mm;" +
"d-MM-yyyy, HH:mm;" +
"dd MM yyyy, HH:mm;" +
"d M yyyy, HH:mm; " +
"dd M yyyy, HH:mm; " +
"d MM yyyy, HH:mm;" +
"ddMMyyyy, HH:mm");

does unfortunately not work.

Second, in a dynamic JSF environment, it is not possible to set onClicks, onBlur's etc of the calendar button. At least, I can't find the properties.

Thanks in advance, keep up the great work.

[ilya_shaikovsky]

1) should be only one pattern.
2) check additional evens. onShow called on button click for example.

[abuit]

1) Then would it be possible to add edit masks for the calendar input?

2) button click is not sufficient for our application, I need to manage the focus client-sided. This includes onBlur, onFocus and onKeyDown.

For example, when the value of the date field has changed, we make it fire an event to the server when it loses focus, except for when the focus moved to the button. Also, when the user presses shift-tab while the focus is on the button, the event is also halted.

This is why I need to be able to set those variables, I hope you understand my problem. Thank you for your time.

[ilya_shaikovsky]

1) default label RFC for calendar already filled. Also you could use tooltip to inform the user about pattern.

2) we provide all standard events for input. check all the events like oninput*

[abuit]

Thank you for your swift replies.

Regarding the first issue, I currently get conversion errors when I set a date like 01-01-2000. I would like to see it converted client-sided, but I guess i can write my own method for this.

Regarding the second issue:

I get the feeling we are mistunderstanding eachother here, I apologise if I wasn't clear about this issue.

I understand that the input has all standard events, however, I would like to set seperate actions for similiair events, depending on whether the focus is on the field of the calendar component, or on the button that opens the calendar.

for instance:

HtmlCalendar.setOninputfocus("doThis()");
HtmlCalendar.setOninputblur("performThis()");

Those methods exist, and they work perfect. However, I would like to see the following methods added:

HtmlCalendar.setOnCalendarbuttonfocus("doThat()");
HtmlCalendar.setOnCalendarbuttonfocus("eatThat()");

Again, thank you for your time.

[ilya_shaikovsky]

unfortunatelly button implemented just as img element. So according to

http://www.w3.org/TR/html401/struct/objects.html#h-13.2

it has no focus or blur events.

[abuit]

I see, this explains everything. I assume this also means that it's not possible to open the calendar popup without using a mouse?

If it's possible, please consider changing it's type to a button and add a couple of setters for the button's javascript actions in a future release.

Thanks again for your time.

[ilya_shaikovsky]

I could suggest a workaround.. You could just hide standard button with CSS and use some your control which will activate the calendar popup via JS API ;)

[abuit]

That might work, thank you.

Could you share the onclick event that I would have to set in order to open the calendar popup?

[ilya_shaikovsky]

 <a4j:outputPanel id="calendar" layout="block">
 <rich:calendar value="#{calendarBean.selectedDate}"
 locale="#{calendarBean.locale}" id="cal"
 popup="#{calendarBean.popup}"
 datePattern="#{calendarBean.pattern}"
 showApplyButton="#{calendarBean.showApply}" cellWidth="24px" cellHeight="22px" style="width:200px"/>
 <h:outputLink value="#" onclick="#{rich:component('cal')}.switchState(event)">switch</h:outputLink>
 </a4j:outputPanel>

here you are. ;)

[abuit]

Hello again!

The solution worked like a charm in IE, however FF is a different story.

I added a button to the date component's parent with an onclick:
"document.getElementById('"+dateComponent.getClientId(context)+"').component.switchState(event);"

The problem is that in FF, the popup (absolute positioned table) gets mispositioned.

IE sets the style of the popup to
position: absolute;
z-index: 3;
left: 161px;
top: 25px;
and this is correct.

However, in Firefox, the following happens:
position: absolute;
z-index: 3;
left: -195px;
top: -355px;
causing the popup to become invisible, since it's on a big div with overflow hidden.

Removing the left and top attributes would cause the popup to be in the correct position in FF, however, it would move the popup to the button's position in IE.

Can anyone help me out here?

[ilya_shaikovsky]

Sorry.. but works fine on my side under 3.3.1 snapshots. and which version you using? provide case latest snippet please if update not helps you.

[abuit]

I'm using RichFaces 3.3.0 CR2.

I made a class that extends HtmlAjaxOutputPanel, with two children, an HtmlCalendar and an HtmlAjaxCommandButton, since adding children to the HtmlCalendar didn't turn out that great :)

In the encodeBegin I set the onClick of the HtmlAjaxCommandButton to
document.getElementById('"+this.getCalendar().getClientId(context)+"').component.switchState(event);

Manual input is set to enabled.

That's basically all there is to it. I'm using a subclass to wrap the HtmlCalendar, but that shouldn't really affect the component.

[ilya_shaikovsky]

It would be great if you will be able to share sample(by email or just some share).

[abuit]

Made a small sample (subclass of HtmlAjaxOutputPanel), it should show the issue in both IE and FF:

Init:

HtmlAjaxOutputPanel randomBody = new HtmlAjaxOutputPanel();
 HtmlAjaxOutputPanel calendarWrapper = new HtmlAjaxOutputPanel();
 HtmlAjaxCommandButton button = new HtmlAjaxCommandButton();
 HtmlCalendar calendar = new HtmlCalendar();

 this.getChildren().add(randomBody);
 randomBody.getChildren().add(calendarWrapper);
 calendarWrapper.getChildren().add(calendar);
 calendarWrapper.getChildren().add(button);

 randomBody.setId("randombody");
 randomBody.setLayout("block");
 randomBody.setStyle("width: 500px;" +
 "height: 500px;" +
 "padding-top: 100px;" +
 "text-align: center;");

 calendarWrapper.setId("calendarWrapper");
 calendarWrapper.setStyle("width: 200px; height: 25px;");

 calendar.setStyle("width: 170px; height: 25px;");
 calendar.setEnableManualInput(true);
 calendar.setId("calendar");

 button.setStyle("width: 30px; height: 25px;");
 button.setId("popupButton");

encodeBegin:

public void encodeBegin(FacesContext context){
 HtmlAjaxCommandButton button = (HtmlAjaxCommandButton)this.findComponent("popupButton");
 HtmlCalendar calendar = (HtmlCalendar)this.findComponent("calendar");

 button.setOnclick("document.getElementById('"+calendar.getClientId(context)+"').component.switchState(event); " +
 "return false;");
 }

I hope this is sufficient