开发者

Can we apply mask operation with <p:calendar>

开发者 https://www.devze.com 2023-04-02 03:55 出处:网络
<h:column> <f:facet name=\"header\"> <h:outputLabel value=\"#{label.asOfDate}\" style=\"font-weight:bold\" />
<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"
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号