web-dev-qa-db-de.com

so beschränken Sie die Bootstrap-Datumsauswahl auf das zukünftige Datum

Ich möchte den Date-Picker von bootstrap davon abhalten, das zukünftige Datum zu übernehmen. Ich möchte nur die Termine bis heute nur aktivieren.

Hier ist mein Code

<script>
  var FromEndDate = new Date();

    $(function(){
   $('.datepicker').datepicker({
      format: 'mm-dd-yyyy',
     endDate: FromEndDate, 
    autoclose: true
    });
});
</script>

Kann jeder Körper diesbezüglich helfen?

17
user2142786

Hier ist eine Demo einer funktionierenden Lösung:

http://jsfiddle.net/tjnicolaides/cjp7y/

<script>
$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
});
</script>

edit: Die Version von Bootstrap Datepicker, die startDate und endDate unterstützt, ist hier: https://github.com/eternicode/bootstrap-datepicker

Das ursprüngliche Projekt, das derzeit die besten Suchergebnisse für das Plugin darstellt, verfügt derzeit nicht über diese Funktion: http://www.eyecon.ro/bootstrap-datepicker/

40
TJ Nicolaides

Legen Sie die endDate-Eigenschaft auf +0d fest.

<script> 
    $(function() {
        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy',
            endDate: '+0d',
            autoclose: true
        });
    });
</script>

GEIGE

20
Pranav C Balan
$(document).ready(function(){
$(".datepicker").datepicker({
     endDate:'today'
    });
});

Wenn Sie dies zu Ihrem js -Anwender hinzufügen, kann das Datum nur bis zum heutigen Datum ausgewählt werden, und der Benutzer kann den benutzerdefinierten Datumswert nicht manuell in das Eingabeelement eingeben. Wenn der Benutzer einen benutzerdefinierten Wert eingibt, wird er automatisch auf das aktuelle Datum geändert

4
KATJ Srinath

Dieser Code hat für mich funktioniert ..

$('#txtTo').datepicker({
            dateFormat: "dd/MM/yy",
            changeMonth: true,
            changeYear: true,
         ignoreReadonly: true,
            maxDate: 'now'
        });
    });
3
Nithya

Versuche dies,

$(function () {
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
});

Ich habe date picker aus Git verwendet

Demo

3
Rohan Kumar
$(function(){
$('.datepicker').datepicker({
      format: 'mm-dd-yyyy',
      onRender:function(date){
      return date.valueOf() > FromEndDate.valueOf()?'disabled':'';
      }
   });
});
1
Rachel

Aufgrund eines Problems im Plugin wird diese Datepicker.js verwendet

http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js

1
user2142786

Sie können dies mit der Option endDate tun. Alle Daten nach dem in der Option endDate angegebenen Datum sind deaktiviert. Wenn Sie Daten nach dem heutigen Tag deaktivieren möchten, verwenden Sie dies in Ihrem Eingabe-Tag:

<input type="text" data-provide="datepicker" data-date-end-date="0d">

Quelle: https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#id5

0
Mark O Brian

Keine der oben genannten Lösungen funktioniert für mich. Nach einer Menge von Suchen und Debuggen korrigiere ich es endlich. Ich teile meine Lösung unten. Wenn jemand wie ich das gleiche Problem hat, kann er folgende Lösung versuchen.

        var now = new Date();
        $('[name=depdate]').datepicker({
            format: 'yyyy-mm-dd',
            onRender: function(date) {
                if(date.valueOf() > now.addDays(15).valueOf()) {
                    return 'disabled';
                } else if(date.valueOf() < now.valueOf()) {
                    return 'disabled';
                }
            }
        })
        .on('changeDate', function(){
            $(this).datepicker('hide');
        }).data('datepicker');
0
MasoodUrRehman