Можем ли мы применить операцию маски с <p: calendar>

Question

<h:column>
    <f:facet name="header">
        <h:outputLabel value="#{label.asOfDate}" style="font-weight:bold" />
        <h:outputLabel value="*"
            style="font-weight:bold; color:red; font-size:150%" />
    </f:facet>

    <p:calendar id="date" required="true" navigator="true"
        mindate="#{utils.minDate}" pattern="#{label.dateFormat}"
        maxdate="#{utils.maxDate}" value="#{policy.asOfDt}"
        requiredMessage="#{label.asOfDateRequired}" showOn="button">
        <f:validator validatorId="CustomDateValidator" />
    </p:calendar>

</h:column>

Я хочу, чтобы текстовое поле даты было в замаскированном формате (11/11/2011) с кнопкой календаря. Можно ли применить маску к календарю?

Answer 1

Вы можете использовать что-то вроде этого: `

<script type="text/javascript" language="JavaScript">
          var $ = jQuery;
          $(document).ready(function() {
              $("input[id*='Date']").mask('99/99/9999');
          });
     </script>
     <p:calendar id="documentDate" />

`

Answer 2

Начиная с Primefaces 5.0, вы можете использовать атрибут календаря mask :

mask="99/99/9999"

Answer 3

INMO, если вам нужно использовать дополнительный плагин jquery для выполнения этой задачи, вам лучше использовать jquery для: календаря и маски (очень маленький дополнительный код необходим для привязки значения бина к входу, отвечающему за календарь)

взгляните на это решение

Маска формата даты при использовании jQuery UI datepicker

и

Пример малого jsfiddle

и еще один

Использование jQueryUI Datepicker и маскирование ввода вместе

Answer 4

Что касается этого поста , то это невозможно. На этот вопрос отвечает ведущий разработчик PF (так что верьте ему ;-). Он предлагает написать составной компонент в сочетании с jquery (http://digitalbush.com/projects/masked-input-plugin/).

Answer 5

применить datePattern атрибут

datePattern="MM/dd/yyyy" 

Answer 6

Вы можете решить эту проблему, установив в поле ввода значение readonly, чтобы заставить пользователей выбирать дату.

Вот свойство, которое нужно добавить в поле ввода для принудительного ввода:

readonlyInput="true"