web-dev-qa-db-ger.com

jQuery Date Picker - Deaktiviert vergangene Daten

Ich versuche, einen Datumsbereich mit der Datumsauswahl der Benutzeroberfläche auszuwählen.

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 ich Daten vor dem aktuellen Datum deaktivieren kann.

84
Harsha M V

Sie müssen ein neues Datumsobjekt erstellen und als minDate festlegen, wenn 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/

104

Deklarieren Sie die Variable dateToday und stellen Sie sie mit der Funktion Date () ein. Verwenden Sie dann diese Variable, um minDate zuzuweisen, den Parameter des Datumsauswahlzeichens.

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

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

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

minDate:0 funktioniert bei mir.

45
Riya Travel

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

17
Mosin

Nur um das zu ergänzen:

Wenn Sie auch verhindern, dass der Benutzer manuell eingibt ein Datum in der Vergangenheit eingeben müssen, ist dies eine mögliche Lösung. Dies ist, was wir 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 manuell ein Datum in der Vergangenheit eingibt.

7
PålOliver

Dies ist einfach zu bewerkstelligen

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

wir können auch zukünftige Tage deaktivieren

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

Live Demo , versuche 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);                             
     }
   });
4
hari

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
});
2
user5663780

jQuery API Dokumentation - Datepicker

Das minimal auswählbare Datum. Bei der Einstellung null gibt es kein Minimum.

Es werden mehrere Typen unterstützt:

Datum: Ein Datumsobjekt, das das Mindestdatum enthält.
Anzahl: Eine Anzahl von Tagen ab heute. Beispielsweise 2 repräsentiert two days von heute und -1 steht für yesterday.
Zeichenfolge: Eine Zeichenfolge im Format, das durch die Option dateFormat definiert ist, oder ein relatives Datum.
Relative Daten müssen Wert- und Periodenpaare enthalten. Gültige Zeiträume sind y für years, m für months, w für weeks und d für days. Beispielsweise, +1m +7d repräsentiert one month and seven days von today.

Damit keine anderen Termine als heute angezeigt werden

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

set 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');
});
})
2
Anna

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

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

Ex:

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

OR

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

Durch Setzen von startDate: new Date()

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

sie müssen das aktuelle Datum in Variablen wie diese 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)
    });
})
0
hoga98
$( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date());

new Date(): Funktion zum Abrufen des heutigen Datums, an dem das vorherige Datum gesperrt ist. 100% arbeiten

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
    });

enter image description here

Hier ist das heutige Datum der 15. September. Ich habe Samstag und Sonntag deaktiviert.

0
Smit Patadiya