Отключить прошлые даты в дате начальной загрузки подборщика

Question

Я использовал форму ввода даты, производный от:

Youderian, С. How to Add a Date Picker to a Bootstrap Form. FormDen. [Блог]. 2015-10-27.

Но я не могу отключить прошлые даты. Я попробовал следующее: в соответствии с an issue в GitHub, но это не сработало для меня.

$(document).ready(function() { 
 
    var date_input = $('input[name="date"]'); //our date input has the name "date" 
 
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body"; 
 
    date_input.datepicker({ 
 
    format: 'mm/dd/yyyy', 
 
    container: container, 
 
    todayHighlight: true, 
 
    autoclose: true, 
 
    }) 
 
}) 
 
$(function() { 
 
    var nowDate = new Date(); 
 
    var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), 
 
    nowDate.getDate(), 0, 0, 0, 0); 
 
    $('#date').datepicker({ 
 
    startDate: today 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/> 
 

 
<div class="bootstrap-iso"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <form class="form-horizontal" method="post"> 
 
      <div class="form-group "> 
 
      <label class="control-label col-sm-2" for="date"> 
 
       Date 
 
      </label> 
 
      <div class="col-sm-10"> 
 
       <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <div class="col-sm-10 col-sm-offset-2"> 
 
       <button class="btn btn-primary " name="submit" type="submit"> 
 
       Submit 
 
       </button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вы можете добавить startDate в конфигурации, когда вы сначала преобразовать его в поле выбора дат или вы можете установить свойство используя setStartDate.

Выберите любой из двух.

$(document).ready(function() { 
 
    var dateInput = $('input[name="date"]'); // Our date input has the name "date" 
 
    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : 'body'; 
 
    dateInput.datepicker({ 
 
    format: 'mm/dd/yyyy', 
 
    container: container, 
 
    todayHighlight: true, 
 
    autoclose: true, 
 
    startDate: truncateDate(new Date()) // <-- THIS WORKS 
 
    }); 
 

 
    $('#date').datepicker('setStartDate', truncateDate(new Date())); // <-- SO DOES THIS 
 
}); 
 

 
function truncateDate(date) { 
 
    return new Date(date.getFullYear(), date.getMonth(), date.getDate()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/> 
 

 
<div class="bootstrap-iso"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <form class="form-horizontal" method="post"> 
 
      <div class="form-group "> 
 
      <label class="control-label col-sm-2" for="date"> 
 
       Date 
 
      </label> 
 
      <div class="col-sm-10"> 
 
       <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" /> 
 
      </div> 
 
      </div> 
 
      <div class="form-group"> 
 
      <div class="col-sm-10 col-sm-offset-2"> 
 
       <button class="btn btn-primary " name="submit" type="submit"> 
 
       Submit 
 
       </button> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

jQuery Date Picker - disable past dates

Вот ссылка, которая поможет вам.

Вы можете сделать это с помощью mindate и maxdate.

Answer 3

Вы можете использовать startDate и endDate, например. '+2d', '-2m'

В вашей ссылке CodePen:

date_input.datepicker({ 
    format: 'mm/dd/yyyy', 
    container: container, 
    todayHighlight: true, 
    autoclose: true, 
    startDate: '-2d', 
    endDate: '+2d' 
}) 

How to restrict the selectable date ranges in Bootstrap Datepicker?

Answer 4

вы можете отключить прошлые даты, установив STARTDATE собственности. Нет необходимости в отдельной функции.

date_input.datepicker({ 
    format: 'mm/dd/yyyy', 
    container: container, 
    todayHighlight: true, 
    autoclose: true, 
    startDate: new Date() 
}) 

Answer 5

Попробуйте с легкостью: Используйте MinDate

var date = new Date(); 
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()); 

$('#date').datepicker({ 
    minDate: today 
});