Spaner - Simple light Bootstrap Nice Admin Panel Dashboard Design Responsive HTML5 Template

Note:-

Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.

Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.General Select2 HTML structure in Spaner template. Here is the Folder structure.

    
<!-- SELECT2 JS -->
<script src="../assets/plugins/select2/select2.full.min.js"></script>
<script src="../assets/js/select2.js"></script>

<!-- INTERNAL Form Advanced Element -->
<script src="../assets/js/form-elements.js"></script>

Type	URL
Plugin Link	https://select2.org/

Date, Month, Year Range Picker

A JavaScript component for choosing date ranges, dates and Month, year.General Date Range Picker HTML structure in Spaner template. Here is the Folder structure.

    
<!-- INTERNAL Datepicker js -->
<script src="../assets/plugins/date-picker/date-picker.js"></script>
<script src="../assets/plugins/date-picker/jquery-ui.js"></script>
<script src="../assets/plugins/input-mask/jquery.maskedinput.js"></script>

<!-- Date Range Picker -->
<script src="../assets/plugins/bootstrap-datepicker/bootstrap-datepicker.js"></script>

Open form-elements.js file (assets/js/form-elements.js) You can see below js

    
$(function(){
	'use strict'
		// Datepicker
		$('.fc-datepicker').datepicker({
		showOtherMonths: true,
		selectOtherMonths: true
		});

		$('#datepickerNoOfMonths').datepicker({
		showOtherMonths: true,
		selectOtherMonths: true,
		numberOfMonths: 2
		});mberOfMonths: 2
		});



		//_________Date picker
		$('#datepicker-date').bootstrapdatepicker({
			format: "dd-mm-yyyy",
			viewMode: "date",
			multidate: true,
			multidateSeparator: "-",
		})

		//_________Month picker
		$('#datepicker-month').bootstrapdatepicker({
			format: "MM",
			viewMode: "months",
			minViewMode: "months",
			multidate: true,
			multidateSeparator: "-",
		})

		//_________Year picker
		$('#datepicker-year').bootstrapdatepicker({
			format: "yyyy",
			viewMode: "year",
			minViewMode: "years",
			multidate: true,
			multidateSeparator: "-",
		})

	});

Type	URL
Plugin Link	https://github.com/uxsolutions/bootstrap-datepicker/
Plugin Link	http://jqueryui.com/

Multiple Select Styles

Multiple Select also supports multi-value select boxes. The select below is declared with the multiple attribute.General Multiple Select HTML structure in Spaner template. Here is the Folder structure.

    
<!-- INTERNAL Multipleselect js -->
<script src="../assets/plugins/multipleselect/multiple-select.js"></script>
<script src="../assets/plugins/multipleselect/multi-select.js"></script>

Type	URL
Plugin Link	http://multiple-select.wenzhixin.net.cn/en/

File Upload

General File Upload HTML structure in Spaner template. Here is the Folder structure.

    
<!-- INTERNAL File uploads js -->
<script src="../assets/plugins/fileupload/js/dropify.js"></script>
<script src="../assets/js/filupload.js"></script>

Type	URL
Plugin Link	http://jeremyfagis.github.io/dropify/

Fancy uploader

General File Upload HTML structure in Spaner template. Here is the Folder structure.

    
<!--  INTERNAL File-Uploads Js -->
<script src="../assets/plugins/fancyuploder/jquery.ui.widget.js"></script>
<script src="../assets/plugins/fancyuploder/jquery.fileupload.js"></script>
<script src="../assets/plugins/fancyuploder/jquery.iframe-transport.js"></script>
<script src="../assets/plugins/fancyuploder/jquery.fancy-fileupload.js"></script>
<script src="../assets/plugins/fancyuploder/fancy-uploader.js"></script>

Type	URL
Plugin Link	https://www.jqueryscript.net/demo/Fancy-File-Uploader-jQuery/