Advanced Form Elements

Date Range Picker select date ranges, dates and times

  January 19, 2021 - February 17, 2021
Show Code 

-- required js/ css
<link href="asset/plugin/daterange/daterangepicker.css" rel="stylesheet" />
<script src="asset/plugin/daterange/moment.min.js"></script>
<script src="asset/plugin/daterange/daterangepicker.min.js"></script>

-- html
<div class="row">
<div class="col-12 col-xl-4">
	<div class="form-group">
		<label class="form-label">Date Range</label>
		<input class="form-control" type="text" name="daterange" value="01/13/2021 - 01/23/2021">
	</div>
</div>

<div class="col-12 col-xl-8">
	<div class="form-group">
		<label class="form-label">Date Range with Times</label>
		<input class="form-control" type="text" name="datetimes">
	</div>
</div>

<div class="col-12 col-xl-4">
	<div class="form-group mb-xl-0">
		<label class="form-label">Single Date Picker</label>
		<input class="form-control" type="text" name="datesingle">
	</div>
</div>

<div class="col-12 col-xl-8">
	<div class="form-group mb-xl-0">
		<label class="form-label">Predefined Date Ranges</label>
		<div id="reportrange" class="overflow-hidden form-control reportrange">
			<i data-feather="calendar"></i>&nbsp;
			<span>January 19, 2021 - February 17, 2021</span> <i data-feather="chevron-down"></i>
		</div>
	</div>
</div>
</div>

-- JS code 
<script>
// Code for daterange
$('input[name="daterange"]').daterangepicker({});

// code for daterange with times
$('input[name="datetimes"]').daterangepicker({
	timePicker: true,
	startDate: moment().startOf('hour'),
	endDate: moment().startOf('hour').add(32, 'hour'),
	locale: {
		format: 'M/DD hh:mm A'
	}
});

// code for single date
$('input[name="datesingle"]').daterangepicker({
	singleDatePicker: true,
	showDropdowns: true
});


var start = moment().subtract(29, 'days');
var end = moment();

function cb(start, end) {
	$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

// code for custom daterange
$('#reportrange').daterangepicker({
	startDate: start,
	endDate: end,
	ranges: {
		'Today': [moment(), moment()],
		'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
		'Last 7 Days': [moment().subtract(6, 'days'), moment()],
		'Last 30 Days': [moment().subtract(29, 'days'), moment()],
		'This Month': [moment().startOf('month'), moment().endOf('month')],
		'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
	}
}, cb);

cb(start, end);
</script>

Select2 jQuery replacement for select boxes

Show Code 

-- required js/ css
<link href="asset/plugin/select2/select2.min.css" rel="stylesheet" />
<script src="asset/plugin/select2/select2.min.js"></script>

-- html
<div class="mb-3" >
	<div class="position-relative">
	<label>Stylish Selection</label>
	<select class="js-states form-control">
		<optgroup label="Alaskan/Hawaiian Time Zone">
			<option value="AK">Alaska</option>
			<option value="HI">Hawaii</option>
		</optgroup>
		<optgroup label="Pacific Time Zone">
			<option value="CA">California</option>
			<option value="NV">Nevada</option>
			<option value="OR">Oregon</option>
			<option value="WA">Washington</option>
		</optgroup>
	</select>
	</div>
</div>

<div class="mb-3">
	<div class="position-relative" >
	<label>Multiple Selection</label>
	<select class="js-states-mulitple form-control"  multiple="multiple">
		<option value="CA">California</option>
		<option value="NV">Nevada</option>
		<option value="OR">Oregon</option>                                             
		 ......
	</select>
	</div>
</div>                                

-- JS code 
<script>
//  code for default Select2
$('.js-states').select2();

// code for multiple selection
$('.js-states-mulitple').select2();
</script>
Step Content 4
Show Code 

-- required js/ css
<link href="asset/plugin/jquery-smartwizard/smart_wizard_all.min.css" rel="stylesheet" />
<script src="asset/plugin/jquery-smartwizard/jquery.smartWizard.min.js"></script>

-- html
<div id="smartwizard-default-primary" class="wizard wizard-primary mb-4 sw sw-theme-default sw-justified">
<ul class="nav">
	<li class="nav-item"><a class="nav-link inactive done" href="#default-primary-step-1">First Step<br><small>Step description</small></a></li>
	<li class="nav-item"><a class="nav-link inactive done" href="#default-primary-step-2">Second Step<br><small>Step description</small></a></li>
	<li class="nav-item"><a class="nav-link inactive done" href="#default-primary-step-3">Third Step<br><small>Step description</small></a></li>
	<li class="nav-item"><a class="nav-link inactive active" href="#default-primary-step-4">Fourth Step<br><small>Step description</small></a></li>
</ul>

<div class="tab-content" style="height: 61px;">
	<div id="default-primary-step-1" class="tab-pane" role="tabpanel" style="display: none;">
		Step Content 1
	</div>
	<div id="default-primary-step-2" class="tab-pane" role="tabpanel" style="display: none;">
		Step Content 2
	</div>
	<div id="default-primary-step-3" class="tab-pane" role="tabpanel" style="display: none;">
		Step Content 3
	</div>
	<div id="default-primary-step-4" class="tab-pane" role="tabpanel" style="display: block;">
		Step Content 4
	</div>
</div><div class="toolbar toolbar-bottom" role="toolbar" style="text-align: right;"><button class="btn sw-btn-prev" type="button">Previous</button><button class="btn sw-btn-next disabled" type="button">Next</button></div>
</div>                             

-- JS code 
<script>
$("#smartwizard-default-primary").smartWizard({
	theme: "default",
	showStepURLhash: false
});
</script>
Step Content 1
Show Code 

-- required js/ css
<link href="asset/plugin/jquery-smartwizard/smart_wizard_all.min.css" rel="stylesheet" />
<script src="asset/plugin/jquery-smartwizard/jquery.smartWizard.min.js"></script>

-- html
<div id="smartwizard-default-success" class="wizard wizard-success mb-4 sw sw-theme-default sw-justified">
	<ul class="nav">
		<li class="nav-item"><a class="nav-link inactive active" href="#default-success-step-1">First Step<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive" href="#default-success-step-2">Second Step<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive" href="#default-success-step-3">Third Step<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive" href="#default-success-step-4">Fourth Step<br><small>Step description</small></a></li>
	</ul>

	<div class="tab-content" style="height: 61px;">
		<div id="default-success-step-1" class="tab-pane" role="tabpanel" style="display: block;">
			Step Content 1
		</div>
		<div id="default-success-step-2" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 2
		</div>
		<div id="default-success-step-3" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 3
		</div>
		<div id="default-success-step-4" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 4
		</div>
	</div><div class="toolbar toolbar-bottom" role="toolbar" style="text-align: right;"><button class="btn sw-btn-prev disabled" type="button">Previous</button><button class="btn sw-btn-next" type="button">Next</button></div>
</div>                            

-- JS code 
<script>
$("#smartwizard-default-success").smartWizard({
	theme: "default",
	showStepURLhash: false
});
</script>
Step Content 1
Show Code 

-- required js/ css
<link href="asset/plugin/jquery-smartwizard/smart_wizard_all.min.css" rel="stylesheet" />
<script src="asset/plugin/jquery-smartwizard/jquery.smartWizard.min.js"></script>

-- html
<div id="smartwizard-default-danger" class="wizard wizard-danger mb-4 sw sw-theme-default sw-justified">
	<ul class="nav">
		<li class="nav-item"><a class="nav-link inactive active" href="#default-danger-step-1">First Step<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive" href="#default-danger-step-2">Second Step<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive" href="#default-danger-step-3">Third Step<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive" href="#default-danger-step-4">Fourth Step<br><small>Step description</small></a></li>
	</ul>

	<div class="tab-content" style="height: 61px;">
		<div id="default-danger-step-1" class="tab-pane" role="tabpanel" style="display: block;">
			Step Content 1
		</div>
		<div id="default-danger-step-2" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 2
		</div>
		<div id="default-danger-step-3" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 3
		</div>
		<div id="default-danger-step-4" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 4
		</div>
	</div>
	<div class="toolbar toolbar-bottom" role="toolbar" style="text-align: right;">
		<button class="btn sw-btn-prev disabled" type="button">Previous</button>
		<button class="btn sw-btn-next" type="button">Next</button>
	</div>
</div>                          

-- JS code 
<script>
$("#smartwizard-default-danger").smartWizard({
	theme: "default",
	showStepURLhash: false
});
</script>
Step Content 4
Show Code 

-- required js/ css
<link href="asset/plugin/jquery-smartwizard/smart_wizard_all.min.css" rel="stylesheet" />
<script src="asset/plugin/jquery-smartwizard/jquery.smartWizard.min.js"></script>

-- html
<div id="smartwizard-arrows-primary" class="wizard wizard-primary mb-4 sw sw-theme-arrows sw-justified">
	<ul class="nav">
		<li class="nav-item"><a class="nav-link inactive done" href="#arrows-primary-step-1">Step Title<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive done" href="#arrows-primary-step-2">Step Title<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive done" href="#arrows-primary-step-3">Step Title<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive active" href="#arrows-primary-step-4">Step Title<br><small>Step description</small></a></li>
	</ul>

	<div class="tab-content" style="height: 61px;">
		<div id="arrows-primary-step-1" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 1
		</div>
		<div id="arrows-primary-step-2" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 2
		</div>
		<div id="arrows-primary-step-3" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 3
		</div>
		<div id="arrows-primary-step-4" class="tab-pane" role="tabpanel" style="display: block;">
			Step Content 4
		</div>
	</div><div class="toolbar toolbar-bottom" role="toolbar" style="text-align: right;">
		<button class="btn sw-btn-prev" type="button">Previous</button>
		<button class="btn sw-btn-next disabled" type="button">Next</button>
	</div>
</div>                        

-- JS code 
<script>
$("#smartwizard-arrows-primary").smartWizard({
	theme: "default",
	showStepURLhash: false
});
</script>
Step Content 1
Show Code 

-- required js/ css
<link href="asset/plugin/jquery-smartwizard/smart_wizard_all.min.css" rel="stylesheet" />
<script src="asset/plugin/jquery-smartwizard/jquery.smartWizard.min.js"></script>

-- html
<div id="smartwizard-arrows-success" class="wizard wizard-success mb-4 sw sw-theme-arrows sw-justified">
<ul class="nav">
	<li class="nav-item"><a class="nav-link inactive active" href="#arrows-success-step-1">Step Title<br><small>Step description</small></a></li>
	<li class="nav-item"><a class="nav-link inactive" href="#arrows-success-step-2">Step Title<br><small>Step description</small></a></li>
	<li class="nav-item"><a class="nav-link inactive" href="#arrows-success-step-3">Step Title<br><small>Step description</small></a></li>
	<li class="nav-item"><a class="nav-link inactive" href="#arrows-success-step-4">Step Title<br><small>Step description</small></a></li>
</ul>

<div class="tab-content" style="height: 61px;">
	<div id="arrows-success-step-1" class="tab-pane" role="tabpanel" style="display: block;">
		Step Content 1
	</div>
	<div id="arrows-success-step-2" class="tab-pane" role="tabpanel" style="display: none;">
		Step Content 2
	</div>
	<div id="arrows-success-step-3" class="tab-pane" role="tabpanel" style="display: none;">
		Step Content 3
	</div>
	<div id="arrows-success-step-4" class="tab-pane" role="tabpanel" style="display: none;">
		Step Content 4
	</div>
</div><div class="toolbar toolbar-bottom" role="toolbar" style="text-align: right;">
	<button class="btn sw-btn-prev disabled" type="button">Previous</button>
	<button class="btn sw-btn-next" type="button">Next</button>
</div>
</div>
                                            

-- JS code 
<script>
$("#smartwizard-arrows-success").smartWizard({
	theme: "default",
	showStepURLhash: false
});
</script>
Step Content 2
Show Code 

-- required js/ css
<link href="asset/plugin/jquery-smartwizard/smart_wizard_all.min.css" rel="stylesheet" />
<script src="asset/plugin/jquery-smartwizard/jquery.smartWizard.min.js"></script>

-- html
<div id="smartwizard-arrows-danger" class="wizard wizard-danger mb-4 sw sw-theme-arrows sw-justified">
	<ul class="nav">
		<li class="nav-item"><a class="nav-link inactive done" href="#arrows-danger-step-1">Step Title<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive active" href="#arrows-danger-step-2">Step Title<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive" href="#arrows-danger-step-3">Step Title<br><small>Step description</small></a></li>
		<li class="nav-item"><a class="nav-link inactive" href="#arrows-danger-step-4#x22;>Step Title<br><small>Step description</small></a></li>
	</ul>

	<div class="tab-content" style="height: 61px;">
		<div id="arrows-danger-step-1" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 1
		</div>
		<div id="arrows-danger-step-2" class="tab-pane" role="tabpanel" style="display: block;">
			Step Content 2
		</div>
		<div id="arrows-danger-step-3" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 3
		</div>
		<div id="arrows-danger-step-4" class="tab-pane" role="tabpanel" style="display: none;">
			Step Content 4
		</div>
	</div><div class="toolbar toolbar-bottom" role="toolbar" style="text-align: right;">
		<button class="btn sw-btn-prev" type="button">Previous</button>
		<button class="btn sw-btn-next" type="button">Next</button>
	</div>
</div>
				

-- JS code 
<script>
$("#smartwizard-arrows-danger").smartWizard({
	theme: "default",
	showStepURLhash: false
});
</script>

Input masks

Show Code 

-- required js/ css
<script src="asset/plugin/inputmask/jquery.inputmask.bundle.min.js"></script>

-- html
<div class="card-body">
<h4 class="mb-4">Input masks</h4>
<div class="form-group">
	<label>Phone <small class="text-muted">(999) 999-9999</small></label>
	<input type="text" class="form-control phone-inputmask" id="phone-mask" placeholder="Enter Phone Number" im-insert="true">
</div>
<div class="form-group">
	<label>
		International Number <small class="text-muted">
			+19 999 999
			999
		</small>
	</label>
	<input type="text" class="form-control international-inputmask" id="international-mask" placeholder="International Phone Number" im-insert="true">
</div>
<div class="form-group">
	<label>
		Phone / xEx <small class="text-muted">
			(999) 999-9999 /
			x999999
		</small>
	</label>
	<input type="text" class="form-control xphone-inputmask" id="xphone-mask" placeholder="Enter Phone Number" im-insert="true">
</div>
<div class="form-group">
	<label>Purchase Order <small class="text-muted">aaaa 9999-****</small></label>
	<input type="text" class="form-control purchase-inputmask" id="purchase-mask" placeholder="Enter Purchase Order" im-insert="true">
</div>
<div class="form-group">
	<label>
		Credit Card Number <small class="text-muted">
			9999 9999 9999
			9999
		</small>
	</label>
	<input type="text" class="form-control cc-inputmask" id="cc-mask" placeholder="Enter Credit Card Number" im-insert="true">
</div>
<div class="form-group">
	<label>SSN <small class="text-muted">999-99-9999</small></label>
	<input type="text" class="form-control ssn-inputmask" id="ssn-mask" placeholder="Enter Social Security Number" im-insert="true">
</div>
<div class="form-group">
	<label>ISBN <small class="text-muted">999-99-999-9999-9</small></label>
	<input type="text" class="form-control isbn-inputmask" id="isbn-mask" placeholder="Enter ISBN" im-insert="true">
</div>
<div class="form-group">
	<label>Percentage <small class="text-muted">99%</small></label>
	<input type="text" class="form-control percentage-inputmask" id="percentage-mask" placeholder="Enter Value in %" im-insert="true">
</div>
<div class="form-group">
	<label>
		Currency<small class="text-muted">$9999</small>
	</label>
	<input type="text" class="form-control currency-inputmask" id="currency-mask" placeholder="Enter Currency in USD" im-insert="true">
</div>
<div class="form-group">
	<label>
		Decimal using RadixPoint<small class="text-muted">123.654658</small>
	</label>
	<input type="text" class="form-control decimal-inputmask" id="decimal-mask" placeholder="Enter Decimal Value" style="text-align: right;" im-insert="true">
</div>
<div class="form-group">
	<label>
		Email<small class="text-muted">xxx@xxx.xxx</small>
	</label>
	<input type="text" class="form-control email-inputmask" id="email-mask" placeholder="Enter Email Address" im-insert="true">
</div>
<div class="form-group">
	<label>
		Optional masks<small class="text-muted">(99) 9999[9]-9999</small>
	</label>
	<input type="text" class="form-control optional-inputmask" id="optional-mask" placeholder="With Optional Mask" im-insert="true">
</div>

<div class="form-group">
	<label>3 Number and 3 Lettter<small class="text-muted">123-ABC</small></label>
	<input class="form-control" id="num-letter" data-inputmask-clearmaskonlostfocus="false" placeholder="Enter First 3 number and after that 3 letter" im-insert="true">
</div>

</div> 
				

-- JS code 
<script>

// Input masked
$(".date-inputmask").inputmask("dd/mm/yyyy");
$(".phone-inputmask").inputmask("(999) 999-9999");
$(".international-inputmask").inputmask("+9(999)999-9999");
$(".xphone-inputmask").inputmask("(999) 999-9999 / x999999");
$(".purchase-inputmask").inputmask("aaaa 9999-****");
$(".cc-inputmask").inputmask("9999 9999 9999 9999");
$(".ssn-inputmask").inputmask("999-99-9999");
$(".isbn-inputmask").inputmask("999-99-999-9999-9");
$(".currency-inputmask").inputmask("$9999");
$(".percentage-inputmask").inputmask("99%");
$(".optional-inputmask").inputmask("(99) 9999[9]-9999");
$(".decimal-inputmask").inputmask({
	alias: "decimal"
	, radixPoint: "."
});

$(".email-inputmask").inputmask({
	mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[*{2,6}][*{1,2}].*{1,}[.*{2,6}][.*{1,2}]"
	, greedy: !1
	, onBeforePaste: function (n, a) {
		return (e = e.toLowerCase()).replace("mailto:", "")
	}
	, definitions: {
		"*": {
			validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~/-]"
			, cardinality: 1
			, casing: "lower"
		}
	}
});
$("#num-letter").inputmask("999-AAA");
$("#date-time-once").inputmask();

</script>

Dropzone add class .dropzone for darg drop multiple file upload feature.

Show Code 

-- required js/ css
<link href="asset/plugin/dropzonejs/dropzone.css" rel="stylesheet" />
<script src="asset/plugin/dropzonejs/dropzone.js"></script>

-- html
<form action="#" class="dropzone">
	<div class="fallback">
		<input name="file" type="file" multiple />
	</div>
</form>

Summernote WYSWG Editor

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
Show Code 

-- required js/ css
<link href="asset/plugin/summernote/summernote-bs4.css" rel="stylesheet" />
<script src="asset/plugin/summernote/summernote-bs4.min.js"></script>

-- html
<div id="summernote"></div>
				

-- JS code 
<script>

// Code for Summernote WYSWYG Editor
$('#summernote').summernote({
	placeholder: 'Hello Bootstrap 4',
	tabsize: 2,
	height: 200
});

</script>