jQuery Date Picker - Deaktiviert vergangene Daten

Ich versuche, einen Datumsbereich mithilfe der Datumsauswahl der Benutzeroberfläche auswählen zu lassen.

Im Feld von / bis sollten Personen nicht in der Lage sein, Daten vor dem heutigen Tag anzuzeigen oder auszuwählen.

Das ist mein Code:

$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            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", option, date );
        }
    });
});

Kann mir jemand sagen, wie man Daten vor dem aktuellen Datum deaktiviert?

Sie müssen ein neues minDateDatumsobjekt erstellen und es so einstellen, wie Sie die Datumsauswahl initialisieren

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        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", option, date);
    }
});

Bearbeiten - von Ihrem Kommentar jetzt funktioniert es wie erwartet http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

Deklarieren Sie die Variable dateToday und legen Sie sie mit der Funktion Date () fest. Verwenden Sie dann diese Variable, um minDate zuzuweisen, das der Parameter von datepicker ist.

var dateToday = new Date(); 
$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 3,
        showButtonPanel: true,
        minDate: dateToday
    });
});

Das war's ... Die obige Antwort war wirklich hilfreich ... weiter so Jungs ..

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

minDate:0 funktioniert bei mir.

Verwenden Sie die Option "minDate", um das früheste zulässige Datum einzuschränken. Der Wert "0" bedeutet heute (0 Tage ab heute):

    $(document).ready(function () {
        $("#txtdate").datepicker({
            minDate: 0,
            // ...
        });
    });

Dokumente hier: http://api.jqueryui.com/datepicker/#option-minDate

Nur um das hinzuzufügen:

Wenn Sie den Benutzer auch daran hindern müssen, ein Datum in der Vergangenheit manuell einzugeben, ist dies eine mögliche Lösung. Dies ist, was wir letztendlich getan haben (basierend auf der Antwort von @Nicola Peluchetti)

var dateToday = new Date();

$("#myDatePickerInput").change(function () {
    var updatedDate = $(this).val();
    var instance = $(this).data("datepicker");
    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

    if (date < dateToday) {
        $(this).datepicker("setDate", dateToday);
    }
});

Dadurch wird der Wert auf das heutige Datum geändert, wenn der Benutzer ein Datum in der Vergangenheit manuell eingibt.

Live-Demo , versuchen Sie dies,

    $('#from').datepicker(
     { 
        minDate: 0,
        beforeShow: function() {
        $(this).datepicker('option', 'maxDate', $('#to').val());
      }
   });
  $('#to').datepicker(
     {
        defaultDate: "+1w",
        beforeShow: function() {
        $(this).datepicker('option', 'minDate', $('#from').val());
        if ($('#from').val() === '') $(this).datepicker('option', 'minDate', 0);                             
     }
   });

Dies ist ein einfacher Weg, dies zu tun

$('#datepicker').datepicker('setStartDate', new Date());

Wir können auch zukünftige Tage deaktivieren

$('#datepicker').datepicker('setEndDate', new Date());

setze startDate Attribut von Datepicker, es funktioniert, unten ist der Arbeitscode

$(function(){
$('#datepicker').datepicker({
    startDate: '-0m'
    //endDate: '+2d'
}).on('changeDate', function(ev){
    $('#sDate1').text($('#datepicker').data('date'));
    $('#datepicker').datepicker('hide');
});
})

jQuery API-Dokumentation - Datepicker

Das minimal wählbare Datum. Bei Einstellung nullgibt es kein Minimum.

Mehrere unterstützte Typen:

Datum: Ein Datumsobjekt, das das Mindestdatum enthält.
Anzahl: Einige Tage ab heute. Zum Beispiel 2repräsentiert two daysvon heute und -1repräsentiert yesterday. Zeichenfolge
: Eine Zeichenfolge in dem durch die dateFormatOption definierten Format oder ein relatives Datum.
Relative Daten müssen Wert- und Periodenpaare enthalten. Gültige Zeiträume sind yfür years, mfür months, wfür weeksund dfür days. Zum Beispiel +1m +7drepräsentiert one month and seven daysvon today.

Um keine früheren Daten als heute anzuzeigen

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

Das Attribut " mindate " sollte verwendet werden, um übergebene Daten in jquery datepicker zu deaktivieren.

minDate: new Date () Oder minDate: '0' ist der Schlüssel dafür.

Ex:

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

ODER

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

Ersetzen Sie einfach Ihren Code:

alter Code:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd'

});

neuer Code:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd',
    minDate: 0
});

Indem man es einstellt startDate: new Date()

$('.date-picker').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    ...
    startDate: new Date(),
});

Ich habe eine Funktion zum Deaktivieren des vorherigen Datums und zum Deaktivieren flexibler Wochenendtage (wie Samstag, Sonntag) erstellt.

Wir verwenden die beforeShowDay- Methode des jQuery UI-Datepicker-Plugins.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var NotBeforeToday = function(date) {
		var now = new Date(); //this gets the current date and time
		if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() >= now.getDate() && (date.getDay() > 0 && date.getDay() < 6) )
			return [true,""];
		if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		if (date.getFullYear() > now.getFullYear() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		return [false,""];
	}


jQuery("#datepicker").datepicker({
		beforeShowDay: NotBeforeToday
    });

Hier ist heute der 15. September. Ich habe Samstag und Sonntag deaktiviert.

Sie müssen das aktuelle Datum in Variablen wie diesen deklarieren

 $(function() {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datepicker').datepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    });
})

$( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date());

new Date(): Funktion Holen Sie sich das heutige Datum Vorheriges Datum sind gesperrt. 100% arbeiten