1 2 Previous Next 15 Replies Latest reply on Jan 22, 2009 5:00 AM by Anne Buit

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

    Anne Buit Newbie

      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.

        • 1. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
          Ilya Shaikovsky Master

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

          • 2. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
            Anne Buit Newbie

            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.

            • 3. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
              Ilya Shaikovsky Master

              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*

              • 4. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                Anne Buit Newbie

                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.

                • 5. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                  Ilya Shaikovsky Master

                  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.

                  • 6. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                    Anne Buit Newbie

                    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.

                    • 7. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                      Ilya Shaikovsky Master

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

                      • 8. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                        Anne Buit Newbie

                        That might work, thank you.

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

                        • 9. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                          Ilya Shaikovsky Master

                           

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

                          • 10. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                            Anne Buit Newbie

                            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?

                            • 11. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                              Ilya Shaikovsky Master

                              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.

                              • 12. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                                Anne Buit Newbie

                                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.

                                • 13. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                                  Ilya Shaikovsky Master

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

                                  • 14. Re: HtmlCalendar <rich:calendar>, multiple date patterns, bu
                                    Anne Buit Newbie

                                    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

                                    1 2 Previous Next