title: updating component primefaces datepicker with pattern "MMMM yyyy" via ajax call leads to "uncaught name at position [...]" exception
body: <p>I have a primeface datepicker inside a modal dialog. Setting the initial date with the pattern "<em>MMMM yyyy</em>" (german) works fine. When i am trying to update the componenent via an ajax call im getting the javascript exception "uncaught name at positon [...]".</p>
  
  <p>I am using Primefaces 7.0 and wrote a Year Month Converter by myself.</p>
  
  <p>PrimeFaces locale:</p>
  
  <pre><code>PrimeFaces.locales['de'] = {
      closeText: 'Schließen',
      prevText: 'Zurück',
      nextText: 'Weiter',
      monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
      monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
      dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
      dayNamesShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
      dayNamesMin: ['S', 'M', 'D', 'M ', 'D', 'F ', 'S'],
      weekHeader: 'Woche',
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: '',
      timeOnlyTitle: 'Nur Zeit',
      timeText: 'Zeit',
      hourText: 'Stunde',
      minuteText: 'Minute',
      secondText: 'Sekunde',
      currentText: 'Aktuelles Datum',
      ampm: false,
      month: 'Monat',
      week: 'Woche',
      day: 'Tag',
      allDayText: 'Ganzer Tag',
  };
  </code></pre>
  
  <p>Converter:</p>
  
  <pre><code>/**
   * The Class YearMonthConverter.
   */
  @Slf4j
  @SuppressWarnings("common-java:DuplicatedBlocks")
  @FacesConverter(value = "yearMonthConverter")
  public class YearMonthConverter implements Converter {
  
      private static final String PATTERN = "MMMM yyyy";
  
      @Override
      public Object getAsObject(FacesContext facesContext, UIComponent uiComponent, String s) {
          String componentPattern = extractPattern(uiComponent);
          String pattern = componentPattern.equals("") ? PATTERN : componentPattern;
          DateTimeFormatter formatter = DateTimeFormatter.ofPattern(pattern, Locale.GERMANY);
  
          try {
              return YearMonth.parse(s, formatter);
          } catch (DateTimeParseException e) {
              log.warn("conversion of date '{}' expected pattern '{}' failed with {}", s, pattern, e);
              return YearMonth.now();
          }
      }
  
  
      @Override
      public String getAsString(FacesContext facesContext, UIComponent uiComponent, Object o) {
          if (o instanceof YearMonth) {
              String componentPattern = extractPattern(uiComponent);
              String pattern = componentPattern.equals("") ? PATTERN : componentPattern;
              DateTimeFormatter formatter = DateTimeFormatter.ofPattern(pattern, Locale.GERMANY);
  
              return formatter.format((YearMonth) o);
          } else {
              return null;
          }
      }
  
      private String extractPattern(UIComponent component) {
          // try to get the pattern from component
          if (component instanceof Calendar) {
              Calendar calendarComponent = (Calendar) component;
              return calendarComponent.getPattern();
          } else if (component instanceof DatePicker) {
              DatePicker datepickerComponent = (DatePicker) component;
              return datepickerComponent.getPattern();
          }
  
          return "";
      }
  }
  </code></pre>
  
  <p>Example xhtml-file:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:p="http://primefaces.org/ui"
        xmlns:composite="http://java.sun.com/jsf/composite"
        xmlns:h="http://xmlns.jcp.org/jsf/html"&gt;
  
  &lt;composite:interface&gt;
  
  &lt;/composite:interface&gt;
  
  &lt;composite:implementation&gt;
  
      &lt;style type="text/css"&gt;
          .ui-panel .ui-panel-content {
              padding: 0;
          }
      &lt;/style&gt;
  
          &lt;!-- modaler someDialog --&gt;
          &lt;p:dialog id="someDialog"
                    header="some header"
                    widgetVar="someDlg"
                    modal="true"
                    width="500"
                    height="280"
                    resizable="false"
                    closeOnEscape="true"&gt;
  
              &lt;p:panel id="pnlContent" styleClass="ui-noborder"&gt;
                  &lt;p:panelGrid id="inputArea" columns="2"&gt;
                      &lt;p:outputLabel value="Label:" style="width: 12em; display: block;"/&gt;
                      &lt;p:outputLabel value="example"
                                     style="display: block;"/&gt;
  
                      &lt;p:outputLabel value="Monat:" style="width: 12em; display: block;"/&gt;
                      &lt;h:panelGroup&gt;
                          &lt;!-- Monat zurück --&gt;
                          &lt;p:commandButton
                                  id="btnPrevMonth"
                                  action="#{someDialogVC.previousMonth}"
                                  style="padding: 2px"
                                  icon="fa fa-angle-double-left"/&gt;
                          &lt;!-- Monatsanzeige --&gt;
                          &lt;p:datePicker id="dpMonat" view="month"
                                        value="#{someDialogVC.state.selektierterMonat}"
                                        converter="yearMonthConverter" pattern="MMMM yyyy" yearNavigator="true"
                                        yearRange="2000:2050" inputStyle="width: 17em;" readonlyInput="true"&gt;
                              &lt;p:ajax event="dateSelect" listener="#{someDialogVC.monthChanged}"/&gt;
                          &lt;/p:datePicker&gt;
                          &lt;!-- Monat vor --&gt;
                          &lt;p:commandButton
                                  id="btnNextMonth"
                                  action="#{someDialogVC.nextMonth}"
                                  style="padding: 2px"
                                  icon="fa fa-angle-double-right"/&gt;
                      &lt;/h:panelGroup&gt;
                  &lt;/p:panelGrid&gt;
  
                  &lt;p:separator style="border-color: #aaaaaa; margin-bottom: 10px;"/&gt;
  
                  &lt;div style="display: flex; justify-content: flex-end"&gt;
                      &lt;p:commandButton id="btnCreate"
                                       value="Anlegen"
                                       action="#{someDialogVC.createAndExit()}"
                                       disabled="#{someDialogVC.doGetAnlegenDisabled()}"/&gt;
                  &lt;/div&gt;
              &lt;/p:panel&gt;
  
              &lt;p:blockUI block="pnlContent" trigger="btnCreate"&gt;
                  &lt;p:graphicImage name="images/loader.gif"/&gt;
              &lt;/p:blockUI&gt;
  
          &lt;/p:dialog&gt;
  
  &lt;/composite:implementation&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>setting initial date in bean:</p>
  
  <pre><code>    @PostConstruct
      public void init() {
          data = new someDialogVO();
          state = new someDialogVS();
  
          state.setSelektierterMonat(YearMonth.now());
      }
  </code></pre>
  
  <p>code snippets bean:</p>
  
  <pre><code>    public void previousMonth() {
          state.setSelektierterMonat(state.getSelektierterMonat().minusMonths(1L));
          updateMonat();
      }
  
      public void nextMonth() {
          state.setSelektierterMonat(state.getSelektierterMonat().plusMonths(1L));
          updateMonat();
      }
  
      private void updateMonat() {
          PrimeFaces.current().ajax().update("contentForm:someDialog:dpMonat");
      }
  </code></pre>
  
  <p>After the ajax update call i am able to see, that the new Month is selected visually but after some milliseconds i am getting the described javascript exception. When using the pattern "<em>MM.yyyy</em>" everything works fine.</p>