Recently, I decided to dive into front-end development using Bootstrap but I'm facing some challenges.
There are two issues here.
- The calendar glyph is appearing under the date input field instead of at the end of it on the same line.
- The picker is supposed to be auto-closing, but it's not functioning as expected.
I would appreciate any help with this. Below is the code of the page that is causing the problems:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Add Job</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="/bootstrap.min.js"></script>
<script src="/jquery-3.7.0.min.js"></script>
<script src="/bootstrap-datepicker.min.js"></script>
<link href="css/datepicker.css" rel="stylesheet"/>
<link href="css/all.min.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript">
$('#datepicker').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
todayHighlight: true});
</script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Jobs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/newjobform">Add Job</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">View</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/jobslastten">Last jobs</a></li>
<li><a class="dropdown-item" href="/jobs">All jobs</a></li>
<li><a class="dropdown-item" href="/jobsnext">Next jobs</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-6">
<h1>Add a Job</h1>
<form action="/addjob" method="post"
enctype="multipart/form-data" class=
"form-horizontal">
<fieldset>
<div class="form-group" data-provide="datepicker">
<label class="col-lg-3 control-label">
Date</label>
<input type="text" placeholder="YYYY-MM-DD" class="form-control">
<span class="input-group-append input-group-addon"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Place
</label>
<div class="col-lg-9">
<input type="text" class="form-control" name=
"place" />
</div>
</div>
<div class="form-group">
<label class=
"col-lg-3 control-label">Amount</label>
<div class="col-lg-9">
<input type="text" class="form-control" name=
"amount" />
</div>
</div>
<div class="form-group">
<div class="col-lg-12 col-lg-offset-3">
<button type="submit" class="btn btn-primary"
name="button">Create</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>