DatePicker is an input component to select datetime.
<script>
PrimeFaces.locales['es'] = {
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',
millisecondText: 'Milisegundo',
ampm: false,
month: 'Mes',
week: 'Semana',
day: 'Día',
allDayText: 'Todo el día',
today: 'Hoy',
now: 'Ahora',
clear: 'Limpiar',
aria: {
close: 'Cerrar',
previous: 'Anterior',
next: 'Siguiente',
}
};
PrimeFaces.locales ['de'] = {
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',
today: 'Aktuelles Datum',
now: 'Jetzt',
ampm: false,
month: 'Monat',
week: 'Woche',
day: 'Tag',
allDayText: 'Ganzer Tag',
aria: {
close: 'Schließen',
previous: 'Zurück',
next: 'Weiter',
}
};
</script>
<script>
//<![CDATA[
function dateTemplateFunc(date) {
return '<span style="background-color:' + ((date.day < 21 && date.day > 10) ? '#81C784' : 'inherit') + ';border-radius:50%;width: 2.5rem;height: 2.5rem;line-height: 2.5rem;display: flex;align-items: center;justify-content: center;">' + date.day + '</span>';
}
//]]>
</script>
<style>
.value {
font-weight: bold;
}
</style>
<h:form id="form">
<div class="card">
<p:growl id="msgs" showDetail="true"
skipDetailIfEqualsSummary="true" />
<h5 class="mt-0">Popup</h5>
<div class="ui-fluid grid formgrid">
<div class="field col-12 md:col-4">
<p:outputLabel for="basic" value="Basic" />
<p:datePicker id="basic" value="#{calendarView.date}" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="multiselect" value="Multiple Selection" />
<p:datePicker id="multiselect" selectionMode="multiple" value="#{calendarView.multi}" readonlyInput="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="range" value="Range Selection" />
<p:datePicker id="range" selectionMode="range" value="#{calendarView.range}" readonlyInput="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="navigator" value="Navigator" />
<p:datePicker id="navigator" value="#{calendarView.date2}" monthNavigator="true" yearNavigator="true" showWeek="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="month" value="Month Picker" />
<p:datePicker id="month" view="month" value="#{calendarView.date3}" pattern="MM/yyyy" yearNavigator="true" yearRange="2000:2030" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="touch" value="Touch UI" />
<p:datePicker id="touch" value="#{calendarView.date4}" touchUI="true" showOtherMonths="true" autoDetectDisplay="false" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="dateTemplate" value="Date Template" />
<p:datePicker id="dateTemplate" value="#{calendarView.date5}" dateTemplate="dateTemplateFunc" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="disabledDD" value="Disabled Date/Day" />
<p:datePicker id="disabledDD" value="#{calendarView.date6}" disabledDays="#{calendarView.invalidDays}"
disabledDates="#{calendarView.invalidDates}" readonlyInput="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="button" value="Button" />
<p:datePicker id="button" value="#{calendarView.date7}" showIcon="true" showOnFocus="false" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="event" value="Select Event" />
<p:datePicker id="event" value="#{calendarView.date8}">
<p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs" />
</p:datePicker>
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="spanish" value="Spanish" />
<p:datePicker id="spanish" value="#{calendarView.date9}" locale="es" monthNavigator="true" pattern="yyyy-MMM-dd" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="german" value="German" />
<p:datePicker id="german" value="#{calendarView.dateDe}" locale="de" monthNavigator="true" pattern="dd.MM.yyyy" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="buttonbar" value="Button Bar" />
<p:datePicker id="buttonbar" value="#{calendarView.date10}" showButtonBar="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="minmax" value="Min-Max" />
<p:datePicker id="minmax" value="#{calendarView.date11}" mindate="#{calendarView.minDate}"
maxdate="#{calendarView.maxDate}" readonlyInput="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="multi" value="Multiple Months" />
<p:datePicker id="multi" value="#{calendarView.date12}" numberOfMonths="3" monthNavigator="true" yearNavigator="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="time" value="Time" />
<p:datePicker id="time" value="#{calendarView.date13}" showTime="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="timeMinMax" value="Time (Min-Max)" />
<p:datePicker id="timeMinMax" value="#{calendarView.date16}" showTime="true" mindate="#{calendarView.minDateTime}"
maxdate="#{calendarView.maxDateTime}" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="timeDe" value="Time (German)" />
<p:datePicker id="timeDe" value="#{calendarView.dateTimeDe}" showTime="true" locale="de" pattern="dd.MM.yyyy" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="timeonly" value="Time Only" />
<p:datePicker id="timeonly" value="#{calendarView.date14}" timeOnly="true" pattern="HH:mm" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="timeonlyMinMax" value="Time Only (Min-Max)" />
<p:datePicker id="timeonlyMinMax" value="#{calendarView.date15}" timeOnly="true" pattern="HH:mm" mindate="#{calendarView.minTime}"
maxdate="#{calendarView.maxTime}" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="timeonlyMillis"
value="Time Only (Full Precision)" />
<p:datePicker id="timeonlyMillis" value="#{calendarView.date15}"
timeOnly="true" pattern="HH:mm:ss.SSS a" showSeconds="true" showMilliseconds="true" hourFormat="12" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="enabledDates" value="Enabled Dates" />
<p:datePicker id="enabledDates" value="#{calendarView.date17}" enabledDates="#{calendarView.validDates}" readonlyInput="true"/>
</div>
</div>
<h5>Inline</h5>
<p:datePicker id="inline" value="#{calendarView.date1}"
inline="true" showTime="true" timeInput="true" />
</div>
</h:form>
@Named
@ViewScoped
public class CalendarView implements Serializable {
private Date date;
private Date date1;
@Future
private Date date2;
private Date date3;
private Date date4;
private Date date5;
private Date date6;
private Date date7;
private Date date8;
private Date date9;
private Date dateDe;
@Future
private Date date10;
private Date date11;
private Date date12;
private Date date13;
private Date date14;
private Date date15;
private Date date16;
private Date date17;
private Date dateTimeDe;
private Date dateTimeMillis;
private List<Date> multi;
private List<Date> range;
private List<Date> invalidDates;
private List<Date> validDates;
private List<Integer> invalidDays;
private Date minDate;
private Date maxDate;
private Date minTime;
private Date maxTime;
private Date minDateTime;
private Date maxDateTime;
@PostConstruct
public void init() {
invalidDates = new ArrayList<>();
Date today = new Date();
invalidDates.add(today);
long oneDay = 24 * 60 * 60 * 1000;
for (int i = 0; i < 5; i++) {
invalidDates.add(new Date(invalidDates.get(i).getTime() + oneDay));
}
validDates = new ArrayList<>();
validDates.add(today);
for (int i = 0; i < 5; i++) {
validDates.add(new Date(validDates.get(i).getTime() + oneDay));
}
invalidDays = new ArrayList<>();
invalidDays.add(0);
/* the first day of week is disabled */
invalidDays.add(3);
minDate = new Date(today.getTime() - (365 * oneDay));
maxDate = new Date(today.getTime() + (365 * oneDay));
Calendar tmp = Calendar.getInstance();
tmp.set(Calendar.HOUR_OF_DAY, 9);
tmp.set(Calendar.MINUTE, 0);
tmp.set(Calendar.SECOND, 0);
tmp.set(Calendar.MILLISECOND, 0);
minTime = tmp.getTime();
tmp = Calendar.getInstance();
tmp.set(Calendar.HOUR_OF_DAY, 17);
tmp.set(Calendar.MINUTE, 0);
tmp.set(Calendar.SECOND, 0);
tmp.set(Calendar.MILLISECOND, 0);
maxTime = tmp.getTime();
minDateTime = new Date(today.getTime() - (7 * oneDay));
maxDateTime = new Date(today.getTime() + (7 * oneDay));
dateDe = GregorianCalendar.getInstance().getTime();
dateTimeDe = GregorianCalendar.getInstance().getTime();
dateTimeMillis = GregorianCalendar.getInstance().getTime();
}
public void onDateSelect(SelectEvent<Date> event) {
FacesContext facesContext = FacesContext.getCurrentInstance();
SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
}
public void click() {
PrimeFaces.current().ajax().update("form:display");
PrimeFaces.current().executeScript("PF('dlg').show()");
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
public Date getDate1() {
return date1;
}
public void setDate1(Date date1) {
this.date1 = date1;
}
public Date getDate2() {
return date2;
}
public void setDate2(Date date2) {
this.date2 = date2;
}
public Date getDate3() {
return date3;
}
public void setDate3(Date date3) {
this.date3 = date3;
}
public Date getDate4() {
return date4;
}
public void setDate4(Date date4) {
this.date4 = date4;
}
public Date getDate5() {
return date5;
}
public void setDate5(Date date5) {
this.date5 = date5;
}
public Date getDate6() {
return date6;
}
public void setDate6(Date date6) {
this.date6 = date6;
}
public Date getDate7() {
return date7;
}
public void setDate7(Date date7) {
this.date7 = date7;
}
public Date getDate8() {
return date8;
}
public void setDate8(Date date8) {
this.date8 = date8;
}
public Date getDate9() {
return date9;
}
public void setDate9(Date date9) {
this.date9 = date9;
}
public Date getDate10() {
return date10;
}
public void setDate10(Date date10) {
this.date10 = date10;
}
public Date getDate11() {
return date11;
}
public void setDate11(Date date11) {
this.date11 = date11;
}
public Date getDate12() {
return date12;
}
public void setDate12(Date date12) {
this.date12 = date12;
}
public Date getDate13() {
return date13;
}
public void setDate13(Date date13) {
this.date13 = date13;
}
public Date getDate14() {
return date14;
}
public void setDate14(Date date14) {
this.date14 = date14;
}
public Date getDate17() {
return date17;
}
public void setDate17(Date date17) {
this.date17 = date17;
}
public List<Date> getMulti() {
return multi;
}
public void setMulti(List<Date> multi) {
this.multi = multi;
}
public List<Date> getRange() {
return range;
}
public void setRange(List<Date> range) {
this.range = range;
}
public List<Date> getInvalidDates() {
return invalidDates;
}
public void setInvalidDates(List<Date> invalidDates) {
this.invalidDates = invalidDates;
}
public List<Date> getValidDates() {
return validDates;
}
public void setValidDates(List<Date> validDates) {
this.validDates = validDates;
}
public List<Integer> getInvalidDays() {
return invalidDays;
}
public void setInvalidDays(List<Integer> invalidDays) {
this.invalidDays = invalidDays;
}
public Date getMinDate() {
return minDate;
}
public void setMinDate(Date minDate) {
this.minDate = minDate;
}
public Date getMaxDate() {
return maxDate;
}
public void setMaxDate(Date maxDate) {
this.maxDate = maxDate;
}
public Date getDateTimeDe() {
return dateTimeDe;
}
public void setDateTimeDe(Date dateTimeDe) {
this.dateTimeDe = dateTimeDe;
}
public Date getDateDe() {
return dateDe;
}
public void setDateDe(Date dateDe) {
this.dateDe = dateDe;
}
public Date getDateTimeMillis() {
return dateTimeMillis;
}
public void setDateTimeMillis(Date dateTimeMillis) {
this.dateTimeMillis = dateTimeMillis;
}
public Date getDate15() {
return date15;
}
public void setDate15(Date date15) {
this.date15 = date15;
}
public Date getMinTime() {
return minTime;
}
public void setMinTime(Date minTime) {
this.minTime = minTime;
}
public Date getMaxTime() {
return maxTime;
}
public void setMaxTime(Date maxTime) {
this.maxTime = maxTime;
}
public Date getDate16() {
return date16;
}
public void setDate16(Date date16) {
this.date16 = date16;
}
public Date getMinDateTime() {
return minDateTime;
}
public void setMinDateTime(Date minDateTime) {
this.minDateTime = minDateTime;
}
public Date getMaxDateTime() {
return maxDateTime;
}
public void setMaxDateTime(Date maxDateTime) {
this.maxDateTime = maxDateTime;
}
}