Can we apply mask operation with <p:calendar>

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

I want date textfield should in masked format (11/11/2011) with calendar button. Can we apply mask oper开发者_如何学运维ation with calendar?

You can use somehting like this: `

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

`

Since Primefaces 5.0, you can use the calendar's attribute mask:

mask="99/99/9999"

apply datePattern attribute

datePattern="MM/dd/yyyy" 

As to this post, it is not possible. The question there is answered by the PF lead developer (so trust him ;-). He suggests to write a composite component in combination with jquery (http://digitalbush.com/projects/masked-input-plugin/).

INMO , If you must use additional jquery plugin to achieve this task , you better use jquery for both : calendar and mask (a really little additional code is needed to bind bean value to the input responsible for the calendar)

take a look at this solutions

Mask the date format when using jQuery UI datepicker

and

Small jsfiddle example

and another one

Using jQueryUI Datepicker And Input Masking Together

You might address this problem by setting the input field to readonly to force users to select a date.

Here is the property to add to your input field to force this :

readonlyInput="true"