Can we apply mask operation with

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>

I want date textfield should in masked format (11/11/2011) with calendar button. Can we apply mask operation with calendar?

Answer 1

apply datePattern attribute

datePattern="MM/dd/yyyy" 

Answer 2

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

Answer 3

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"

Answer 4

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

mask="99/99/9999"

Answer 5

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

Answer 6

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

`