DatePicker is an input component to select a date.
Documentation<script type="text/javascript"> PrimeFaces.locales['es'] = { closeText: 'Cerrar', prevText: 'Anterior', nextText: 'Siguiente', monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'], monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'], dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'], dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'], dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'], weekHeader: 'Semana', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: '', timeOnlyTitle: 'Sólo hora', timeText: 'Tiempo', hourText: 'Hora', minuteText: 'Minuto', secondText: 'Segundo', currentText: 'Fecha actual', ampm: false, month: 'Mes', week: 'Semana', day: 'Día', allDayText: 'Todo el día' }; PrimeFaces.locales ['de'] = { closeText: 'Schließen', prevText: 'Zurück', nextText: 'Weiter', monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ], monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez' ], dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'], dayNamesShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'], dayNamesMin: ['S', 'M', 'D', 'M ', 'D', 'F ', 'S'], weekHeader: 'Woche', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix:'', timeOnlyTitle: 'Nur Zeit', timeText: 'Zeit', hourText: 'Stunde', minuteText: 'Minute', secondText: 'Sekunde', currentText: 'Aktuelles Datum', ampm: false, month: 'Monat', week: 'Woche', day: 'Tag', allDayText: 'Ganzer Tag' }; </script> <script type="text/javascript"> //<![CDATA[ function dateTemplateFunc(date) { return '<span style="background-color:' + ((date.day < 21 && date.day > 10) ? '#81C784' : 'inherit') + ';border-radius:50%;padding: .25em;width: 1.75em; height:1.75em; display:block;">' + date.day + '</span>'; } //]]> </script> <style type="text/css"> .value { font-weight: bold; } </style> <h:form id="form"> <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" /> <h:panelGrid columns="2" cellpadding="5"> <p:outputLabel for="inline" value="Inline:" /> <p:datePicker id="inline" value="#{calendarJava8View.date1}" inline="true" /> <p:outputLabel for="popup" value="Popup:" /> <p:datePicker id="popup" value="#{calendarJava8View.date2}" /> <p:outputLabel for="popupConvertDateTime" value="Popup (f:convertDateTime):" /> <p:datePicker id="popupConvertDateTime" value="#{calendarJava8View.date13}" pattern="MM/dd/yyyy"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </p:datePicker> <p:outputLabel for="multiselect" value="Multiple Selection:" /> <p:datePicker id="multiselect" selectionMode="multiple" value="#{calendarJava8View.multi}" readonlyInput="true" /> <p:outputLabel for="range" value="Range Selection:" /> <p:datePicker id="range" selectionMode="range" value="#{calendarJava8View.range}" readonlyInput="true" /> <p:outputLabel for="month" value="Month Picker:" /> <p:datePicker id="month" view="month" value="#{calendarJava8View.date3}" pattern="MM/yyyy" yearNavigator="true" yearRange="2000:2030" /> <p:outputLabel for="yearMonth" value="Month Picker (java.time.YearMonth):" /> <p:datePicker id="yearMonth" view="month" value="#{calendarJava8View.yearMonth}" pattern="MM/yyyy" yearNavigator="true" yearRange="2000:2030" /> <p:outputLabel for="touch" value="Touch UI:" /> <p:datePicker id="touch" value="#{calendarJava8View.date4}" touchUI="true" showOtherMonths="true"/> <p:outputLabel for="dateTemplate" value="Date Template:" /> <p:datePicker id="dateTemplate" value="#{calendarJava8View.date5}" dateTemplate="dateTemplateFunc" /> <p:outputLabel for="disabledDD" value="Disabled Date/Day:" /> <p:datePicker id="disabledDD" value="#{calendarJava8View.date6}" disabledDays="#{calendarJava8View.invalidDays}" disabledDates="#{calendarJava8View.invalidDates}" readonlyInput="true" /> <p:outputLabel for="button" value="Button:" /> <p:datePicker id="button" value="#{calendarJava8View.date7}" showIcon="true" /> <p:outputLabel for="event" value="Select Event:" /> <p:datePicker id="event" value="#{calendarJava8View.date8}"> <p:ajax event="dateSelect" listener="#{calendarJava8View.onDateSelect}" update="msgs" /> </p:datePicker> <p:outputLabel for="spanish" value="Spanish:" /> <p:datePicker id="spanish" value="#{calendarJava8View.date9}" locale="es" monthNavigator="true" pattern="yyyy-MMM-dd"/> <p:outputLabel for="german" value="German:" /> <p:outputPanel> <p:datePicker id="german" widgetVar="german" value="#{calendarJava8View.dateDe}" locale="de" monthNavigator="true" pattern="dd.MM.yyyy"/> <h:outputText value=" " /> <p:commandButton type="button" value="Client Side API: setDate (24.12.2019)" onclick="PF('german').setDate('24.12.2019')" /> <p:commandButton type="button" value="Client Side API: getDate" onclick="alert(PF('german').getDate())" /> </p:outputPanel> <p:outputLabel for="buttonbar" value="Button Bar:" /> <p:datePicker id="buttonbar" value="#{calendarJava8View.date10}" showButtonBar="true"/> <p:outputLabel for="minmax" value="Min-Max:" /> <p:datePicker id="minmax" value="#{calendarJava8View.date11}" mindate="#{calendarJava8View.minDate}" maxdate="#{calendarJava8View.maxDate}" readonlyInput="true"/> <p:outputLabel for="multi" value="Multiple Months:" /> <p:datePicker id="multi" value="#{calendarJava8View.date12}" numberOfMonths="3"/> <p:outputLabel for="time1" value="Time:" /> <p:datePicker id="time1" value="#{calendarJava8View.dateTime1}" showTime="true"/> <p:outputLabel for="time3" value="Time (Min-Max):" /> <p:datePicker id="time3" value="#{calendarJava8View.dateTime3}" showTime="true" mindate="#{calendarJava8View.minDateTime}" maxdate="#{calendarJava8View.maxDateTime}"/> <p:outputLabel for="time4" value="Time (Min-Max; preset value):" /> <p:datePicker id="time4" value="#{calendarJava8View.dateTime4}" showTime="true" mindate="#{calendarJava8View.minDateTime}" maxdate="#{calendarJava8View.maxDateTime}"/> <p:outputLabel for="time5" value="Time (with seconds):" /> <p:datePicker id="time5" value="#{calendarJava8View.dateTime5}" showTime="true" showSeconds="true"/> <p:outputLabel for="timeDe" value="Time (German):" /> <p:datePicker id="timeDe" value="#{calendarJava8View.dateTimeDe}" showTime="true" locale="de" pattern="dd.MM.yyyy" /> <p:outputLabel for="time2" value="Time (Timezone GMT+8):" /> <p:datePicker id="time2" value="#{calendarJava8View.dateTime2}" showTime="true" timeZone="GMT+8"/> <p:outputLabel for="zonedDateTime1" value="Time (ZonedDateTime; not supported yet):" /> <p:datePicker id="zonedDateTime1" value="#{calendarJava8View.zonedDateTime1}" showTime="true"/> <p:outputLabel for="timeonly" value="Time Only (HH:mm):" /> <p:datePicker id="timeonly" value="#{calendarJava8View.time1}" timeOnly="true" pattern="HH:mm"/> <p:outputLabel for="timeonlyMinMax" value="Time Only (Min-Max):" /> <p:outputPanel> <p:datePicker id="timeonlyMinMax" value="#{calendarJava8View.time3}" timeOnly="true" mindate="#{calendarJava8View.minTime}" maxdate="#{calendarJava8View.maxTime}"/> (between <h:outputText value="#{calendarJava8View.minTime}"></h:outputText> and <h:outputText value="#{calendarJava8View.maxTime}"></h:outputText>) </p:outputPanel> <p:outputLabel for="timeonlyMinMax2" value="Time Only (Min-Max; preset value):" /> <p:outputPanel> <p:datePicker id="timeonlyMinMax2" value="#{calendarJava8View.time4}" timeOnly="true" mindate="#{calendarJava8View.minTime}" maxdate="#{calendarJava8View.maxTime}" /> (between <h:outputText value="#{calendarJava8View.minTime}"></h:outputText> and <h:outputText value="#{calendarJava8View.maxTime}"></h:outputText>) </p:outputPanel> <p:outputLabel for="timeonlySeconds" value="Time Only (HH:mm:ss):" /> <p:datePicker id="timeonlySeconds" value="#{calendarJava8View.time5}" timeOnly="true" showSeconds="true" pattern="HH:mm:ss"/> <p:outputLabel for="timeonly12" value="Time Only (AM/PM):" /> <p:datePicker id="timeonly12" value="#{calendarJava8View.time6}" timeOnly="true" hourFormat="12" pattern="HH:mm"/> </h:panelGrid> <p:commandButton value="Submit" update="msgs" action="#{calendarJava8View.click}" icon="pi pi-check" /> <p:dialog modal="true" resizable="false" header="Values" widgetVar="dlg" showEffect="fold"> <p:panelGrid id="display" columns="4" columnClasses="label,value,label,value"> <h:outputText value="Inline:" /> <h:outputText value="#{calendarJava8View.date1}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Popup:" /> <h:outputText value="#{calendarJava8View.date2}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Popup (f:convertDateTime):" /> <h:outputText value="#{calendarJava8View.date13}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Multiple Selection:" /> <ui:repeat var="date" value="#{calendarJava8View.multi}" varStatus="status" size="#{calendarJava8View.multi.size()}"> #{status.first ? '' : ','} <h:outputText value="#{date}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> </ui:repeat> <h:outputText value="Range Selection:" /> <ui:repeat var="date" value="#{calendarJava8View.range}" varStatus="status" size="#{calendarJava8View.range.size()}"> #{status.first ? '' : '-'} <h:outputText value="#{date}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> </ui:repeat> <h:outputText value="Month Picker:" /> <h:outputText value="#{calendarJava8View.date3}"> <f:convertDateTime pattern="MM/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Month Picker (java.time.YearMonth):" /> <h:outputText value="#{calendarJava8View.yearMonth.toString()}" /> <h:outputText value="Touch UI:" /> <h:outputText value="#{calendarJava8View.date4}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Date Template:" /> <h:outputText value="#{calendarJava8View.date5}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Disabled Date/Day:" /> <h:outputText value="#{calendarJava8View.date6}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Button:" /> <h:outputText value="#{calendarJava8View.date7}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Select Event:" /> <h:outputText value="#{calendarJava8View.date8}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Spanish:" /> <h:outputText value="#{calendarJava8View.date9}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="German:" /> <h:outputText value="#{calendarJava8View.dateDe}"> <f:convertDateTime pattern="dd.MM.yyyy" type="localDate" /> </h:outputText> <h:outputText value="Button Bar:" /> <h:outputText value="#{calendarJava8View.date10}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Min-Max:" /> <h:outputText value="#{calendarJava8View.date11}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Multiple Months:" /> <h:outputText value="#{calendarJava8View.date12}"> <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" /> </h:outputText> <h:outputText value="Time:" /> <h:outputText value="#{calendarJava8View.dateTime1}"> <f:convertDateTime pattern="MM/dd/yyyy HH:mm" type="localDateTime" /> </h:outputText> <h:outputText value="Time (Min-Max):" /> <h:outputText value="#{calendarJava8View.dateTime3}"> <f:convertDateTime pattern="MM/dd/yyyy HH:mm" type="localDateTime" /> </h:outputText> <h:outputText value="Time (Min-Max; preset value):" /> <h:outputText value="#{calendarJava8View.dateTime4}"> <f:convertDateTime pattern="MM/dd/yyyy HH:mm" type="localDateTime" /> </h:outputText> <h:outputText value="Time (with seconds):" /> <h:outputText value="#{calendarJava8View.dateTime5}"> <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" type="localDateTime" /> </h:outputText> <h:outputText value="Time (German):" /> <h:outputText value="#{calendarJava8View.dateTimeDe}"> <f:convertDateTime pattern="dd.MM.yyyy HH:mm" type="localDateTime" /> </h:outputText> <h:outputText value="Time (Timezone GMT+8):" /> <h:outputText value="#{calendarJava8View.dateTime2}"> <f:convertDateTime pattern="MM/dd/yyyy HH:mm" type="localDateTime" /> </h:outputText> <h:outputText value="Time (ZonedDateTime; not supported yet):" /> <h:outputText value="#{calendarJava8View.zonedDateTime1}"> <f:convertDateTime pattern="dd.MM.yyyy HH:mm" type="zonedDateTime" /> </h:outputText> <h:outputText value="Time Only (HH:mm):" /> <h:outputText value="#{calendarJava8View.time1}"> <f:convertDateTime pattern="HH:mm" type="localTime" /> </h:outputText> <h:outputText value="Time Only (Min-Max):" /> <h:outputText value="#{calendarJava8View.time3}"> <f:convertDateTime pattern="HH:mm" type="localTime" /> </h:outputText> <h:outputText value="Time Only (Min-Max; preset value):" /> <h:outputText value="#{calendarJava8View.time4}"> <f:convertDateTime pattern="HH:mm" type="localTime" /> </h:outputText> <h:outputText value="Time Only (HH:mm:ss):" /> <h:outputText value="#{calendarJava8View.time5}"> <f:convertDateTime pattern="HH:mm:ss" type="localTime" /> </h:outputText> <h:outputText value="Time Only (AM/PM):" /> <h:outputText value="#{calendarJava8View.time6}"> <f:convertDateTime pattern="hh:mm a" type="localTime" /> </h:outputText> </p:panelGrid> </p:dialog> </h:form>
@Named @ViewScoped public class CalendarJava8View implements Serializable { private LocalDate date1; private LocalDate date2; private LocalDate date3; private LocalDate date4; private LocalDate date5; private LocalDate date6; private LocalDate date7; private LocalDate date8; private LocalDate date9; private LocalDate dateDe; private LocalDate date10; private LocalDate date11; private LocalDate date12; private LocalDate date13; private LocalTime time1; private LocalTime time2; private LocalTime time3; private LocalTime time4; private LocalTime time5; private LocalTime time6; private LocalDateTime dateTime1; private LocalDateTime dateTime2; private LocalDateTime dateTime3; private LocalDateTime dateTime4; private LocalDateTime dateTime5; private LocalDateTime dateTimeDe; private List<LocalDate> multi; private List<LocalDate> range; private List<LocalDate> invalidDates; private List<Integer> invalidDays; private LocalDate minDate; private LocalDate maxDate; private LocalTime minTime; private LocalTime maxTime; private LocalDateTime minDateTime; private LocalDateTime maxDateTime; private ZonedDateTime zonedDateTime1; private YearMonth yearMonth; @PostConstruct public void init() { invalidDates = new ArrayList<>(); invalidDates.add(LocalDate.now()); for (int i = 0; i < 5; i++) { invalidDates.add(invalidDates.get(i).plusDays(1)); } invalidDays = new ArrayList<>(); invalidDays.add(0); /* the first day of week is disabled */ invalidDays.add(3); minDate = LocalDate.now().minusYears(1); maxDate = LocalDate.now().plusYears(1); minTime = LocalTime.of(9, 0); maxTime = LocalTime.of(17, 0); minDateTime = LocalDateTime.now().minusWeeks(1); maxDateTime = LocalDateTime.now().plusWeeks(1); dateDe = LocalDate.of(2019, 7, 27); dateTimeDe = LocalDateTime.of(2019, 7, 27, 12, 59); dateTime4 = LocalDateTime.now(); time4= LocalTime.of(6, 30); } public void onDateSelect(SelectEvent<LocalDate> event) { FacesContext facesContext = FacesContext.getCurrentInstance(); DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd/MM/yyyy"); facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", event.getObject().format(formatter))); } public void click() { PrimeFaces.current().ajax().update("form:display"); PrimeFaces.current().executeScript("PF('dlg').show()"); } public LocalDate getDate1() { return date1; } public void setDate1(LocalDate date1) { this.date1 = date1; } public LocalDate getDate2() { return date2; } public void setDate2(LocalDate date2) { this.date2 = date2; } public LocalDate getDate3() { return date3; } public void setDate3(LocalDate date3) { this.date3 = date3; } public LocalDate getDate4() { return date4; } public void setDate4(LocalDate date4) { this.date4 = date4; } public LocalDate getDate5() { return date5; } public void setDate5(LocalDate date5) { this.date5 = date5; } public LocalDate getDate6() { return date6; } public void setDate6(LocalDate date6) { this.date6 = date6; } public LocalDate getDate7() { return date7; } public void setDate7(LocalDate date7) { this.date7 = date7; } public LocalDate getDate8() { return date8; } public void setDate8(LocalDate date8) { this.date8 = date8; } public LocalDate getDate9() { return date9; } public void setDate9(LocalDate date9) { this.date9 = date9; } public LocalDate getDateDe() { return dateDe; } public void setDateDe(LocalDate dateDe) { this.dateDe = dateDe; } public LocalDate getDate10() { return date10; } public void setDate10(LocalDate date10) { this.date10 = date10; } public LocalDate getDate11() { return date11; } public void setDate11(LocalDate date11) { this.date11 = date11; } public LocalDate getDate12() { return date12; } public void setDate12(LocalDate date12) { this.date12 = date12; } public LocalDateTime getDateTime1() { return dateTime1; } public void setDateTime1(LocalDateTime dateTime1) { this.dateTime1 = dateTime1; } public LocalTime getTime1() { return time1; } public void setTime1(LocalTime time1) { this.time1 = time1; } public List<LocalDate> getMulti() { return multi; } public void setMulti(List<LocalDate> multi) { this.multi = multi; } public List<LocalDate> getRange() { return range; } public void setRange(List<LocalDate> range) { this.range = range; } public List<LocalDate> getInvalidDates() { return invalidDates; } public void setInvalidDates(List<LocalDate> invalidDates) { this.invalidDates = invalidDates; } public List<Integer> getInvalidDays() { return invalidDays; } public void setInvalidDays(List<Integer> invalidDays) { this.invalidDays = invalidDays; } public LocalDate getMinDate() { return minDate; } public void setMinDate(LocalDate minDate) { this.minDate = minDate; } public LocalDate getMaxDate() { return maxDate; } public void setMaxDate(LocalDate maxDate) { this.maxDate = maxDate; } public LocalDateTime getDateTimeDe() { return dateTimeDe; } public void setDateTimeDe(LocalDateTime dateTimeDe) { this.dateTimeDe = dateTimeDe; } public LocalTime getTime2() { return time2; } public void setTime2(LocalTime time2) { this.time2 = time2; } public LocalTime getTime3() { return time3; } public void setTime3(LocalTime time3) { this.time3 = time3; } public LocalDate getDate13() { return date13; } public void setDate13(LocalDate date13) { this.date13 = date13; } public ZonedDateTime getZonedDateTime1() { return zonedDateTime1; } public void setZonedDateTime1(ZonedDateTime zonedDateTime1) { this.zonedDateTime1 = zonedDateTime1; } public LocalDateTime getDateTime2() { return dateTime2; } public void setDateTime2(LocalDateTime dateTime2) { this.dateTime2 = dateTime2; } public YearMonth getYearMonth() { return yearMonth; } public void setYearMonth(YearMonth yearMonth) { this.yearMonth = yearMonth; } public LocalTime getMinTime() { return minTime; } public void setMinTime(LocalTime minTime) { this.minTime = minTime; } public LocalTime getMaxTime() { return maxTime; } public void setMaxTime(LocalTime maxTime) { this.maxTime = maxTime; } public LocalDateTime getMinDateTime() { return minDateTime; } public void setMinDateTime(LocalDateTime minDateTime) { this.minDateTime = minDateTime; } public LocalDateTime getMaxDateTime() { return maxDateTime; } public void setMaxDateTime(LocalDateTime maxDateTime) { this.maxDateTime = maxDateTime; } public LocalDateTime getDateTime3() { return dateTime3; } public void setDateTime3(LocalDateTime dateTime3) { this.dateTime3 = dateTime3; } public LocalTime getTime4() { return time4; } public void setTime4(LocalTime time4) { this.time4 = time4; } public LocalTime getTime5() { return time5; } public void setTime5(LocalTime time5) { this.time5 = time5; } public LocalTime getTime6() { return time6; } public void setTime6(LocalTime time6) { this.time6 = time6; } public LocalDateTime getDateTime4() { return dateTime4; } public void setDateTime4(LocalDateTime dateTime4) { this.dateTime4 = dateTime4; } public LocalDateTime getDateTime5() { return dateTime5; } public void setDateTime5(LocalDateTime dateTime5) { this.dateTime5 = dateTime5; } }