readOnlyInput doesn't work in PrimeFaces p:calendar

Question

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?

What version are you using? Note that `p:calendar` is deprecated. Please use `p:datePicker` instead. — Jasper de Vries, Dec 15 '22 at 14:31

score 6 · Answer 1 · edited Jul 20 '17 at 13:02

6

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

edited Jul 20 '17 at 13:02

Youcef LAIDANI

55,661
15
90
140

answered Dec 02 '15 at 14:36

Shahnawaz

61
1
3

Rong Nguyen · Answer 2 · 2013-05-10T01:54:41.713

1

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

edited May 10 '13 at 01:54

answered May 09 '13 at 12:16

Rong Nguyen

4,143
5
27
53

but with disable, the component doesn't appear well – begiPass May 09 '13 at 21:20
@begiPass: So what do you want ? – Rong Nguyen May 10 '13 at 01:17

score 1 · Answer 3 · answered Feb 17 '17 at 15:21

1

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

answered Feb 17 '17 at 15:21

James O'Rell

11
1

J Slick · Answer 4 · 2015-02-11T22:37:19.603

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!

score -2 · Answer 5 · edited Feb 15 '19 at 08:02

-2

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

Example:

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

edited Feb 15 '19 at 08:02

Guillermo Cacheda

2,162
14
23

answered Feb 15 '19 at 07:35

Ajay Upreti

1
1

1

The question is about PrimeFaces, not PrimeNG. – Jasper de Vries Dec 15 '22 at 14:24

score -2 · Answer 6 · answered Jun 24 '21 at 05:38

-2

This is how I achieved read only behaviour:

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

answered Jun 24 '21 at 05:38

karu

9
4

1

The question is about PrimeFaces, not PrimeNG. – Jasper de Vries Dec 15 '22 at 14:23

readOnlyInput doesn't work in PrimeFaces p:calendar

6 Answers6