PrimeUI/PrimeElements issue involving datepicker.

kaham1993 · 06 Dec 2016, 23:26

Hi there. Before I begin let me apologize for any lack of terminology.

My current task right now is replacing a web page with PrimeUI/PrimeElements functionality; as we are looking for candidates to replace Richfaces & Seam. The two most important parts of this page are the Search Filter and the Datatable. In fact, it's the setup for most of our web pages.

So far I have a PrimeElements version of the table (<p-datatable>). I understand that applying column and global filters can be as easy as entering "filter : true" into their respective places, and I can easily say that it could replace our old search filter and look and function much more efficiently than before. However, it's not what I'm trying to do. What I'm trying to do is use PrimeUI & Prime Elements to make the page work (mostly) exactly like it did before.

1. Enter in the separate filters for the different columns.
2. Click a Search button that will then update the table.

So the first two filters I need are a Start Date and End Date. The old version of the filter has an inputbox and a calendar button. In other words, manually enter the date, or click the button to open the Datepicker calendar. With PrimeUi/PrimeElements, the farthest I have gotten is having a functioning datepicker. Specifically this version:

Code: Select all

<p-datepicker showOn="button"></p-datepicker>

Now I need to connect two datepickers to the datatable as a Date Range search filter; search button included if necessary. How do I go about doing this? The PrimeUI page for datepicker (http://www.primefaces.org/primeui/#datepickerElement) does not show any good examples of further use outside of it simply existing, and searching for examples over Google (i.e. anything that is not the PrimeFaces website) is surprisingly extremely difficult.

So here is an example my code so far with just the date column involved, running in JBoss Developer Studio:

Code: Select all

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>PrimeUI example</title>
        <link rel="stylesheet" href="/external/theme/theme.css"/>
        <link rel="stylesheet" href="/external/jquery-ui/demo/jquery-ui-1.9.2.css"/>
        <link rel="stylesheet" type="text/css" href="/external/font-awesome-4.7.0/css/font-awesome.css"/>
        <link rel="stylesheet" href="/external/primeui/v4.1.15/primeui.css"/>
        <style type="text/css">
            body,
            .ui-widget {
                font-family: Arial;
                font-size: 13px;
            }
            
	.ui-datatable table {
		table-layout: auto;
	}
        </style>
        <script type="text/javascript" src="/external/jQuery/v2.2.1/jquery-2.2.1.js"/>
        <script type="text/javascript" src="/external/jquery-ui/demo/jquery-ui.js"/>
        <script type="text/javascript" src="/external/primeui/demo/primeui.js"/>
		<script type="text/javascript" src="/external/x-tag/demo/x-tag-core.js"/>
		<script type="text/javascript" src="/external/primeui/demo/primeelements.js"/>
		<script type="text/javascript" src="/external/mustache/mustache.js"/>
	
		<script type="text/javascript">
	        var localData = [
	     <ui:repeat var="_foo" value="#{tablefilter.resultList}">
		'date': '#{_foo.transactionDate}',
	        },
	     </ui:repeat>
	        {}
	        ];
		</script>

	</head>
	<body>
		<h3>Button</h3>
		<p-datepicker showOn="button"></p-datepicker>
		<p/>
		<p-datatable caption="Syslog Results #{syslogViewFilter.getResultsHeader()}" datasource="localData" paginator="true" rows="10" selectionmode="single" onrowselect="handleRowSelect">
		    <p-column field="date" headertext="Date"/>
		</p-datatable>
	
    </body>
</html>

I appreciate any help or advice. I like what PrimeUI has to offer, but it is rather difficult to get really good examples. Most of the good ones are specifically PrimeFaces.

PrimeUI/PrimeElements issue involving datepicker.

Who is online