html - 输入文本框内的标签

Question

我正在尝试实现下面给出的模型，我四处寻找类似的东西但没有运气。有人可以指导我如何做到这一点。

所以这里的问题是每次都需要显示静态的“from”“to”和“90 days”文本。

注意“从”、“到”、“天”和图标应该在文本框内

Answer 1

这是一个非常简单的示例，旨在帮助您入门。

关键点是:使用 jQuery UI 的“datepicker”模块。它功能强大 - 您可以自动计算 90 天计算，并在离开“日期开始”字段后，让它自动计算 90 天并将该日期作为默认值插入“开始”字段。

看看您用很少的东西完成了多少。

$( ".dp" ).datepicker();
/*    */

div{position:relative;box-sizing:border-box;}
.row{overflow:hidden;border:2px solid #aaa;padding:5px;}
.r-left {float:left;width:33%;margin-right:10px;}
.r-right{float:left;width:33%;margin:0 10px;}
.farright{display:flex;height:50px;}
  .inlineblock{width:60px;height:50px;margin:auto;flex-flow: row nowrap;justify-content:flex-end;align-content:center;}

<link href="http://code.jquery.com/ui/1.9.2/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
  src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"
  integrity="sha256-eEa1kEtgK9ZL6h60VXwDsJ2rxYCwfxi40VZ9E0XwoEA="
  crossorigin="anonymous"></script>

<div class="row">
  <div class="r-left">
    <div>FROM</div>
    <div><input id="datFrom" class="dp" type="text" /></div>
  </div>
  <div class="r-right">
    <div>TO</div>
    <div><input id="datTo" class="dp" type="text" /></div>
  </div>
  <div class="farright">
    <div class="inlineblock">
       <br>90 days
    </div>
    <div class="inlineblock" id="90days">
      <img src="http://placeimg.com/50/50/nature" />
    </div>
  </div>
</div>