PrimeFaces-Takvim Kullanımı

Merhaba arkadaşlar. Bu yazıda sizlere PrimeFaces’ın bize verdiği güzel özelliklerden biri olan takvimin nasıl kullanacağını anlatmaya çalışacağım.

PrimeFaces’da çeşitli şekillerde takvimler bulunmakta. Sayfa açıldığında direk gelen, butona basıldığında gelen, textbox’a tıkladığınızda gelen vb. Örneğimizde 11 çeşit takvim kullanımına bakacağız. Örneğimizin kodları, açıklamaları ve çıktıları şu şekilde:

Öncelikle örnek içinde kullanacağımız <f:converDateTime> etiketinin düzgün çalışabilmesi için web.xml dosyasının içindeki context-param etiketinin arasına şu kodu ekliyoruz:

<param-name>javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZONE</param-name>
<param-value>true</param-value>

1 2	<param-name>javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZONE</param-name> <param-value>true</param-value>

Bu kodu eklemediğinizde büyük ihtimalle diyalog penceresinde tarihleri yanlış görüyor olacaksınız.

index.xhtml Kodu

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
        
    </h:head>
    <h:body>
        <h:form id="form">
    <p:growl id="msgs" showDetail="true" />
 
    <h:panelGrid columns="2" cellpadding="5">
        <p:outputLabel for="inline" value="Inline:" />
        <p:calendar id="inline"  showButtonPanel="true" value="#{calendarView.date1}" mode="inline" />
 
        <p:outputLabel for="popup" value="Popup:" />
        <p:calendar id="popup" value="#{calendarView.date2}" />
 
        <p:outputLabel for="button" value="Button:" />
        <p:calendar id="button"  value="#{calendarView.date3}" showOn="button" />
 
        <p:outputLabel for="event" value="Select Event:" />
        <p:calendar id="event" value="#{calendarView.date4}">
            <p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs" />
        </p:calendar>
 
        <p:outputLabel for="english" value="English" />
        <p:calendar  value="#{calendarView.date5}" id="english" locale="en" showButtonPanel="true" navigator="true" pattern="yyyy-MMM-dd" />
 
        <p:outputLabel for="restricted" value="Restricted:" />
        <p:calendar id="restricted" value="#{calendarView.date6}" mindate="4/1/14" maxdate="7/1/14" />
 
        <p:outputLabel for="multi" value="Multiple:" />
        <p:calendar id="multi" value="#{calendarView.date7}" pages="3" />
 
        <p:outputLabel for="effect" value="Effect:" />
        <p:calendar id="effect" value="#{calendarView.date8}" effect="fold" />
 
        <p:outputLabel for="mask" value="Mask:" />
        <p:calendar id="mask" value="#{calendarView.date9}" pattern="dd-MM-yyyy" mask="true" />
 
        <p:outputLabel for="datetime" value="Datetime:" />
        <p:calendar id="datetime" value="#{calendarView.date10}" pattern="MM/dd/yyyy HH:mm:ss" />
 
        <p:outputLabel for="time" value="Time:" />
        <p:calendar id="time" value="#{calendarView.date11}" pattern="HH:mm a" timeOnly="true"  />
    </h:panelGrid>
 
    <p:commandButton value="Submit" update="msgs" actionListener="#{calendarView.click}" icon="ui-icon-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="#{calendarView.date1}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="Popup:" />
            <h:outputText value="#{calendarView.date2}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="Button:" />
            <h:outputText value="#{calendarView.date3}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="Event:" />
            <h:outputText value="#{calendarView.date4}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="English:" />
            <h:outputText value="#{calendarView.date5}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="Restricted:" />
            <h:outputText value="#{calendarView.date6}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="Multiple:" />
            <h:outputText value="#{calendarView.date7}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="Effect:" />
            <h:outputText value="#{calendarView.date8}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="Mask:" />
            <h:outputText value="#{calendarView.date9}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>
 
            <h:outputText value="Datetime:" />
            <h:outputText value="#{calendarView.date10}">
                <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />
            </h:outputText>
 
            <h:outputText value="Time:" />
            <h:outputText value="#{calendarView.date11}">
                <f:convertDateTime pattern="HH:mm a" />
            </h:outputText>
        </p:panelGrid>
    </p:dialog>
</h:form>
    </h:body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html"

xmlns:p="http://primefaces.org/ui"

xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

<title>Facelet Title</title>

</h:head>

<h:body>

<h:form id="form">

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

<h:panelGrid columns="2" cellpadding="5">

<p:outputLabel for="inline" value="Inline:" />

<p:calendar id="inline" showButtonPanel="true" value="#{calendarView.date1}" mode="inline" />

<p:outputLabel for="popup" value="Popup:" />

<p:calendar id="popup" value="#{calendarView.date2}" />

<p:outputLabel for="button" value="Button:" />

<p:calendar id="button" value="#{calendarView.date3}" showOn="button" />

<p:outputLabel for="event" value="Select Event:" />

<p:calendar id="event" value="#{calendarView.date4}">

<p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs" />

</p:calendar>

<p:outputLabel for="english" value="English" />

<p:calendar value="#{calendarView.date5}" id="english" locale="en" showButtonPanel="true" navigator="true" pattern="yyyy-MMM-dd" />

<p:outputLabel for="restricted" value="Restricted:" />

<p:calendar id="restricted" value="#{calendarView.date6}" mindate="4/1/14" maxdate="7/1/14" />

<p:outputLabel for="multi" value="Multiple:" />

<p:calendar id="multi" value="#{calendarView.date7}" pages="3" />

<p:outputLabel for="effect" value="Effect:" />

<p:calendar id="effect" value="#{calendarView.date8}" effect="fold" />

<p:outputLabel for="mask" value="Mask:" />

<p:calendar id="mask" value="#{calendarView.date9}" pattern="dd-MM-yyyy" mask="true" />

<p:outputLabel for="datetime" value="Datetime:" />

<p:calendar id="datetime" value="#{calendarView.date10}" pattern="MM/dd/yyyy HH:mm:ss" />

<p:outputLabel for="time" value="Time:" />

<p:calendar id="time" value="#{calendarView.date11}" pattern="HH:mm a" timeOnly="true" />

</h:panelGrid>

<p:commandButton value="Submit" update="msgs" actionListener="#{calendarView.click}" icon="ui-icon-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="#{calendarView.date1}">