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?

Vikas, the `@nickname` comment reply works only if that person has posted a comment on the post before (I didn't) and, indeed, then only if you spell the name correctly :) — BalusC, Sep 24 '12 at 10:54

score 5 · Answer 1 · answered Apr 02 '13 at 14:09

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

`

score 5 · Answer 2 · answered May 14 '15 at 16:36

5

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

mask="99/99/9999"

answered May 14 '15 at 16:36

John Alexander Betts

4,718
8
47
72

score 1 · Answer 3 · edited May 23 '17 at 12:23

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

score 1 · Answer 4 · answered Sep 02 '11 at 09:31

1

apply datePattern attribute

datePattern="MM/dd/yyyy"

answered Sep 02 '11 at 09:31

jmj

237,923
42
401
438

this also not working..... i want mask with calender in jsf/prime faces.....it means when user pass date either it automatically take date as dd/MM/yyyy format(user doesn't need to passs in format) or by selecting from calender... – Vikas Soni Sep 02 '11 at 09:49
then go for custom jquery's component – jmj Sep 02 '11 at 09:55
@Vikas: I am not quite sure if I understand what you are trying to do. The date pattern as suggested by Jigar is exactly for this purpose. You have to clarify your question to get "better" answers. How should the user enter dates? With the text field or with the date chooser or both? What are the allowed date formats a user can put in the text box ... Please be more specific. – Matt Handy Sep 02 '11 at 10:02
@Matt he wants user to enter date in text box with masked pattern `MM/dd/yyyy` and also he should be able to pick date from the component – jmj Sep 02 '11 at 10:09

score 1 · Answer 5 · answered Sep 02 '11 at 10:52

1

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

answered Sep 02 '11 at 10:52

Matt Handy

29,855
2
89
112

score 0 · Answer 6 · edited Mar 21 '13 at 12:27

0

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"

edited Mar 21 '13 at 12:27

blo0p3r

6,790
8
49
68

answered Mar 20 '13 at 09:45

François-Xavier

1

Can we apply mask operation with

6 Answers6

Linked