Validate date range with JS in datepicker (pickadate) of Materialize

Question

Validate date range with JS in datepicker (pickadate) of Materialize

Navigation

#1 by (0 votes)

0

I need to make a date validation in Rails asynchronously since I have an initial and final date. Validation includes that the end date must be greater than the start date. To show the date I use the datepicker of materialize :

F. Start: 01.01.2017 F.Final: 05.02.2017

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

Generated HTML / JavaScript code:

  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>

javascript jquery materialize

asked by Leonard J. Ávila S. 05.09.2017 в 14:43

source

1 answer

Validate an email in JavaScript that accepts all Latin characters The content of the page is run to the left and there is a white margin on the right and a lower bar

score 0 · Accepted Answer

I would not know how to modify your code to get the desired behavior, however, in this codepen de pickadate.js (the library that uses Materialize ) show how you could achieve something similar to what you are looking for.

Here is an example complementing your HTML with the codepen code:

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>