0

Requiero hacer una validación de fecha en Rails de manera asíncrona ya que tengo una fecha inicial y fecha final. La validación comprende en que la fecha de final debe ser mayor a fecha de inicio. Para mostrar la fecha utilizo el datepicker de materialize:

F. Inicio: 01.01.2017 F.Final: 05.02.2017

 = f.date_field :dateinicio, class: 'datepicker'

Código HTML/JavaScript generado:

  var fecha_inicio = new Date();
  var fecha_final  = new Date();
  var f_i, f_f;

  $('.datepicker').pickadate({
    weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
    min: new Date(),
    selectMonths: true,
    selectYears: 1, 
    editable: false, 
    firstDay: false, 
    format: 'dd/mm/yyyy', 
    formatSubmit: 'yyyy-mm-dd', 
    today: 'Today',
    clear: 'Clear', 
    close: 'Ok', 
    closeOnSelect: false, 
  });

  $("#inicio").pickadate({
    date_min: fecha_inicio,
    date_max: fecha_final,
    onSelect: function() {
      f_i = $(this).pickadate("getDate");
      f_f = $(this).pickadate("getDate");
      f_i.setDate(f_i.getDate() + 1);
      f_f.setDate(f_f.getDate() + 365); 
      
      $("#final").pickadate({
        date_min: f_i,
        date_max: f_f
      });
    }
  });
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col s12">
      <input type="text" class="datepicker" id="inicio" placeholder="Fecha Inicio">
      <input type="text" class="datepicker" id="final" placeholder="Fecha Final">
    </div>
  </div>
</div>

3

1 respuesta 1

0

No sabría como modificar tu código para obtener el comportamiento deseado, sin embargo, en este codepen de pickadate.js (la librería que utiliza Materialize) muestra como podrías lograr algo similar a lo que buscas.

Acá muestro un ejemplo complementando tu HTML con el código del codepen:

var inicio = $('#inicio').pickadate(),
  inicio_picker = inicio.pickadate('picker')

var final = $('#final').pickadate(),
  final_picker = final.pickadate('picker')

// Check if there’s a “from” or “to” date to start with.
if (inicio_picker.get('value')) {
  final_picker.set('min', inicio_picker.get('select'))
}
if (final_picker.get('value')) {
  inicio_picker.set('max', final_picker.get('select'))
}

// When something is selected, update the “from” and “to” limits.
inicio_picker.on('set', function(event) {
  if (event.select) {
    final_picker.set('min', inicio_picker.get('select'))
  } else if ('clear' in event) {
    final_picker.set('min', false)
  }
})
final_picker.on('set', function(event) {
  if (event.select) {
    inicio_picker.set('max', final_picker.get('select'))
  } else if ('clear' in event) {
    inicio_picker.set('max', false)
  }
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col s12">
      <input type="text" class="datepicker" id="inicio" placeholder="Fecha Inicio">
      <input type="text" class="datepicker" id="final" placeholder="Fecha Final">
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.