Bootstrap Datetimepicker
<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' });
<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();
