手机端有日期插件的输入框写法
1、首先在html中写出一个container的小箱子包裹着通用代码
<div class="container">
<div class="form-group">
<label >起始日期</label>
<input type="date" class="form-control" value="2016-05-15">
</div>
</div>
2、定义一下小箱子的样式
.container{
width: 100%;
margin: 0 auto;
padding: 0 15px;
}
3、接下来写form-group、label及其from-control样式,如下
.form-group {
width: 100%;
position: relative;
padding-left: 80px;
margin-top: 10px;
color: #ffffff;
}
.form-group > label {
position: absolute;
left: 0;
top: 0;
line-height: 34px;
color: #000;
}
.form-group .form-control {
width: 100%;
padding: 6px 12px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(169, 169, 169, 0.16);
}
4、注意事项: 小箱子的宽度是width:100%,不能写成width:1080px; label是通过父级form-group定位来确定自身位置; html中value的日期写法:2015-05-15,不能写成2015/05/15,后者页面不会正常显示。
