DatePicker is an input component to select datetime.
<h:outputScript name="locales/locale-de.js" library="primefaces" />
<h:outputScript name="locales/locale-es.js" library="primefaces" />
<script>
//<![CDATA[
function dateTemplateFunc(date) {
// the 11th to the 20th get a green tint; size and shape come from the date cell of the theme
if (date.day > 10 && date.day < 21) {
return '<span style="display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: center; '
+ 'border-radius: inherit; background: color-mix(in srgb, var(--p-green-500) 35%, transparent);">' + date.day + '</span>';
}
return String(date.day);
}
//]]>
</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="p-fluid grid formgrid">
<div class="field col-12 md:col-4">
<p:outputLabel for="basic" value="Basic" />
<p:datePicker id="basic" value="#{datePickerView.date}" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="multiselect" value="Multiple Selection" />
<p:datePicker id="multiselect" selectionMode="multiple" value="#{datePickerView.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="#{datePickerView.range}" readonlyInput="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="navigator" value="Navigator" />
<p:datePicker id="navigator" value="#{datePickerView.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="#{datePickerView.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="#{datePickerView.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="#{datePickerView.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="#{datePickerView.date6}" disabledDays="#{datePickerView.invalidDays}"
disabledDates="#{datePickerView.invalidDates}" readonlyInput="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="button" value="Button" />
<p:datePicker id="button" value="#{datePickerView.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="#{datePickerView.date8}">
<p:ajax event="dateSelect" listener="#{datePickerView.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="#{datePickerView.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="#{datePickerView.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="#{datePickerView.date10}" showButtonBar="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="minmax" value="Min-Max" />
<p:datePicker id="minmax" value="#{datePickerView.date11}" mindate="#{datePickerView.minDate}"
maxdate="#{datePickerView.maxDate}" readonlyInput="true" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="multi" value="Multiple Months" />
<p:datePicker id="multi" value="#{datePickerView.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="#{datePickerView.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="#{datePickerView.date16}" showTime="true" mindate="#{datePickerView.minDateTime}"
maxdate="#{datePickerView.maxDateTime}" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="timeDe" value="Time (German)" />
<p:datePicker id="timeDe" value="#{datePickerView.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="#{datePickerView.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="#{datePickerView.date15}" timeOnly="true" pattern="HH:mm" mindate="#{datePickerView.minTime}"
maxdate="#{datePickerView.maxTime}" />
</div>
<div class="field col-12 md:col-4">
<p:outputLabel for="timeonlyMillis"
value="Time Only (Full Precision)" />
<p:datePicker id="timeonlyMillis" value="#{datePickerView.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="#{datePickerView.date17}" enabledDates="#{datePickerView.validDates}" readonlyInput="true"/>
</div>
</div>
<h5>Inline</h5>
<p:datePicker id="inline" value="#{datePickerView.date1}"
inline="true" showTime="true" timeInput="true" />
</div>
</h:form>