Timepicker and datepicker for Bootstrap 3 with markup and Javascript init. Uses some template tags and variables from Outlast Framework.

date-and-timepicker-for-bootstrap3.html

<!-- Datepicker js -->
<script src="{{baseurl}}/system/site/js/bootstrap/3.0/plugins/datepicker/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="{{baseurl}}system/css/bootstrap/3.0/plugins/datepicker/bootstrap-datepicker.css"/>
{% if zaj.lang != 'en' %}
<script src="{{baseurl}}/system/site/js/bootstrap/3.0/plugins/datepicker/locales/bootstrap-datepicker.{{zaj.lang}}.js"></script>
{% endif %}

<!-- Timepicker js -->
<script src="{{baseurl}}system/js/bootstrap/3.0/plugins/timepicker/bootstrap-timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="{{baseurl}}system/css/bootstrap/3.0/plugins/timepicker/bootstrap-timepicker.css">



<div class="form-group">
	<label class="col-md-4 control-label big">{{#date#}}</label>
	<div class="col-md-8">
		<div class="input-append bootstrap-datepicker input-group date" data-date-viewmode="years">
			<input name="other[date]" class="form-control" type="text" id="date" value="">
			<span class="input-group-addon" onclick="jQuery('#date').datepicker('show');"><i class="glyphicon glyphicon-calendar"></i></span>
		</div>

		<div class="input-append bootstrap-timepicker input-group time">
			<input name="other[time]" class="form-control" id="time" type="text" style="margin-left: 8px;" value="">
			<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
		</div>
	</div>
</div>

<script>
	jQuery('#date').datepicker({
		format: 'yyyy.mm.dd.',
		autoclose: true,
		language: "{{zaj.lang}}",
		startView: 0
	});
	jQuery('#time').timepicker({
		minuteStep: 1,
		template: 'dropdown',
		showMeridian: false
	});
</script>