label inside input text box

Question

I'm trying to implement a mockup given below, I looked around to find something similar but no luck. Could some one guide me how to do this.

So problem here is need to show static "from" "to" and "90 days" text every time.

Note "From","To","days" and Icon should be inside text box

Answer 1

This is a VERY simple example intended to get you started.

The key point is: use jQuery UI's "datepicker" module. It is powerful - you can auto-calculate the 90 day calc and, upon leaving the Date From field, have it auto-calc 90 days and plunk that date into the From field as a default.

Look how much you get done with how little.

$( ".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>

Answer 2

I have tweak the code from gibberish and see if this serve your purpose. and for the label inside textbox set placeholder attribute of input tag

<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>

<script>
 $(function() {
            $( ".dp" ).datepicker();
        });


</script>

<style>
div{position:relative;box-sizing:border-box;}
.row{overflow:hidden;border:2px solid #aaa;padding:5px;}
.r-left {float:left;width:30%;margin-right:10px;}
.r-right{float:left;width:30%;margin:0 10px;}
.farright{float:right;width:30%;margin-left:10px;}
.inlineblock{display:inline-block;color: grey;}
#90days{margin-left:15px;margin-top:-35px;color: red;}

#datFrom{

    border: 0px;
}

#datTo{
border: 0px;

}

.floating-label {
    position: absolute;
    pointer-events: none;
    left: 15px;
   top: 20px;
    transition: 0.2s ease all;
    font-size: 20px;
}
.floating-label1 {
    position: absolute;
    pointer-events: none;
    left: 215px;
   top: 20px;
    transition: 0.2s ease all;
    font-size: 20px;
}

.inputText {
    font-size: 14px;
    width: 185px;
    height: 35px;
}

input:focus ~ .floating-label,input:not(:focus):valid ~ .floating-label{
      top: 15px;
    bottom: 10px;
    left: 15px;
  font-size: 11px;
  opacity: 1;
    color: grey;
}

input:focus ~ .floating-label1,input:not(:focus):valid ~ .floating-label1{
      top: 15px;
    bottom: 10px;
    left: 215px;
  font-size: 11px;
  opacity: 1;
    color: grey;
}


.calender-css{
height:35px;
vertical-align: middle;

}

input:focus {
border-color:white;

}

</style>

<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 inputText" type="text" required/><span class="floating-label">From</span></div>
  </div>
  <div class="r-right">
     <!--<div>TO</div>-->
    <div><input id="datTo" class="dp inputText" type="text" required/><span class="floating-label1">TO</span></div>
  </div>
  <div class="farright">
     <div class="inlineblock" id="90days">
       90 days
    </div>
    <div class="inlineblock">
      <img src="http://www.freeiconspng.com/uploads/calendar-icon-png-14.png" class="calender-css" />
    </div>
    
  </div>
</div>