Rango de fechas en un input con daterangepicker y jQuery

DESCARGA : DateRange

Rango de fechas en un input con daterangepicker y jQuery, es uno de los componentes que puede usar en tus proyectos web, debido a que permite seleccionar fechas que pueden usarse para buscar contenido e información, en el sitio del plugin puedes ver un ejemplo: http://www.daterangepicker.com/

Para implementar este plugin necesitamos lo siguiente:

1.- Incluir jQuery, moment, bootstrap necesario

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

2.- Incluiremos el plugin (el archivo css y archivo js)

<script src="js/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/daterangepicker.css" />

3.- Incluiremos el input en el HTML

<div class="container">
      <div class="row">
          <div class="col-md-12">
               <input type="text" class="form-control" id="demo" />           
          </div>
          
      </div>
      
  </div>

4.- Script que convierte el input en un selector de fechas y podemos aplicar la configuración minima para mostrar el calendario.

 <script>
    $('#demo').daterangepicker({
    "startDate": "11/06/2017",
    "autoApply": true,
    "endDate": "11/12/2017"});
    
    </script>

El plugin te puede servir para solicitar intervalos de fechas

You may also like...