Time Picker Official Website

A simple timepicker component for Twitter Bootstrap.

CSS
<!--Time Picker css-->
<link href="{% static 'libs/bootstrap-timepicker/css/bootstrap-timepicker.min.css'%}" rel="stylesheet" type="text/css" />
Javascript
<!--Time Picker js-->
<script src="{% static 'libs/bootstrap-timepicker/js/bootstrap-timepicker.min.js'%}"></script>
Initjs (Custom js)
<!-- swiper.init js -->
<script src="{% static 'js/pages/form-advanced.init.js'%}"></script>
Add Package
yarn add bootstrap-timepicker --save
Remove Package
yarn remove bootstrap-timepicker or you can remove package by removing specific package from package.json
Examples:
Title Javascript
Default Time Picker 
$('#timepicker').timepicker({
    icons: {
        up: 'mdi mdi-chevron-up',
        down: 'mdi mdi-chevron-down'
    },
    appendWidgetTo: "#timepicker-input-group1"
});
24 Hour Mode Time Picker 
$('#timepicker2').timepicker({
    showMeridian: false,
    icons: {
        up: 'mdi mdi-chevron-up',
        down: 'mdi mdi-chevron-down'
    },
    appendWidgetTo: "#timepicker-input-group2"
});
Specify a step for the minute field 
$('#timepicker3').timepicker({
    minuteStep: 15,
    icons: {
        up: 'mdi mdi-chevron-up',
        down: 'mdi mdi-chevron-down'
    },
    appendWidgetTo: "#timepicker-input-group3"
});
© Skote.