<body>
<div class="container" >
<form class="form-horizontal" style="margin-top: 20px;">
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="姓名">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="年龄">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">薪资</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="薪资">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">部门</label>
<div class="col-sm-10">
<select class="form-control">
<option>IT部门</option>
<option>运营部门</option>
<option>销售部</option>
</select>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">入职日期</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="dt" placeholder="入职日期">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="./static/jquery-3.6.3.min.js"></script>
<script src="./static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="./static/bootstrap-datepicker-1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="./static/bootstrap-datepicker-1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>
$(
$('#dt').datepicker({
format: 'yyyy-mm-dd', //显示年月日
language:'zh-CN',
startDate: "2020-06-10", //开始时间,在这时间之前都不可选
autoclass:true,
autoclose: true, //选择后自动关闭
clearBtn: true,//清除按钮
})
);
</script>
</body>
利用boostrap实现的时间表格控件,这里仅做一下记录。