Select date from the current date using pickadate.js

Asked

Viewed 225 times

0

I am working on a simple project for a hostel, on the website has a small form of stable request. It has two fields to select the input date and another to select the output date. I’m using the library http://amsul.ca/pickadate.js/ because I’ve been working with her for a long time.

The problem is that I am not finding a way for the second input where will load the departure date, is higher than the date selected in the arrival field, also has on these ticket shopping websites. Someone give me a light?

$('.data1').pickadate({
  formatSubmit: 'yyyy/mm/dd',
  closeOnSelect: true,
  closeOnClear: true,
  monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
  monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
  weekdaysFull: ['domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira', 'sábado'],
  weekdaysShort: ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sab'],
  today: 'hoje',
  clear: 'limpar',
  close: 'fechar',
  format: 'dd/mm/yyyy'
});

$('.data2').pickadate({
  formatSubmit: 'yyyy/mm/dd',
  closeOnSelect: true,
  closeOnClear: true,
  monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
  monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
  weekdaysFull: ['domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira', 'sábado'],
  weekdaysShort: ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sab'],
  today: 'hoje',
  clear: 'limpar',
  close: 'fechar',
  format: 'dd/mm/yyyy'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://parahybahostel.com.br/js/picker.js"></script>
<script src="https://parahybahostel.com.br/js/picker.date.js"></script>

<link href="https://parahybahostel.com.br/css/classic.css" rel="stylesheet" />
<link href="https://parahybahostel.com.br/css/classic.date.css" rel="stylesheet" />

<form method="POST">
  Entrada:
  <input type="text" name="chegada" class="data1" value="" />
  <br />
  <br /> Saída:
  <input type="text" name="saida" class="data2" value="" />
</form>

javascript jquery

  • is using any bakc-end language? can include part of the code for testing ?

  • @Juliohenrique97 am not using no, I enter the code, as you can see, the library already displays the whole calendar

  • you want that when selecting the first date the second can not be placed if a date less than the first date is selected ?

  • that’s right, just like in this example here https://jqueryui.com/datepicker/#date-range

  • In that case I think my answer would be useful but not the way you wanted it

  • Exactly, it worked, but not the way I wanted rs, I’m trying to adapt here but I can’t get the value of the data1 ID and use in the min parameter

  • I’ve already developed the code for you, I’m posting the answer

  • I’ve posted a solution

Show 3 more comments

1 answer

0

Use min: new Date() in YYYY/MM/DD format See the documentation here and see examples

$('.data1').pickadate({
  formatSubmit: 'yyyy/mm/dd',
  min: new Date(2017,11,28), // defina aqui adata de hoje
  closeOnSelect: true,
  closeOnClear: true,
  monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 
 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
  monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 
 'Set', 'Out', 'Nov', 'Dez'],
  weekdaysFull: ['domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 
 'quinta-feira', 'sexta-feira', 'sábado'],
  weekdaysShort: ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sab'],
  today: 'hoje',
  clear: 'limpar',
  close: 'fechar',
  format: 'dd/mm/yyyy'
});

  • The problem is that it would not be the date of today, has to play the value of the first date, that would be the date of arrival in there? because imagine that the person selects the date 20/12 she can not select on the date of exit a date equal to or less than 20/12

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.