Calendar (Java8; LocalDate, LocalTime, LocalDateTime; requires PrimeFaces >= 8.0)

Calendar is an input component to pick a datetime.

Documentation
Values
Inline:
Popup:
Button:
Event:
German:
German (other Pattern):
Restricted:
Multiple:
Effect:
Mask:
Datetime:
Datetime (German):27.07.2019 12:59
Time Only:
<script type="text/javascript">    
    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>

<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:calendar id="inline" value="#{calendarJava8View.date1}" mode="inline" />
        
        <p:outputLabel for="popup" value="Popup:" />
        <p:calendar id="popup" value="#{calendarJava8View.date2}" />
        
        <p:outputLabel for="button" value="Button:" />
        <p:calendar id="button" value="#{calendarJava8View.date3}" showOn="button" />
        
        <p:outputLabel for="event" value="Select Event:" />
        <p:calendar id="event" value="#{calendarJava8View.date4}">
            <p:ajax event="dateSelect" listener="#{calendarJava8View.onDateSelect}" update="msgs" />
        </p:calendar>
        
        <p:outputLabel for="german" value="German:" />
        <p:calendar id="german" value="#{calendarJava8View.date5}" locale="de" navigator="true" pattern="yyyy-MMM-dd" />

        <p:outputLabel for="germanV2" value="German (other Pattern):" />
        <p:calendar id="germanV2" value="#{calendarJava8View.dateDe}" locale="de" navigator="true" pattern="dd.MM.yyyy" />

        <p:outputLabel for="restricted" value="Restricted:" />
        <p:calendar id="restricted" value="#{calendarJava8View.date6}" mindate="4/1/14" maxdate="7/1/14" />
        
        <p:outputLabel for="multi" value="Multiple:" />
        <p:calendar id="multi" value="#{calendarJava8View.date7}" pages="3" />
        
        <p:outputLabel for="effect" value="Effect:" />
        <p:calendar id="effect" value="#{calendarJava8View.date8}" effect="fold" />
        
        <p:outputLabel for="mask" value="Mask:" />
        <p:calendar id="mask" value="#{calendarJava8View.date9}" pattern="dd-MM-yyyy" mask="true" />
        
        <p:outputLabel for="datetime" value="Datetime:" />
        <p:calendar id="datetime" value="#{calendarJava8View.dateTime1}" pattern="MM/dd/yyyy HH:mm:ss" />

        <p:outputLabel for="dateTimeDe" value="Datetime (German):" />
        <p:calendar id="dateTimeDe" value="#{calendarJava8View.dateTimeDe}" locale="de" pattern="dd.MM.yyyy HH:mm" />

        <p:outputLabel for="time" value="Time Only:" />
        <p:calendar id="time" value="#{calendarJava8View.time1}" pattern="HH:mm" timeOnly="true"  />
    </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="2" columnClasses="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="Button:" />
            <h:outputText value="#{calendarJava8View.date3}">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate"/>
            </h:outputText>
            
            <h:outputText value="Event:" />
            <h:outputText value="#{calendarJava8View.date4}">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate"/>
            </h:outputText>
            
            <h:outputText value="German:" />
            <h:outputText value="#{calendarJava8View.date5}">
                <f:convertDateTime pattern="yyyy-MMM-dd" type="localDate"/>
            </h:outputText>

            <h:outputText value="German (other Pattern):" />
            <h:outputText value="#{calendarJava8View.date5}">
                <f:convertDateTime pattern="dd.MM.yyyy" type="localDate"/>
            </h:outputText>
            
            <h:outputText value="Restricted:" />
            <h:outputText value="#{calendarJava8View.date6}">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate"/>
            </h:outputText>
            
            <h:outputText value="Multiple:" />
            <h:outputText value="#{calendarJava8View.date7}">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate"/>
            </h:outputText>
            
            <h:outputText value="Effect:" />
            <h:outputText value="#{calendarJava8View.date8}">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate"/>
            </h:outputText>
            
            <h:outputText value="Mask:" />
            <h:outputText value="#{calendarJava8View.date9}">
                <f:convertDateTime pattern="MM/dd/yyyy" type="localDate"/>
            </h:outputText>
            
            <h:outputText value="Datetime:" />
            <h:outputText value="#{calendarJava8View.dateTime1}">
                <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" type="localDateTime"/>
            </h:outputText>

            <h:outputText value="Datetime (German):" />
            <h:outputText value="#{calendarJava8View.dateTimeDe}">
                <f:convertDateTime pattern="dd.MM.yyyy HH:mm" type="localDateTime"/>
            </h:outputText>
            
            <h:outputText value="Time Only:" />
            <h:outputText value="#{calendarJava8View.time1}">
                <f:convertDateTime pattern="HH:mm" type="localTime"/>
            </h:outputText>
        </p:panelGrid>
    </p:dialog>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.