Deaktivieren Sie die vergangenen Termine in der bootstrap-Datum-picker
Ich habe das Datum-input-form abgeleitet aus:
Youderian, C. Wie Fügen Sie einen Datums-Picker, um eine Bootstrap-Formular. FormDen. [Blog]. 2015-10-27.
Aber ich bin nicht in der Lage, deaktivieren die letzten Termine. Ich habe Folgendes versucht; nach ein Problem in GitHub, aber es hat nicht funktioniert für mich.
JS:
$(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
});
})
HTML:
<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>
- Möglich, Duplikat der Wie die Einschränkung der wählbaren datumsbereichen in der Bootstrap-Datepicker?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie entweder fügen
startDate
an der config, wenn Sie zuerst konvertieren Sie es in einen date-picker-Feld oder Sie können die Eigenschaft mitsetStartDate
.Wählen Sie eine der beiden.
JS:
HTML:
jQuery Date Picker - deaktivieren vergangene Termine
Hier ist der link, der Ihnen helfen wird.
Können Sie dies tun, indem Sie mindate und maxdate.
Können Sie
startDate
undendDate
z.B.'+2d'
,'-2m'
In Ihrem CodePen link:
Wie die Einschränkung der wählbaren datumsbereichen in der Bootstrap-Datepicker?
Versuchen Sie es mit Leichtigkeit : Verwenden Sie minDate
können Sie deaktivieren Sie die vergangenen Termine nach Einstellung startDate Eigenschaft. Keine Notwendigkeit für separate Funktion.