# 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/