Bootstrap datetimepicker using Bootstrap 3

admin | Posted on May 9, 2021 |

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="https://scripts.guru/download/datetimepicker/css/bootstrap.min.css">
<link href="https://scripts.guru/download/datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">

//JavaSript file

<script type="text/javascript" src="https://scripts.guru/download/datetimepicker/js/jquery.min.js"></script>
<script src="https://scripts.guru/download/datetimepicker/js/moment-with-locales.js"></script>
<script src="https://scripts.guru/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="https://scripts.guru/download/datetimepicker/css/bootstrap.min.css">
	<link href="https://scripts.guru/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="https://scripts.guru/download/datetimepicker/js/jquery.min.js"></script>
	<script src="https://scripts.guru/download/datetimepicker/js/moment-with-locales.js"></script>
	<script src="https://scripts.guru/download/datetimepicker/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript">
		$(function () {
			$('.datetimepicker').datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss',
            });
		});
	    </script>
</body>
</html>

Leave a Reply Cancel reply