jQuery-Datumsauswahl, um ein vergangenes Datum zu verhindern

76

Wie deaktiviere ich vergangene Daten in jQuery Datepicker? Ich habe nach Optionen gesucht, aber anscheinend nichts gefunden, was auf die Möglichkeit hinweist, vergangene Daten zu deaktivieren.

UPDATE: Vielen Dank für die schnelle Antwort. Ich habe das ohne Glück versucht. Die Tage waren immer noch nicht wie erwartet ausgegraut und akzeptieren immer noch das ausgewählte vergangene Datum.

Ich habe es versucht:

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

Funktioniert nicht

Ich habe es versucht:

$('#datepicker').datepicker({ minDate: new Date() });

Funktioniert auch immer noch nicht.

Es zeigt das Kalender-Widget einwandfrei an. Es wird einfach nicht grau oder verhindert die Eingabe vergangener Tage. Ich habe in der Vergangenheit das minDate und das maxDate ohne Glück versucht, also dachte ich, dass es nicht sie sein müssen.

netrox
quelle

Antworten:

140

Versuche dies:

$("#datepicker").datepicker({ minDate: 0 });

Entfernen Sie die Anführungszeichen aus 0.

Khawar
quelle
4
@BWDesign Antwortete anderthalb Jahre später als ich;)
Russ Cam
Du rettest mich, mein Freund.
NullPointer
37

Sie müssen nur ein Mindestdatum angeben. Wenn Sie es auf 0 setzen, bedeutet dies, dass das Mindestdatum 0 Tage ab heute, dh heute, beträgt. Sie können '0d'stattdessen die Zeichenfolge übergeben (die Standardeinheit ist Tage).

$(function () {
    $('#date').datepicker({ minDate: 0 });
});
Russ Cam
quelle
26

Wenn Sie es mit einer zuvor gebundenen Datumsauswahl zu tun haben, stellen Sie diese ein

$("#datepicker").datepicker({ minDate: 0 });

wird nicht funktionieren. Diese Syntax gilt nur, wenn Sie das Widget erstellen.

Verwenden Sie Folgendes, um das Mindestdatum für eine Auswahl gebundener Datumsangaben festzulegen:

$("#datePicker").datepicker("option", "minDate", 0);
Noel Abrahams
quelle
1
Vielen Dank. Ich habe lange Zeit damit verschwendet, diese Lösung zu finden, und dies hat mein Problem gelöst.
Rushan
24

Entfernen Sie die Anführungszeichen 0und es wird funktionieren.

Arbeitscode-Snippet:

// set minDate to 0 for today's date
$('#datepicker').datepicker({ minDate: 0 });
body {
    font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}
<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

Rahul Desai
quelle
1
Irgendeine Erklärung, warum Komma benötigt wird? Ich kann es entfernen und alles funktioniert noch richtig. Gibt es einen Browser, der ein Komma für ein einzelnes Eigenschaftsobjekt benötigt?
schickm
Sie benötigen nur Kommas, wenn Sie mehrere Optionen verwenden, z. B. $('#datepicker').datepicker({ minDate: 0, maxDate: "+1M +10D", dateFormat: 'yy-mm-dd' });Sie benötigen nach der letzten Option kein Komma
Tanvir
1
Sie senden ein Objekt an die Methode. Ein Komma für den letzten Wert ist falsch.
Brian Noah
Das Komma ist nicht erforderlich und wird der Code in einigen Browsern brechen (Komma entfernt)
iConnor
15

Verwenden Sie die Option minDate, um das minimal mögliche Datum festzulegen. http://jqueryui.com/demos/datepicker/#option-minDate

Rechnung
quelle
2
+1: Ich habe minDate und maxDate verwendet, um ein gültiges Datumsintervall festzulegen, und es funktioniert wie ein Zauber.
Jim Ferrans
11

Geben Sie Null, um zu beachten, und es wird vergangene Daten entkräften.

$( "#datepicker" ).datepicker({ minDate: 0});

Live Beispiel

Lesen Sie hier mehr

Sonu Sindhu
quelle
10

Das funktioniert:

$("#datepicker").datepicker({ minDate: +0 });
Anwasha Dhar
quelle
9

// zukünftige Daten deaktivieren

$('#datetimepicker1').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: new Date
        }); 

// vergangene Daten deaktivieren

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });
Anto
quelle
Ich bin mir nicht sicher, warum diese Antwort abgelehnt wurde, da ihre Lösung für mich funktioniert hat, während die akzeptierte Lösung mit einem 0einen JavaScript-Fehler verursacht hat. +1
Sheridan
6

$("#datePicker").datePicker({startDate: new Date() });. Das funktioniert bei mir

Akhil Yadav
quelle
3

Ich verwende den folgenden Code, um das Datum zu formatieren und 2 Monate im Kalender anzuzeigen ...

<script>
$(function() {

    var dates = $( "#from, #to" ).datepicker({

        showOn: "button",
        buttonImage: "imgs/calendar-month.png",
        buttonImageOnly: true,                           
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,

        onSelect: function( selectedDate ) {




            $( ".selector" ).datepicker({ defaultDate: +7 });
            var option = this.id == "from" ? "minDate" : "maxDate",


                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );

            dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );


        }
    });
});

</script>

Das Problem ist, dass ich nicht sicher bin, wie ich die Auswahl früherer Daten einschränken soll.

HeySingapore
quelle
2

Stellen Sie sicher, dass Sie mehrere Eigenschaften in dieselbe Zeile einfügen (da Sie nur eine Codezeile angezeigt haben, hatten Sie möglicherweise das gleiche Problem wie ich).

Meins würde das Standarddatum festlegen, aber alte Daten nicht ausgrauen. Das funktioniert nicht:

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

Dies macht beides:

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1 und +1 funktionieren gleich (oder 0 und +0 in Ihrem Fall).

Ich: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3

Ed Birm
quelle
2
var givenStartDate = $('#startDate').val();
        alert('START DATE'+givenStartDate);
        var givenEndDate = $('#endDate').val();
        alert('END DATE'+givenEndDate);
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var currentDate = date.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(givenStartDate < currentDate || givenEndDate < currentDate)
         { 
        $("#updateButton").attr("disabled","disabled"); 
         }
         if(givenStartDate < currentDate && givenEndDate > currentDate)
            {
            $("#updateButton").attr("enabled","enabled");
            }
         if(givenStartDate > currentDate || givenEndDate > currentDate) { 
        $("#updateButton").attr("enabled","enabled"); 
         }

Versuche dies. Wenn ein Fehler vorliegt, korrigieren Sie mich bitte :) Vielen Dank an alle.

MeowRude
quelle
2

Das sollte funktionieren <input type="text" id="datepicker">

var dateToday = new Date();
$("#datepicker").datepicker({
    minDate: dateToday,
    onSelect: function(selectedDate) {
    var option = this.id == "datepicker" ? "minDate" : "maxDate",
    instance = $(this).data("datepicker"),
    date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
    dates.not(this).datepicker("option", option, date);
    }
});
D-Codierer
quelle
1

Versuchen Sie startDate, das aktuelle Datum einzustellen. Zum Beispiel:

$('.date-pick').datePicker({startDate:'01/01/1996'});
Tim Stone
quelle
Dies sieht so aus, als wäre es für Kevin Lucks
Datumsauswahl
1

Ich habe das min-Attribut verwendet: min="' + (new Date()).toISOString().substring(0,10) + '"

Hier ist mein Code und es hat funktioniert.

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>

Geben Sie hier die Bildbeschreibung ein

Louis HM
quelle