it-swarm.com.de

jQuery datepicker, um ein vergangenes Datum zu verhindern

Wie kann ich frühere Daten in jQuery datepicker deaktivieren? Ich habe nach Optionen gesucht, finde aber nichts, was auf die Möglichkeit hindeutet, 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 das versucht:

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

Funktioniert nicht.

Ich habe das versucht:

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

Noch funktioniert es auch nicht. 

Das Kalender-Widget wird einfach angezeigt. Es wird einfach nicht ausgegraut oder die Eingabe vergangener Tage verhindert. Ich habe das minDate und das maxDate in der Vergangenheit ohne Erfolg ausprobiert. 

73
netrox

Versuche dies:

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

Entfernen Sie die Anführungszeichen aus 0.

136
Khawar

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

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

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

Working Code 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' />

23
Rahul Desai

Wenn Sie mit einer zuvor gebundenen Datumsauswahl arbeiten, dann Einstellung

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

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

Um ein Mindestdatum für eine Auswahl für ein gebundenes Datum festzulegen, verwenden Sie Folgendes:

$("#datePicker").datepicker("option", "minDate", 0);
23
Noel Abrahams

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

14
Bill

Geben Sie Mindate auf Null, um vergangene Daten zu deaktivieren.

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

Live-Beispiel

Lesen Sie hier mehr

10
Sonu Sindhu

Das funktioniert:

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

// zukünftige Daten deaktivieren

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

// Deaktiviere vergangene Daten

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });
7
Anto

$("#datePicker").datePicker({startDate: new Date() });. Das funktioniert für mich

5
Akhil Yadav

Ich verwende 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 Termine einschränken kann.

2
HeySingapore

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

Meine würde das Standarddatum festlegen, aber alte Daten nicht grau machen. Das funktioniert nicht:

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

Dies bewirkt beides:

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

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

Me: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3

1
Ed Birm
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 irgendein Fehler, bitte korrigieren Sie mich :) Danke an alle.

1
MeowRude

Setzen Sie startDate auf das aktuelle Datum. Zum Beispiel:

$('.date-pick').datePicker({startDate:'01/01/1996'});
0
user217467

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 + '"/>

 enter image description here

0
Louis HM