Sash – Bootstrap 5 Admin & Dashboard HTML Template

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 Sash template. Here is the Folder structure.

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

<!-- FORMELEMENTS JS -->
<script src="../assets/js/form-elements.js"></script>

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

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 Sash template. Here is the Folder structure.

    
<!-- 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/daterangepicker/custom-daterangepicker.js"></script>

<!-- INTERNAL Bootstrap-Datepicker js -->
<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: "-",
		})

	});

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

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 Sash template. Here is the Folder structure.

    
<!-- MULTI SELECT JS -->
<script src="../assets/plugins/multipleselect/multiple-select.js"></script>
<script src="../assets/plugins/multipleselect/multi-select.js"></script>

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

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

File Upload

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

    
<!-- FILE UPLOADES JS -->
<script src="../assets/plugins/fileuploads/js/fileupload.js"></script>
<script src="../assets/plugins/fileuploads/js/file-upload.js"></script>

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

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

Fancy uploader

General File Upload HTML structure in Sash 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>

Note : After Changing scss you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

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