11 Replies Latest reply on Feb 11, 2013 6:09 AM by aibek

    Enforcing edit mask for rich:calendar

    asookazian

      <rich:calendar id="start_date"
                          datePattern="MM/yyyy"
                          inputClass="dateField"
                          value="#{statementMessageAssignmentEditor.startDate}"
                          required="true"
                          enableManualInput="true"
                          showFooter="false"
                          showWeekDaysBar="false"
                          styleClass="rich-calendar-month-year-only"
                          oncurrentdateselected="event.rich.component.selectDate(event.rich.date)" />

       

      Note we're using datePattern="MM/yyyy".

       

      I am able to enter "01/01/1999", for example, into this calendar field which should not be allowed.  When the setStartDate() method is invoked, the Date that is passed is an incorrect value.

       

      entered 04/05/2002; param value in setter is Wed Apr 01 00:00:00 PST 5

       

      entered 05/06/2003; param value in setter is Sat May 01 00:00:00 PST 6

       

          public void setStartDate(Date startDate) {
              this.startDate = startDate;
          }

       

          public void setEndDate(Date endDate) {

              this.endDate = endDate;
          }

       

      Is there a way to enable an edit mask like we had in Powerbuilder?  i.e. do not allow user to enter more than the number of characters for "MM/yyyy"?

       

      Or must we handle this with custom Hibernate or Seam business validation?

        • 1. Re: Enforcing edit mask for rich:calendar
          asookazian

          Here are the values in the Oracle DB table:

           

          01-APR-05 12.00.00.000000000 AM

           

          01-MAY-06 12.00.00.000000000 AM

          • 2. Re: Enforcing edit mask for rich:calendar
            ilya_shaikovsky

            you could try to add some validation/editing functionality using oninput* events. But default input parsing/corrections performed only after the user opens calendar.

            • 3. Re: Enforcing edit mask for rich:calendar
              asookazian

              This needs to be fixed/enchanced in the RichFaces source code.

               

              Happy path:

               

              Manually input: 12/2009

              Date set: Tue Dec 01 00:00:00 PST 2009

              Re-renders: 12/2009

              Validation error: n/a

               

              Alternate path 1:

               

              Manually input: 12/02/2009

              Date set: Fri Dec 01 00:00:00 PST 2

              Re-renders: 12/0002

              Validation error: none

               

              Alternate path 2:

               

              Manually input: foobar

              Date set: n/a (validation fails)

              Re-renders: foobar

                          Validation error: 'foobar' could not be understood as a date.

               

              Alternate path 1 is a problem as no error is showing to the user and an incorrect value is being persisted to the db table.  For the Seam dev to handle this via onkey* events requires a lot of unnecessary AJAX round-trips and extra work.  Is there a JIRA for this?

              • 4. Re: Enforcing edit mask for rich:calendar
                ilya_shaikovsky

                I'm not sure how we could process

                 

                Manually input: 12/02/2009

                 

                input having MM/YY pattern.

                 

                Too many variants of wrong input could arise looking deeply into such cases and to many requirements from different application about how to handle that. So I can't clearly imagine right now how we would work at such jira But you still welcome to rise one and describe proposals on concrete corrections. Curently calendar tried to build the date cutting part of the date which seems unnesessary/wrong. This is done in order to correct simple mistakes in input. But in your case - you should seems use business validation at server side.

                • 5. Re: Enforcing edit mask for rich:calendar
                  asookazian

                  we're using datePattern="MM/yyyy", not MM/YY pattern.

                   

                  So I added the maxlength="7" attribute to the rich:calendar components and that seems to be an acceptable solution.

                   

                  I don't understand what you mean by "looking deeply into such cases and to many requirements from different  application".  This is a very basic date format validation.  There is no business logic, etc. involved to make it unique per usecase/project.  The problem occurs when there is no limit on the input length.  thx.

                  • 6. Re: Enforcing edit mask for rich:calendar
                    ilya_shaikovsky
                    The problem occurs when there is no limit on the input length.

                    normally if max length is not limited the user has more options to edit the input field. E.g. by inserting character and then erasing unnesessary one. So using this approach as built-in by default also not guaranties that all the users will be happy. But for your particular  case if this is acceptable  - agree this is easiest one solution.

                     

                    So that's is one of the points I told - we decided not to apply additional limitations by default, maybe this require from developers additional efforts in some cases - but it's not limits the other developers from the beggining.

                    • 7. Re: Enforcing edit mask for rich:calendar
                      jayavardhan

                      If i want to allow user to enter different types of Date patterns like dd/MM/yyyy, dd.MM.yyyy, dd-MM-yyyy i am able to allow user to enter one pattern at a time can you explain how i can achieve this to allow him to enter different types of datePatterns in the calendar component where enableManualInput="true".

                      if first user enters dd/MM/yyyy pattern if he not like this patttern and he changes that to dd.MM.yyyy i want him to allow but i am getting  " [severity=(ERROR 2), summary=(iaSearchTabSubView:iaSearchForm:cal_filingDate: '11.11.2011' could not be understood as a date.), detail=(iaSearchTabSubView:iaSearchForm:cal_filingDate: '11.11.2011' could not be understood as a date. Example: 25/08/11)]  "

                       

                      in the console

                      • 8. Re: Enforcing edit mask for rich:calendar
                        romuloneto

                        I accessed the page yesterday (01.08.13), had the same doubt.

                        I will share one possible solution:

                         

                        <rich:calendar id="textDataInicial" cellWidth="24px"
                        cellHeight="22px" value="#{chamadoManagedBean.chamado.dataInicial}"
                        datePattern="#{msg.date_pattern}" todayControlMode="hidden"
                        optionalFooter="hidden" style="width:73px;"
                        styleClass="richCalendar"
                        inputClass="richCalendar textDataInicial"
                        label="#{msg.global_data_inicial}"
                        enableManualInput="true">
                        </rich:calendar>
                        <rich:jQuery id="mskTextDataInicial" selector=".textDataInicial" timing="onload" query="mask('99/99/9999',{placeholder:' '})"></rich:jQuery>
                        

                         

                        Tested and is ok.

                        I am available for any questions.

                        • 9. Re: Enforcing edit mask for rich:calendar
                          aibek

                          Javascript console goes on: Uncaught TypeError: Object #<Object> has no method 'mask'

                          • 10. Re: Enforcing edit mask for rich:calendar
                            aibek

                            It was necessary to enable the plugin http://igorescobar.github.com/jQuery-Mask-Plugin/

                            • 11. Re: Enforcing edit mask for rich:calendar
                              aibek

                              It's worked! Thank you Rômulo Zanco Neto!!!