DatePicker is an input component to select datetime.
<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:outputScript name="locales/locale-de.js" library="primefaces" target="head"/>
<h:outputScript name="locales/locale-es.js" library="primefaces" target="head"/>
<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" showIcon="true" showOnFocus="false"/>
            </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>
package org.primefaces.showcase.view.input;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import jakarta.validation.constraints.Future;
import java.io.Serializable;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
import java.util.List;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.PrimeFaces;
import org.primefaces.event.SelectEvent;
@Named
@ViewScoped
@RegisterForReflection(serialization = true)
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;
    }
}