CODEWITHSUNDEEP
jsfprimefaces
begiPass
begiPass

Reputation: 2174

readOnlyInput doesn't work in PrimeFaces p:calendar

I use this (PrimeFaces, Java, JSF):

<p:calendar id="popupCal" yearRange="c:c+1" lang="fr" required="true"
            requiredMessage="Date obligatoire" readonlyInput="true"
            navigator="true" pattern="dd-M-yyyy" locale="fr"
            showOn="both" value="#{commandeMB.commande.dateCmd}"
            mindate="#{commandeMB.todaysDate}" />

and as I wrote, I set readonlyInput to true.

I tested also readonly to true and both to true but no result, always the date can be changed.

Is it a bug?

Upvotes: 7

Views: 14262

Answers (6)

karu
karu

Reputation: 9

This is how I achieved read only behaviour:

<p-calendar [readonlyInput]="true" [showOnFocus]="false">

Upvotes: -2

Ajay Upreti
Ajay Upreti

Reputation: 1

Just add [readonlyInput]="true" attribute in the input.

Example:

 <p-calendar [readonlyInput]="true">

Upvotes: -2

Shahnawaz
Shahnawaz

Reputation: 61

If you want that user must not be able to change the value of the Calender Dates, just view it then use showOn="none" and readonly="true" in p:calender attribute, I have used it and its working (I'm using Primefaces 5.0 hope it works on all versions) :

Upvotes: 6

James O&#39;Rell
James O&#39;Rell

Reputation: 11

Actually I've found the issue to be casing. In our app, it's readonlyInput and that's where it works. readOnlyInput does not.

Upvotes: 1

J Slick
J Slick

Reputation: 939

With PF 3.4, this solution will:

  • Retain 1.0 opacity on a readonly text input field (i.e., don't dim opacity with disabled=true);
  • Remove the Datepicker class from the field;
  • Unbind events from the field.

(1) Create a function:

function setCalendarVis(readOnly) { if(readOnly) $('input:text').removeClass('hasDatepicker').unbind(); }

(2) Define a calendar component:

<p:calendar readonly="#{bean.readonly}" value="#{bean.datefield}" mode="popup"/>

(3) Call the function, for example, maybe via an ajax event on a p:databable:

<p:ajax event="rowDblselect" update="@form" oncomplete="setCalendarVis(#{bean.readonly});"/>

My app uses different styles for read and write capability: enter image description here

My use of unbind() is rather brute force. You can refine it to unbind only particular events.

Flame suit on!

Upvotes: 0

Rong Nguyen
Rong Nguyen

Reputation: 4189

readonly is used when you just allow user use panel to pick date and can not change date from input. If you want user can not change date, you have to use disabled attribute to do that.

If you want user can see date picker and can not change date, you can disable dateselectevent via:

<p:calendar onfocus="$('#ui-datepicker-div td').unbind();" readonly="true"/>

Upvotes: 1

Related Questions