Untitled

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
			<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.3.custom.js"></script>
	<!-- datepicker -->
   	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
	<script type="text/javascript" src="jmobile/jquery-1.8.3.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="jmobile/bootstrap.min.js"></script>
	<script type="text/javascript" src="jmobile/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script type="text/javascript" src="jmobile/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

	<script>
	$(function() {

		$( "#accordion" ).accordion();


		var availableTags = ['Course A', 'Course B', 'Course C', 'Course D', 'Course ABC', 'Course AAB', 'Course ABB', 'Course BCC', 'Course BDD', 'Course BBD', 'Course BCC', 'Course ACB', 'Course ADB', 'Course AAA', 'Course BBB', 'Course CCC', 'Course DDD', 'Course DDC', 'Course DDA', 'Course BCA', 'Course BAD', 'Course DAD'];
		$( "#course" ).autocomplete({
			source: availableTags
		});
	});
	</script>

</head>
<body>


<!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2>
<div>
	<input id="course" title="type &quot;a&quot;">
</div>
<div>
	            <div class="form-group" date-role="contain">
	                <div class="input-group date form_datetime col-md-5"  data-date-format="dd MM yyyy - HH:ii p" data-link-field="starttime">
	                    <input class="form-control" size="16" type="text" value="" readonly placeholder="start date">
	                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
	                </div>
					<input type="hidden" id="starttime" value="" /><br/>
	            </div>

				<script type="text/javascript">
				    $('.form_datetime').datetimepicker({
				        //language:  'fr',
				        weekStart: 1,
				        todayBtn:  1,
						autoclose: 1,
						todayHighlight: 1,
						startView: 2,
						forceParse: 0,
				        showMeridian: 1
				    });
					$('.form_date').datetimepicker({
				        language:  'fr',
				        weekStart: 1,
				        todayBtn:  1,
						autoclose: 1,
						todayHighlight: 1,
						startView: 2,
						minView: 2,
						forceParse: 0
				    });
					$('.form_time').datetimepicker({
				        language:  'fr',
				        weekStart: 1,
				        todayBtn:  1,
						autoclose: 1,
						todayHighlight: 1,
						startView: 1,
						minView: 0,
						maxView: 1,
						forceParse: 0
				    });
				</script>
        	</td>
        </tr>
        <tr>
        	<td>
				<div class="form-group" date-role="contain">
					<div class="input-group date form_datetime col-md-5"  data-date-format="dd MM yyyy - HH:ii p" data-link-field="endtime">
						<input class="form-control" size="16" type="text" value="" readonly placeholder="end date">
						<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
					</div>
					<input type="hidden" id="endtime" value="" /><br/>
				</div>
				<script type="text/javascript">
				    $('.form_datetime').datetimepicker({
				        //language:  'fr',
				        weekStart: 1,
				        todayBtn:  1,
						autoclose: 1,
						todayHighlight: 1,
						startView: 2,
						forceParse: 0,
				        showMeridian: 1
				    });
					$('.form_date').datetimepicker({
				        language:  'fr',
				        weekStart: 1,
				        todayBtn:  1,
						autoclose: 1,
						todayHighlight: 1,
						startView: 2,
						minView: 2,
						forceParse: 0
				    });
					$('.form_time').datetimepicker({
				        language:  'fr',
				        weekStart: 1,
				        todayBtn:  1,
						autoclose: 1,
						todayHighlight: 1,
						startView: 1,
						minView: 0,
						maxView: 1,
						forceParse: 0
				    });
				</script>
</div>
</body>
</html>