Datetimepicker component allows user to select a date from a calendar and time from a visual analog clock; it also accepts values via direct input. You can find a wide variety of date and time pickers here. We have used Bootstraps 3 datetimepicker and applied material design principles to it.
Click here to download and Click here to demo
Header File
//CSS file
<link rel="stylesheet" href="http://scriptsgurus.com/download/datetimepicker/css/bootstrap.min.css">
<link href="http://scriptsgurus.com/download/datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
//JavaSript file
<script type="text/javascript" src="http://scriptsgurus.com/download/datetimepicker/js/jquery.min.js"></script>
<script src="http://scriptsgurus.com/download/datetimepicker/js/moment-with-locales.js"></script>
<script src="http://scriptsgurus.com/download/datetimepicker/js/bootstrap-datetimepicker.js"></script>HTML Code
<div class="form-group">
<label class="col-md-1 col-xs-12 control-label">Datetimepicker </label>
<div class="col-md-3 col-xs-12">
<div class='input-group date' >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" name="datetimepicker" class="form-control datetimepicker" />
</div>
</div>
</div>Jquery / JavaScript Code
<script type="text/javascript">
$(function () {
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
});
});
</script>Some Other Example (Stop Previous date)
$(".datetimepicker").datetimepicker({
format: "yyyy-mm-dd hh:ii:00",
autoclose: true,
todayBtn: true,
minuteStep: 5,
startDate: "<?= date('Y-m-d H:i:s') ?>"
});Full Page Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datetimepicker</title>
<link rel="stylesheet" href="http://scriptsgurus.com/download/datetimepicker/css/bootstrap.min.css">
<link href="http://scriptsgurus.com/download/datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<label class="col-md-1 col-xs-12 control-label">Datetimepicker </label>
<div class="col-md-3 col-xs-12">
<div class='input-group date' >
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" name="datetimepicker" class="form-control datetimepicker" />
</div>
</div>
</div>
<script type="text/javascript" src="http://scriptsgurus.com/download/datetimepicker/js/jquery.min.js"></script>
<script src="http://scriptsgurus.com/download/datetimepicker/js/moment-with-locales.js"></script>
<script src="http://scriptsgurus.com/download/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
$(function () {
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
});
});
</script>
</body>
</html>