Logo

Bootstrap Time Picker Examples


						<div class="card card-custom">
							<div class="card-header">
								<div class="card-title">
									<h3 class="card-title">
										Bootstrap Time Picker 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">Minimum Setup</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<input class="form-control" id="kt_timepicker_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">Current Time</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="input-group timepicker">
												<input class="form-control" id="kt_timepicker_2" readonly placeholder="Select time" type="text"/>
												<div class="input-group-append">
													<span class="input-group-text">
														<i class="la la-clock-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">Default Time</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="input-group timepicker">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<i class="la la-clock-o"></i>
													</span>
												</div>
												<input class="form-control" id="kt_timepicker_3" readonly placeholder="Select time" type="text"/>
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Preset Time</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="input-group timepicker">
												<div class="input-group-prepend">
													<span class="input-group-text">
														<i class="la la-exclamation-circle"></i>
													</span>
												</div>
												<input class="form-control" id="kt_timepicker_4" readonly value="10:30:20 AM" type="text"/>
											</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-success font-weight-bold" data-toggle="modal" data-target="#kt_timepicker_modal">Launch modal timepickers</a>
										</div>
									</div>
								</div>
								<div class="card-footer">
									<div class="row">
										<div class="col-lg-9 ml-lg-auto">
											<button type="reset" class="btn btn-primary mr-2">Submit</button>
											<button type="reset" class="btn btn-secondary">Cancel</button>
										</div>
									</div>
								</div>
							</form>
							<!--end::Form-->
						</div>
						

						// Class definition

						var KTBootstrapTimepicker = function () {

							// Private functions
							var demos = function () {
								// minimum setup
								$('#kt_timepicker_1, #kt_timepicker_1_modal').timepicker();

								// minimum setup
								$('#kt_timepicker_2, #kt_timepicker_2_modal').timepicker({
									minuteStep: 1,
									defaultTime: '',
									showSeconds: true,
									showMeridian: false,
									snapToStep: true
								});

								// default time
								$('#kt_timepicker_3, #kt_timepicker_3_modal').timepicker({
									defaultTime: '11:45:20 AM',
									minuteStep: 1,
									showSeconds: true,
									showMeridian: true
								});

								// default time
								$('#kt_timepicker_4, #kt_timepicker_4_modal').timepicker({
									defaultTime: '10:30:20 AM',
									minuteStep: 1,
									showSeconds: true,
									showMeridian: true
								});
							}

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

						jQuery(document).ready(function() {
							KTBootstrapTimepicker.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">Valid State</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="input-group timepicker">
												<input class="form-control is-valid" id="kt_timepicker_1_validate" readonly placeholder="Select time" type="text"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-clock-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 has-danger">
										<label class="col-form-label text-right col-lg-3 col-sm-12">Error State</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="input-group timepicker">
												<input class="form-control is-invalid" id="kt_timepicker_2_validate" readonly placeholder="Select time" type="text"/>
												<div class="input-group-append">
													<span class="input-group-text"><i class="la la-clock-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="reset" class="btn btn-primary mr-2">Submit</button>
											<button type="reset" class="btn btn-secondary">Cancel</button>
										</div>
									</div>
								</div>
							</form>
							<!--end::Form-->
						</div>
						

						// Class definition

						var KTBootstrapTimepicker = function () {

							// Private functions
							var demos = function () {
								// validation state demos
								// minimum setup
								$('#kt_timepicker_1_validate, #kt_timepicker_2_validate').timepicker({
									minuteStep: 1,
									showSeconds: true,
									showMeridian: false,
									snapToStep: true
								});
							}

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

						jQuery(document).ready(function() {
							KTBootstrapTimepicker.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 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo