Logo

Bootstrap Daterangepicker bootstrap daterangepicker examples

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
A JavaScript component for choosing date ranges, dates and times.
For more info please visit the plugin's Demo Page or Github Repo.

Bootstrap Date Range Picker Examples


						<div class="card card-custom">
							<div class="card-header">
								<h3 class="card-title">
									Bootstrap Date Range Picker Examples
								</h3>
							</div>
							<!--begin::Form-->
							<form class="form">
								<div class="card-body">
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Minimum Setup</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<input type='text' class="form-control" id="kt_daterangepicker_1" readonly placeholder="Select time" type="text"/>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Input Group Setup</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class='input-group' id='kt_daterangepicker_2'>
												<input type='text' class="form-control" readonly  placeholder="Select date range"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
												</div>
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Icon Input</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="input-group" id='kt_daterangepicker_3'>
												<div class="input-group-prepend">
													<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
												</div>
												<input type="text" class="form-control " placeholder="Email">
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Date & Time Picker</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class='input-group' id='kt_daterangepicker_4'>
												<input type='text' class="form-control" readonly  placeholder="Select date & time range"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
												</div>
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Date Picker</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class='input-group' id='kt_daterangepicker_5'>
												<input type='text' class="form-control" readonly  placeholder="Select date range"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
												</div>
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Predefined Ranges</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class='input-group' id='kt_daterangepicker_6'>
												<input type='text' class="form-control" readonly  placeholder="Select date range"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
												</div>
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<a href="" class="btn btn-light-primary font-weight-bold" data-toggle="modal" data-target="#kt_daterangepicker_modal">Launch modal Date Range Pickers</a>
										</div>
									</div>
								</div>
								<div class="card-footer">
									<div class="row">
										<div class="col-lg-9 ml-lg-auto">
											<button type="submit" class="btn btn-primary mr-2">Submit</button>
											<button type="submit" class="btn btn-secondary">Cancel</button>
										</div>
									</div>
								</div>
							</form>
							<!--end::Form-->
						</div>
						

						// Class definition

						var KTBootstrapDaterangepicker = function () {

							// Private functions
							var demos = function () {
								// minimum setup
								$('#kt_daterangepicker_1, #kt_daterangepicker_1_modal').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary'
								});

								// input group and left alignment setup
								$('#kt_daterangepicker_2').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary'
								}, function(start, end, label) {
									$('#kt_daterangepicker_2 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
								});

								$('#kt_daterangepicker_2_modal').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary'
								}, function(start, end, label) {
									$('#kt_daterangepicker_2 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
								});

								// left alignment setup
								$('#kt_daterangepicker_3').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary'
								}, function(start, end, label) {
									$('#kt_daterangepicker_3 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
								});

								$('#kt_daterangepicker_3_modal').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary'
								}, function(start, end, label) {
									$('#kt_daterangepicker_3 .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
								});


								// date & time
								$('#kt_daterangepicker_4').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary',

									timePicker: true,
									timePickerIncrement: 30,
									locale: {
										format: 'MM/DD/YYYY h:mm A'
									}
								}, function(start, end, label) {
									$('#kt_daterangepicker_4 .form-control').val( start.format('MM/DD/YYYY h:mm A') + ' / ' + end.format('MM/DD/YYYY h:mm A'));
								});

								// date picker
								$('#kt_daterangepicker_5').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary',

									singleDatePicker: true,
									showDropdowns: true,
									locale: {
										format: 'MM/DD/YYYY'
									}
								}, function(start, end, label) {
									$('#kt_daterangepicker_5 .form-control').val( start.format('MM/DD/YYYY') + ' / ' + end.format('MM/DD/YYYY'));
								});

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

								$('#kt_daterangepicker_6').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary',

									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')]
									}
								}, function(start, end, label) {
									$('#kt_daterangepicker_6 .form-control').val( start.format('MM/DD/YYYY') + ' / ' + end.format('MM/DD/YYYY'));
								});
							}

							return {
								// public functions
								init: function() {
									demos();
								}
							};
						}();

						jQuery(document).ready(function() {
							KTBootstrapDaterangepicker.init();
						});
						

Validation State Examples


						<div class="card card-custom">
							<div class="card-header">
								<div class="card-title">
									<h3 class="card-title">
										Validation State Examples
									</h3>
								</div>
							</div>
							<!--begin::Form-->
							<form class="form">
								<div class="card-body">
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Success State</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class='input-group' id='kt_daterangepicker_1_validate'>
												<input type='text' class="form-control is-valid" readonly  placeholder="Select date range"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
												</div>
												<div class="valid-feedback">Success! You've done it.</div>
											</div>
											<span class="form-text text-muted">Example help text that remains unchanged.</span>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Danger State</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class='input-group' id='kt_daterangepicker_2_validate'>
												<input type='text' class="form-control is-invalid" readonly  placeholder="Select date range"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
												</div>
												<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
											</div>
											<span class="form-text text-muted">Example help text that remains unchanged.</span>
										</div>
									</div>
								</div>
								<div class="card-footer">
									<div class="row">
										<div class="col-lg-9 ml-lg-auto">
											<button type="submit" class="btn btn-primary mr-2">Submit</button>
											<button type="submit" class="btn btn-secondary">Cancel</button>
										</div>
									</div>
								</div>
							</form>
							<!--end::Form-->
						</div>
						

						// Class definition

						var KTBootstrapDaterangepicker = function () {

							// Private functions
							var validationDemos = function() {
								// input group and left alignment setup
								$('#kt_daterangepicker_1_validate').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary'
								}, function(start, end, label) {
									$('#kt_daterangepicker_1_validate .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
								});

								// input group and left alignment setup
								$('#kt_daterangepicker_2_validate').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary'
								}, function(start, end, label) {
									$('#kt_daterangepicker_3_validate .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
								});

								// input group and left alignment setup
								$('#kt_daterangepicker_3_validate').daterangepicker({
									buttonClasses: ' btn',
									applyClass: 'btn-primary',
									cancelClass: 'btn-secondary'
								}, function(start, end, label) {
									$('#kt_daterangepicker_3_validate .form-control').val( start.format('YYYY-MM-DD') + ' / ' + end.format('YYYY-MM-DD'));
								});
							}

							return {
								// public functions
								init: function() {
									validationDemos();
								}
							};
						}();

						jQuery(document).ready(function() {
							KTBootstrapDaterangepicker.init();
						});
						
Success! You've done it.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.

Notifications 24 New

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9