Estoy tratando de implementar una maqueta que se muestra a continuación, miré a mi alrededor para encontrar algo similar pero no tuve suerte. ¿Podría alguien guiarme sobre cómo hacer esto?

Así que el problema aquí es la necesidad de mostrar texto estático "de" "a" y "90 días" cada vez.

Nota "Desde", "Hasta", "días" y el icono deben estar dentro del cuadro de texto

enter image description here

0
no_lyf_programmer 15 dic. 2016 a las 04:07

2 respuestas

La mejor respuesta

He modificado el código del galimatías y veo si esto sirve para su propósito. y para la etiqueta dentro del cuadro de texto, establezca el atributo de marcador de posición de la etiqueta de entrada

<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>
0
Pawan Kotak 15 dic. 2016 a las 15:27

Este es un ejemplo MUY simple con la intención de comenzar.

El punto clave es: usar el módulo "datepicker" de jQuery UI. Es poderoso: puede calcular automáticamente el cálculo de 90 días y, al salir del campo Fecha desde, hacer que se calcule automáticamente 90 días y colocar esa fecha en el campo Desde como predeterminado.

Mira cuánto logras con lo poco.

$( ".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>
1
cssyphus 16 dic. 2016 a las 02:35