JARCH ShowCase

AjaxCore

• Listener • Basic • PartialSubmit • Event • Counter • Selector • Process • Search • Validation • Poll • RemoteCommand • Fragment • Dropdown • Status

Input

• AutoComplete • DatePicker • InputTextarea • Calendar • CascadeSelect • BooleanButton • Editor • BooleanCheckbox • Signature • OneButton • Spinner • OneRadio • Slider • CheckboxMenu • InputText • OneMenu • Switch • TriStateCheckbox • Password • InputGroup • Keyboard • Form Layout • Rating • InputNumber • ColorPicker • InputMask • Inplace • Listbox • KeyFilter • ManyButton • Knob • ManyMenu • TextEditor • ManyCheckbox • FilterGroup • MultiSelectListbox • FilterOrder • ToggleSwitch • FilterPeriod • Chips • FilterSearch • FilterSelect • Address • Cep • Cnpj • CnpjBase • Cpf • CpfCnpj • Email • Im • Integer • Money • MonthYear • Phone

Button

• Button • Link • CommandButton • LinkButton • CommandLink • SplitButton • Cancel • Clean • Delete • Download • Insert • Login • Print • Return • Save • Search • SearchLookup • LinkPrint

Data

Panel

• Accordion • Panel • Dashboard • PanelGrid • Fieldset • Ribbon • Grid CSS • ScrollPanel • Layout • TabView • NotificationBar • Toolbar • OutputPanel • Wizard • FlexGrid • Dashboard

Overlay

• ConfirmDialog • Tooltip • OverlayPanel • Dialog • LightBox • Sidebar • FilterSearch • InsertListFilter • Select • Unique

• Breadcrumb • PanelMenu • ContextMenu • SlideMenu • Dock • Stack • MegaMenu • Steps • Menu • TabMenu • Menubar • TieredMenu • MenuButton

Charts

• Area • Export • Bar • Interactive • Bubble • Live • Donut • Static • Line • Zoom • Pie • Combined • MeterGauge • MultiAxis • OHLC • Date • Animate • Responsive

ChartJs

• Bar • PolarArea • Bubble • Radar • Donut • Mixed • Line • Interactive • Pie • Export • Scatter

Messages

• Growl • Messages • StaticMessage

Multimedia

• Compare • Barcode • GraphicImage • Media • ContentFlow • PhotoCam • Cropper • Switch • Galleria

File

• Upload • Download

DragDrop

• Draggable • DataTable • DataGrid • Custom

Client Side Validation

• Basic • Custom • Bean • Event

Dialog Framework

• Basic • Message • Data • Nested

Misc

• Responsive • PrimeIcons • AutoUpdate • FontAwesome • ThemeSwitcher • Lifecycle • OutputLabel • Log • BlockUI • Focus • Cache • Hotkey • Captcha • Printer • Clock • ProgressBar • Collector • Context • DefaultCommand • ResetInput • Effect • Resizable • ExceptionHandler • Separator • FeedReader • Spacer • IdleMonitor • Spotlight • ImportConstants • Sticky • ImportEnum • Terminal • CSP • Watermark

JARCH SHOWCASE

DatePicker (java.util.Date) DatePicker is an input component to select a date.

datePicker.xhtml
CalendarView.java

<script type="text/javascript">
    PrimeFaces.locales['es'] = {
        closeText: 'Cerrar',
        prevText: 'Anterior',
        nextText: 'Siguiente',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sábado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
        dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
        weekHeader: 'Semana',
        firstDayOfWeek: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        timeOnlyTitle: 'Sólo hora',
        timeText: 'Tiempo',
        hourText: 'Hora',
        minuteText: 'Minuto',
        secondText: 'Segundo',
        currentText: 'Fecha actual',
        ampm: false,
        month: 'Mes',
        week: 'Semana',
        day: 'Día',
        allDayText: 'Todo el día'
    };
</script>

<script type="text/javascript">
    //<![CDATA[
    function dateTemplateFunc(date) {
        return '<span style="background-color:' + ((date.day < 21 && date.day > 10) ? '#81C784' : 'inherit') + ';border-radius:50%;padding: .25em;width: 1.75em; height:1.75em; display:block;">' + date.day + '</span>';
    }
    //]]>
</script>

<style type="text/css">
    .value {
        font-weight: bold;
    }
</style>


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

    <h:panelGrid columns="2" cellpadding="5">
        <p:outputLabel for="inline" value="Inline:" />
        <p:datePicker id="inline" value="#{calendarView.date1}" inline="true" />

        <p:outputLabel for="popup" value="Popup:" />
        <p:datePicker id="popup" value="#{calendarView.date2}" />

        <p:outputLabel for="multiselect" value="Multiple Selection:" />
        <p:datePicker id="multiselect" selectionMode="multiple" value="#{calendarView.multi}" readonlyInput="true" />

        <p:outputLabel for="range" value="Range Selection:" />
        <p:datePicker id="range" selectionMode="range" value="#{calendarView.range}" readonlyInput="true" />

        <p:outputLabel for="month" value="Month Picker:" />
        <p:datePicker id="month" view="month" value="#{calendarView.date3}" pattern="MM/yyyy" yearNavigator="true" yearRange="2000:2030" />

        <p:outputLabel for="touch" value="Touch UI:" />
        <p:datePicker id="touch" value="#{calendarView.date4}" touchUI="true" showOtherMonths="true"/>

        <p:outputLabel for="dateTemplate" value="Date Template:" />
        <p:datePicker id="dateTemplate" value="#{calendarView.date5}" dateTemplate="dateTemplateFunc" />

        <p:outputLabel for="disabledDD" value="Disabled Date/Day:" />
        <p:datePicker id="disabledDD" value="#{calendarView.date6}" disabledDays="#{calendarView.invalidDays}" disabledDates="#{calendarView.invalidDates}" readonlyInput="true" />

        <p:outputLabel for="button" value="Button:" />
        <p:datePicker id="button" value="#{calendarView.date7}" showIcon="true" />

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

        <p:outputLabel for="spanish" value="Spanish:" />
        <p:datePicker id="spanish" value="#{calendarView.date9}" locale="es" monthNavigator="true" pattern="yyyy-MMM-dd"/>

        <p:outputLabel for="buttonbar" value="Button Bar:" />
        <p:datePicker id="buttonbar" value="#{calendarView.date10}" showButtonBar="true"/>

        <p:outputLabel for="minmax" value="Min-Max:" />
        <p:datePicker id="minmax" value="#{calendarView.date11}" mindate="#{calendarView.minDate}" maxdate="#{calendarView.maxDate}" readonlyInput="true"/>

        <p:outputLabel for="multi" value="Multiple Months:" />
        <p:datePicker id="multi" value="#{calendarView.date12}" numberOfMonths="3"/>

        <p:outputLabel for="time" value="Time:" />
        <p:datePicker id="time" value="#{calendarView.date13}" showTime="true"/>

        <p:outputLabel for="timeonly" value="Time Only:" />
        <p:datePicker id="timeonly" value="#{calendarView.date14}" timeOnly="true" pattern="HH:mm"/>
    </h:panelGrid>

    <p:commandButton value="Submit" update="msgs" action="#{calendarView.click}" icon="pi pi-check" />

    <p:dialog modal="true" resizable="false" header="Values" widgetVar="dlg" showEffect="fold">
        <p:panelGrid id="display" columns="4" columnClasses="label,value,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="Multiple Selection:" />
            <ui:repeat var="date" value="#{calendarView.multi}" varStatus="status" size="#{calendarView.multi.size()}">
                #{status.first ? '' : ','}
                <h:outputText value="#{date}">
                    <f:convertDateTime pattern="MM/dd/yyyy" />
                </h:outputText>
            </ui:repeat>

            <h:outputText value="Range Selection:" />
            <ui:repeat var="date" value="#{calendarView.range}" varStatus="status" size="2">
                #{status.first ? '' : '-'}
                <h:outputText value="#{date}">
                    <f:convertDateTime pattern="MM/dd/yyyy" />
                </h:outputText>
            </ui:repeat>

            <h:outputText value="Month Picker:" />
            <h:outputText value="#{calendarView.date3}">
                <f:convertDateTime pattern="MM/yyyy" />
            </h:outputText>

            <h:outputText value="Touch UI:" />
            <h:outputText value="#{calendarView.date4}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Date Template:" />
            <h:outputText value="#{calendarView.date5}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Disabled Date/Day:" />
            <h:outputText value="#{calendarView.date6}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Button:" />
            <h:outputText value="#{calendarView.date7}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Select Event:" />
            <h:outputText value="#{calendarView.date8}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Spanish:" />
            <h:outputText value="#{calendarView.date9}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Button Bar:" />
            <h:outputText value="#{calendarView.date10}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Min-Max:" />
            <h:outputText value="#{calendarView.date11}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Multiple Months:" />
            <h:outputText value="#{calendarView.date12}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Time:" />
            <h:outputText value="#{calendarView.date13}">
                <f:convertDateTime pattern="MM/dd/yyyy" />
            </h:outputText>

            <h:outputText value="Time Only:" />
            <h:outputText value="#{calendarView.date14}">
                <f:convertDateTime pattern="HH:mm" />
            </h:outputText>
        </p:panelGrid>
    </p:dialog>
</h:form>

@ManagedBean
public class CalendarView {

    private Date date1;
    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 date10;
    private Date date11;
    private Date date12;
    private Date date13;
    private Date date14;
    private List<Date> multi;
    private List<Date> range;
    private List<Date> invalidDates;
    private List<Integer> invalidDays;
    private Date minDate;
    private Date maxDate;

    @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));
        }

        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));
    }

    public void onDateSelect(SelectEvent 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 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 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<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;
    }
}

Inline:
Popup:
Multiple Selection:
Range Selection:
Month Picker:
Touch UI:
Date Template:
Disabled Date/Day:
Button:
Select Event:
Spanish:
German:
Button Bar:
Min-Max:
Multiple Months:
Time (broken before; time was not transfered to bean):
Time (German):
Time Only: