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