手机端有日期插件的输入框写法

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,后者页面不会正常显示。

经验分享 程序员 微信小程序 职场和发展