Dashplex – Bootstrap 5 Admin & Dashboard Template

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

    
<!-- Select2 js -->
<script src="../assets/plugins/select2/js/select2.min.js"></script>
<script src="../assets/js/select2.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/

Telephone Input

International Telephone Input for entering and validating international telephone numbers . It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.General Telephone Input HTML structure in Dashplex template. Here is the Folder structure.

    
<!-- Internal TelephoneInput js -->
<script src="../assets/plugins/telephoneinput/telephoneinput.js"></script>
<script src="../assets/plugins/telephoneinput/inttelephoneinput.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/jQuery-International-Telephone-Input-With-Flags-Dial-Codes/

Date, Month, Year Range Picker

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

    
<!-- 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'

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

    
<!-- Select2 js -->
<script src="../assets/plugins/select2/js/select2.min.js"></script>
<script src="../assets/js/select2.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 Dashplex template. Here is the Folder structure.

    
<!-- Internal Fileuploads 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 Dashplex 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/