Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

jQuery UI Date Picker Range Filter Usage

jQuery UI Date Picker Range Filter

Add jPList scripts to the HEAD:

    
<!-- jPList Core -->		
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.core.min.js"></script>
        	
<!-- jQuery UI Bundle -->			
<link href="jplist.jquery-ui-bundle.min.css" rel="stylesheet" type="text/css" />
<script src="jplist.jquery-ui-bundle.min.js"></script>

<script>
$('document').ready(function(){
	/**
	* user defined functions
	*/
	jQuery.fn.jplist.settings = {
		
		/**
		* jQuery UI date picker
		*/
		datepicker: function(input, options){

            //set datepicker options
            //any datepicker option can be set
            options.dateFormat = 'mm/dd/yy';
            options.changeMonth = true;
            options.changeYear = true; 
        								
			//start datepicker
			input.datepicker(options);
		}
	};
	
	$('#demo').jplist({				
		itemsBox: '.list' 
		,itemPath: '.list-item' 
		,panelPath: '.jplist-panel'	
	});
	
});
</script>
			
	

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
		<!-- date picker range filter -->
		<!-- data-datepicker-func is a user function defined in jQuery.fn.jplist.settings -->
		<div
		   data-control-type="date-picker-range-filter" 
		   data-control-name="date-picker-range-filter" 
		   data-control-action="filter"
		   data-path=".date" 
		   data-datetime-format="{month}/{day}/{year}"
		   class="jplist-date-picker-range">

            <!-- prev date -->
            <i class="fa fa-calendar jplist-icon" aria-hidden="true"></i>				
            <input
                type="text"
                class="date-picker"
                placeholder="Datepicker"
                data-type="prev" />

            <!-- gap -->
            <i class="fa fa-minus gap" aria-hidden="true"></i>

            <!-- next date -->
            <i class="fa fa-calendar jplist-icon" aria-hidden="true"></i>	
            <input
                type="text"
                class="date-picker"								
                placeholder="Datepicker" 
                data-type="next"/>
		</div>	
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>