CODEWITHSUNDEEP
jsfprimefacescalendar
Apoorv Kansal
Apoorv Kansal

Reputation: 3290

Disable specific dates on p:calendar / p:datePicker

Is it possible to disable specific dates (for example: 15th May or 23rd June) on the PrimeFaces 3.5 <p:calendar> component? There is min and max, but I need to disable specific dates like public holidays using el expressions so I can use dynamic dates.

Using Hieu's answer, make sure the dates you disable have NO leading zeros in front (eg. '03/03/2013' should be '3/3/2013').

Upvotes: 3

Views: 15291

Answers (4)

Jasper de Vries
Jasper de Vries

Reputation: 20188

First of all: p:calendar is deprecated since PrimeFaces 10. So if you are on PrimeFaces 10 or higher, it's best to migrate to p:datePicker. With p:datePicker, although there are others ways, you can use lazy metadata to add disabled dates. I think this is the most convenient way when the dates you have to disable are many and dynamic. Quick example on how to setup the lazy metadata model:

private final DateMetadataModel modelLazy;

public MyBean() {
    DefaultDateMetadata metadataDisabled = DefaultDateMetadata.builder().disabled(true).build();
    modelLazy = new LazyDateMetadataModel() {
        @Override
        public void loadDateMetadata(LocalDate start, LocalDate end) {
            add(localDateToDisable, metadataDisabled);
        }
    };
}

See the showcase for a demo: https://www.primefaces.org/showcase/ui/input/datepicker/metadata.xhtml

Upvotes: 1

JHurtado
JHurtado

Reputation: 11

To disable an array of dates, follow these steps:

Create a string object that contains all the dates:

festivosArray = "[";
for(CalendarioDao dia : festivos){
    festivosArray += "'" + dia.getFecha() + "',";
}
festivosArray += "]";

Create a JavaScript function:

<script type="text/javascript">
function deshabFest(date) {
    var disabledDays = #{calendarioView.festivosArray};

    var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
    return [disabledDays.indexOf(string) == -1, '']
}
</script>

Use the beforeshowday attribute to call the function

<p:calendar mode="inline" locale="es" value="#{calendarioView.fechaFestivo}" id="calendarioFestivo" widgetVar="calendarioFestivo" beforeShowDay="deshabFest" />

Upvotes: 1

bilelovitch
bilelovitch

Reputation: 2175

To disable all friday days, i have used the beforeShowDay attribute on the p:calendar , the code beloow explains this :

<p:calendar ..... mask="true" locale="fr" beforeShowDay="fridaysDisabled" .... required="true" maxdate="new Date();"/>

AND the JavaScript function :

function fridaysDisabled(date)
{
  var day = date.getDay();
  return [day != 5, '']
}

Upvotes: 1

Hieu Tran
Hieu Tran

Reputation: 150

Step 1: write a javascript function to disable a list of dates

var disabledDays = ["5-15-2013", "6-23-2013"];
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}

Step 2: use beforeShowDay attribute of Primefaces datepicker

<p:calendar id="pfdate" navigator="true" pattern="MM-dd-yyyy" 
      value="#{day}" beforeShowDay="disableAllTheseDays" showOn="button"/>

Upvotes: 8

Related Questions