CODEWITHSUNDEEP
jqueryhtmldatepicker
ani_css
ani_css

Reputation: 2126

How to limit jquery date range?

Can we limit date range for 15 days ? Search date can't be more than 15 days for date range that is why I want to prevent it. how can I do that ?

$(function() {

  var dateFormat = "DD.MM.YY",
    from = $("#checkin,.checkin").datepicker({
      numberOfMonths: 2,
      firstDay: 1,
      minDate: 0,
    }),
    to = $("#checkout,.checkout").datepicker({
      firstDay: 1,
      numberOfMonths: 2,
      minDate: 0,
    });


});
.selected-range {
  background: red;
  color: #FFF;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" />

<div class="book-holiday">
  <input type="text" id="checkin" />
  <input type="text" id="checkout" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Upvotes: 0

Views: 101

Answers (1)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

Add maxDate: 15 in option 

$(function() {

  var dateFormat = "DD.MM.YY",
    from = $("#checkin,.checkin").datepicker({
      numberOfMonths: 2,
      firstDay: 1,
      minDate: 0,
      maxDate: 15
    }),
    to = $("#checkout,.checkout").datepicker({
      firstDay: 1,
      numberOfMonths: 2,
      minDate: 0,
      maxDate: 15
    });


});
.selected-range {
  background: red;
  color: #FFF;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" />

<div class="book-holiday">
  <input type="text" id="checkin" />
  <input type="text" id="checkout" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Upvotes: 1

Related Questions