Logo

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

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_13" data-target-input="nearest">
									<input type="text" class="form-control is-invalid datetimepicker-input" placeholder="Select date & time" data-target="#kt_datetimepicker_13"/>
									<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.

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo