Logo
Stockholm-icons / Media / Equalizer Created with Sketch.

Quick Actions

23 new tasks
Stockholm-icons / Shopping / Sale2 Created with Sketch. Accounting eCommerce
Stockholm-icons / Home / Globe Created with Sketch. Management Company Reports
Stockholm-icons / Shopping / Box2 Created with Sketch. Projects Completed Tasks
Stockholm-icons / Communication / Group Created with Sketch. Members Latest joinings
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Stockholm-icons / General / User Created with Sketch.
Create New
Logo
My Account Profile & Account Orders My Order List Deposits Account & Reports Transfers Transactions History Statements Dashboard & Reports
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Bootstrap Datetimepicker component to handle date and time data.
For more info please visit the plugin's Demo Page or Github Repo.

Bootstrap Date Time Picker Examples 


						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Basic Example</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<div class="input-group date" id="kt_datetimepicker_1" data-target-input="nearest">
									<input type="text" class="form-control datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_1"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_1" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></i>
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Using Locales(DE)</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<div class="input-group date" id="kt_datetimepicker_2" data-target-input="nearest">
									<input type="text" class="form-control datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_2"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_2" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></i>
										</span>
									</div>
								</div>
								<span class="form-text text-muted pt-2">Use locals from <a href="https://momentjs.com/">https://momentjs.com/</a></span>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Date Only</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<div class="input-group input-group-solid date" id="kt_datetimepicker_3" data-target-input="nearest">
									<input type="text" class="form-control form-control-solid datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_3"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_3" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></i>
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Time Only</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<div class="input-group input-group-solid date" id="kt_datetimepicker_4" data-target-input="nearest">
									<input type="text" class="form-control form-control-solid datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_4"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_4" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-clock"></i>
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">No Icon</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								 <input type="text" class="form-control form-control-solid datetimepicker-input" id="kt_datetimepicker_5" placeholder="Select date & time"  data-toggle="datetimepicker" data-target="#kt_datetimepicker_5"/>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Enabled/Disabled Dates</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<div class="input-group date" id="kt_datetimepicker_6" data-target-input="nearest">
									<input type="text" class="form-control datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_6"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_6" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></i>
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Linked Pickers</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<div class="row">
									<div class="col">
										<div class="input-group date" id="kt_datetimepicker_7_1" data-target-input="nearest">
											<input type="text" class="form-control datetimepicker-input" placeholder="Start date" data-target="#kt_datetimepicker_7_1"/>
											<div class="input-group-append" data-target="#kt_datetimepicker_7_1" data-toggle="datetimepicker">
												<span class="input-group-text">
													<i class="ki ki-calendar"></i>
												</span>
											</div>
										</div>
									</div>
									<div class="col">
										<div class="input-group date" id="kt_datetimepicker_7_2" data-target-input="nearest">
											<input type="text" class="form-control datetimepicker-input" placeholder="End date" data-target="#kt_datetimepicker_7_2"/>
											<div class="input-group-append" data-target="#kt_datetimepicker_7_2" data-toggle="datetimepicker">
												<span class="input-group-text">
													<i class="ki ki-calendar"></i>
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Inline Mode</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<div id="kt_datetimepicker_8" class="w-300px mb-2"></div>
								<span class="form-text text-muted">Enable clear and today helper buttons</span>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Modal Examples</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<a href="#" class="btn font-weight-bold btn-light-primary" data-toggle="modal" data-target="#kt_datetimepicker_modal">Launch Modal Examples</a>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Base Example</label>
							<div class="col-lg-9 col-md-9 col-sm-12">
								<div class="input-group date" id="kt_datetimepicker_9" data-target-input="nearest">
									<input type="text" class="form-control datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_9"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_9" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></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-9 col-md-9 col-sm-12">
								<div class="input-group date" id="kt_datetimepicker_10" data-target-input="nearest">
									<input type="text" class="form-control datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_10"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_10" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></i>
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label text-right col-lg-3 col-sm-12">Time Picker</label>
							<div class="col-lg-9 col-md-9 col-sm-12">
								<div class="input-group date" id="kt_datetimepicker_11" data-target-input="nearest">
									<input type="text" class="form-control datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_11"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_11" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></i>
										</span>
									</div>
								</div>
							</div>
						</div>
						

						// Demo 1
						$('#kt_datetimepicker_1').datetimepicker();

						// Demo 2
						$('#kt_datetimepicker_2').datetimepicker({
						    locale: 'de'
						});

						// Demo 3
						$('#kt_datetimepicker_3').datetimepicker({
						    format: 'L'
						});

						// Demo 4
						$('#kt_datetimepicker_4').datetimepicker({
						    format: 'LT'
						});

						// Demo 5
						$('#kt_datetimepicker_5').datetimepicker();

						// Demo 6
						$('#kt_datetimepicker_6').datetimepicker({
						    defaultDate: '11/1/2020',
						    disabledDates: [
						        moment('12/25/2020'),
						        new Date(2020, 11 - 1, 21),
						        '11/22/2022 00:53'
						    ]
						});

						// Demo 7
						$('#kt_datetimepicker_7_1').datetimepicker();
						$('#kt_datetimepicker_7_2').datetimepicker({
						    useCurrent: false
						});

						$('#kt_datetimepicker_7_1').on('change.datetimepicker', function(e) {
						    $('#kt_datetimepicker_7_2').datetimepicker('minDate', e.date);
						});
						$('#kt_datetimepicker_7_2').on('change.datetimepicker', function(e) {
						    $('#kt_datetimepicker_7_1').datetimepicker('maxDate', e.date);
						});

						// Demo 8
						$('#kt_datetimepicker_8').datetimepicker({
						    inline: true,
						});

						// Demo 9
						$('#kt_datetimepicker_9').datetimepicker();

						// Demo 10
						$('#kt_datetimepicker_10').datetimepicker({
						    locale: 'de'
						});

						// Demo 11
						$('#kt_datetimepicker_11').datetimepicker({
						    format: 'L'
						});
Use locals from https://momentjs.com/
Enable clear and today helper buttons
Launch Modal Examples

Validation State Examples 


						<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 date" id="kt_datetimepicker_12" data-target-input="nearest">
									<input type="text" class="form-control is-valid datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_12"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_12" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></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">Invalid State</label>
							<div class="col-lg-4 col-md-9 col-sm-12">
								<div class="input-group date" id="kt_datetimepicker_12" data-target-input="nearest">
									<input type="text" class="form-control is-invalid datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_12"/>
									<div class="input-group-append" data-target="#kt_datetimepicker_12" data-toggle="datetimepicker">
										<span class="input-group-text">
											<i class="ki ki-calendar"></i>
										</span>
									</div>
									<div class="invalid-feedback">
										Sorry, the date is taken. Try another date?
									</div>
								</div>
								<span class="form-text text-muted">Example help text that remains unchanged.</span>
							</div>
						</div>
						

						// Demo 12
						$('#kt_datetimepicker_12').datetimepicker();
Success! You"ve done it.
Example help text that remains unchanged.
Sorry, the date is taken. Try another date?
Example help text that remains unchanged.
2024© Keenthemes
About Team Contact

User Profile 15 messages

Ryan Smith
Art Director
Stockholm-icons / Communication / Mail-notification Created with Sketch. ryan@keen.com
Stockholm-icons / Communication / Adress-book2 Created with Sketch.
My Account
Profile info update
Stockholm-icons / General / Settings-1 Created with Sketch.
My Tasks
Todo and tasks
Stockholm-icons / General / Half-star Created with Sketch.
My Events
Logs and notifications
Stockholm-icons / Communication / Mail-opened Created with Sketch.
My Statements
latest tasks and projects
Sign Out
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

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
AH
Andreas Hawks Python Developer
+23% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SC
Sarah Connor HTML, CSS. jQuery
-34% Stockholm-icons / Navigation / Angle-right Created with Sketch.
Pic
Amanda Harden UI/UX, Art Director
+72% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SR
Sean Robbins UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
JT
Jason Tatum ASP.NET Developer
+139% Stockholm-icons / Navigation / Angle-right Created with Sketch.

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
HTML RTL
Demo 2
HTML RTL
Demo 3
HTML RTL
Demo 4
HTML RTL
Demo 5
HTML RTL
Demo 6
HTML RTL
Demo 7
HTML RTL
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!