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;
}
}