DatePicker Java 8+ Date APIs

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

<h:form id="form">
    <div class="card">

        <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true">
            <p:autoUpdate />
        </p:growl>

        <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="#{datePickerJava8View.date}" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="popupConvertDateTime" value="Popup (f:convertDateTime)" />
                <p:datePicker id="popupConvertDateTime" value="#{datePickerJava8View.date13}" pattern="MM/dd/yyyy">
                    <f:convertDateTime pattern="MM/dd/yyyy" type="localDate" />
                </p:datePicker>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="multiselect" value="Multiple Selection" />
                <p:datePicker id="multiselect" selectionMode="multiple" value="#{datePickerJava8View.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="#{datePickerJava8View.range}" readonlyInput="true" hideOnRangeSelection="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="navigatorInput" value="Navigator (Year Input)" />
                <p:datePicker id="navigatorInput" value="#{datePickerJava8View.date2}" monthNavigator="true" yearNavigator="input" showWeek="true" showLongMonthNames="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="navigatorSelect" value="Navigator (Year Select)" />
                <p:datePicker id="navigatorSelect" value="#{datePickerJava8View.date1}" monthNavigator="true" yearNavigator="select" showWeek="true" showLongMonthNames="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="@next" value="Week Picker" />
                <p:datePicker id="week" view="week" value="#{datePickerJava8View.week}">
                    <p:ajax event="dateSelect" listener="#{datePickerJava8View.onDateRangeSelect}" update="msgs" />
                </p:datePicker>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="month" value="Month Picker (Long Month Names)" />
                <p:datePicker id="month" view="month" value="#{datePickerJava8View.date3}" pattern="MM/yyyy" yearNavigator="true" yearRange="2000:2030" showLongMonthNames="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="yearMonth" value="Month Picker (java.time.YearMonth with Short Month Names)" />
                <p:datePicker id="yearMonth" view="month" value="#{datePickerJava8View.yearMonth}" 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="#{datePickerJava8View.date4}" touchUI="true" autoDetectDisplay="false" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="mask" value="Mask" />
                <p:datePicker id="mask" value="#{datePickerJava8View.date14}" pattern="MM/dd/yyyy" showButtonBar="true" mask="true" showOnFocus="false" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="dateTemplate" value="Date Template" />
                <p:datePicker id="dateTemplate" value="#{datePickerJava8View.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="#{datePickerJava8View.date6}" disabledDays="#{datePickerJava8View.invalidDays}"
                    disabledDates="#{datePickerJava8View.invalidDates}" readonlyInput="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="button" value="Button" />
                <p:datePicker id="button" value="#{datePickerJava8View.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="#{datePickerJava8View.date8}">
                    <p:ajax event="dateSelect" listener="#{datePickerJava8View.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="#{datePickerJava8View.date9}" locale="es" monthNavigator="true" showLongMonthNames="true" pattern="yyyy-MMM-dd" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="german" value="German" />
                <p:datePicker id="german" widgetVar="german" value="#{datePickerJava8View.dateDe}" locale="de" monthNavigator="true" showLongMonthNames="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="#{datePickerJava8View.date10}" showButtonBar="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="minmax" value="Min-Max" />
                <p:datePicker id="minmax" value="#{datePickerJava8View.date11}" mindate="#{datePickerJava8View.minDate}"
                    maxdate="#{datePickerJava8View.maxDate}" readonlyInput="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="multi" value="Multiple Months" />
                <p:datePicker id="multi" value="#{datePickerJava8View.date12}" numberOfMonths="3" monthNavigator="true" yearNavigator="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="enabledDates" value="Enabled Dates" />
                <p:datePicker id="enabledDates" value="#{datePickerJava8View.date15}" enabledDates="#{datePickerJava8View.validDates}"
                    readonlyInput="true" />
            </div>
        </div>

        <h5>Inline</h5>
        <p:datePicker id="inline" value="#{datePickerJava8View.date1}" inline="true" />
    </div>

    <div class="card">
        <h5>DateTime</h5>
        <div class="p-fluid grid formgrid">
            <div class="field col-12 md:col-4">
                <p:outputLabel for="time1" value="Time (with Select Event)" />
                <p:datePicker id="time1" value="#{datePickerJava8View.dateTime1}" showButtonBar="true">
                    <p:ajax event="dateSelect" listener="#{datePickerJava8View.onDateTimeSelect}" update="msgs" />
                </p:datePicker>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="time3" value="Time (Min-Max)" />
                <p:datePicker id="time3" value="#{datePickerJava8View.dateTime3}" mindate="#{datePickerJava8View.minDateTime}"
                    maxdate="#{datePickerJava8View.maxDateTime}" showButtonBar="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="time4" value="Time (Min-Max; preset value)" />
                <p:datePicker id="time4" value="#{datePickerJava8View.dateTime4}" mindate="#{datePickerJava8View.minDateTime}"
                    maxdate="#{datePickerJava8View.maxDateTime}" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="time5" value="Time (with seconds)" />
                <p:datePicker id="time5" value="#{datePickerJava8View.dateTime5}" showSeconds="true" showButtonBar="true" timeZone="UTC"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeDefaults" value="Time (with defaults)" />
                <p:datePicker id="timeDefaults" value="#{datePickerJava8View.dateTime5}" showSeconds="true" showMilliseconds="true" defaultHour="12" defaultMinute="30" defaultSecond="5" defaultMillisecond="25" timeZone="UTC"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeDe" value="Time (German)" />
                <p:datePicker id="timeDe" value="#{datePickerJava8View.dateTimeDe}" locale="de" pattern="dd.MM.yyyy" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="time2" value="Time (Timezone GMT+8)" />
                <p:datePicker id="time2" value="#{datePickerJava8View.dateTime2}" timeZone="GMT+8" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="zonedDateTime1" value="Time (ZonedDateTime; not supported yet)" />
                <p:datePicker id="zonedDateTime1" value="#{datePickerJava8View.zonedDateTime1}" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="time7" value="Time (with timeInput)" />
                <p:datePicker id="time7" value="#{datePickerJava8View.dateTime7}" timeInput="true" />
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Time Only</h5>
        <div class="p-fluid grid formgrid">
            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeonly" value="Time Only (HH:mm)" />
                <p:datePicker id="timeonly" value="#{datePickerJava8View.time1}" pattern="HH:mm" showButtonBar="true" timeZone="UTC" />
            </div>
            
            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeonlyWithIcon" value="Time Only With Icon (HH:mm)" />
                <p:datePicker id="timeonlyWithIcon" value="#{datePickerJava8View.time10}" showIcon="true" pattern="HH:mm" showButtonBar="true" timeZone="UTC" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeonlyMinMax" value="Time Only (Min-Max)" />
                <p:outputPanel>
                    <p:datePicker id="timeonlyMinMax" value="#{datePickerJava8View.time3}" mindate="#{datePickerJava8View.minTime}"
                        maxdate="#{datePickerJava8View.maxTime}" />
                    (between <h:outputText value="#{datePickerJava8View.minTime}"></h:outputText> and
                    <h:outputText value="#{datePickerJava8View.maxTime}"></h:outputText>)
                </p:outputPanel>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeonlyMinMax2" value="Time Only (Min-Max; preset value)" />
                <p:outputPanel>
                    <p:datePicker id="timeonlyMinMax2" value="#{datePickerJava8View.time4}" mindate="#{datePickerJava8View.minTime}"
                        maxdate="#{datePickerJava8View.maxTime}" />
                    (between <h:outputText value="#{datePickerJava8View.minTime}"></h:outputText> and
                    <h:outputText value="#{datePickerJava8View.maxTime}"></h:outputText>)
                </p:outputPanel>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeonlySeconds" value="Time Only (HH:mm:ss)" />
                <p:datePicker id="timeonlySeconds" value="#{datePickerJava8View.time5}" showSeconds="true" pattern="HH:mm:ss" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeonly12" value="Time Only (AM/PM)" />
                <p:datePicker id="timeonly12" value="#{datePickerJava8View.time6}" hourFormat="12" pattern="HH:mm" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeonly8" value="Time Only (with timeInput)" />
                <p:datePicker id="timeonly8" value="#{datePickerJava8View.time8}" timeInput="true" />
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="timeonlyMilliseconds" value="Time Only (HH:mm:ss.SSS a)" />
                <p:datePicker id="timeonlyMilliseconds" value="#{datePickerJava8View.time9}" showSeconds="true" showMilliseconds="true"
                    pattern="HH:mm:ss.SSS a" hourFormat="12" showButtonBar="true" />
            </div>
        </div>
    </div>
</h:form>