We have created the design of the date-time picker made by Eonasdan . We have changed the colors, typography and buttons, so it can look like the rest of the dashboard. For more information please check Full Github Documentation .
Usage
In order to use this plugin on your page you will need to include the following scripts.
<script src= "/assets/vendor/moment.min.js" ></script>
<script src= "/assets/vendor/bootstrap-datetimepicker.js" ></script>
Initialization
<script type= "text/javascript" >
$ ( function () {
$ ( ' #datetimepicker1 ' ). datetimepicker ({
icons : {
time : " fa fa-clock " ,
date : " fa fa-calendar-day " ,
up : " fa fa-chevron-up " ,
down : " fa fa-chevron-down " ,
previous : ' fa fa-chevron-left ' ,
next : ' fa fa-chevron-right ' ,
today : ' fa fa-screenshot ' ,
clear : ' fa fa-trash ' ,
close : ' fa fa-remove '
}
});
});
</script>
Example:
<div class= "form-group" >
<div class= 'input-group date' id= 'datetimepicker1' >
<input type= 'text' class= "form-control" />
<span class= "input-group-addon input-group-append" >
<button class= "btn btn-outline-primary" type= "button" id= "button-addon2" > <span class= "fa fa-calendar" ></span></button>
</span>
</div>
</div>