Luminate CMS: Custom filter criteria component

custom-filter-criteria.html

<form action="/blog/" class="topics-filter" >
  <select name="topics">
	  <option value="">Filter by Issue</option>
	  <t:data name="issue" class="categories" parent="/topics" /> 
	  <t:list id="issue">
		  <t:if test="param.topics == name">
		  	<option  value="${name}" selected="selected">${label}</option>
		  </t:if>
		  <t:else>
		  	<option  value="${name}">${label}</option>
		  </t:else>
	  </t:list>
  </select>
  <input type="submit" value="Go" />
</form>

<!-- with date filter option -->
<t:set id="mystart" value="''" />
<t:set id="myend" value="''" />
<t:if test="!isNull(param.startDate)"><t:set id="mystart" value="param.startDate" /></t:if>
<t:if test="!isNull(param.endDate)"><t:set id="myend" value="param.endDate" /></t:if>

<form action="/who-we-are/blog/" class="blog-filter" >
  <select name="topics">
  <option value="">Filter by Topic</option>
  <t:data name="issue" class="categories" parent="/topics" /> 
  <t:list id="issue">
  	<t:if test="param.topics == name"><option  value="${name}" selected="selected">${label}</option></t:if>
  	<t:else><option  value="${name}">${label}</option></t:else>
  </t:list>
  </select>
  
  <input type="hidden" name="dateType" value="date">
  <div class="yui-skin-sam">
  	<div class="date-chooser">    
    	<input type="text" name="startDate" size=10 value="${mystart}" />
  	</div>
  </div>
  <div class="yui-skin-sam">
  	<div class="date-chooser">
  		<input type="text" name="endDate" size=10 value="${myend}" />
  	</div>
  </div>
  
  <input type="submit" value="Go" />
</form>

<script type="text/javascript" src="/system/components/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/system/components/yui/yuiloader/yuiloader.js"></script>
<script type="text/javascript" src="/system/components/date-chooser/date-chooser.js"></script>