Selettore di date jQuery - disabilita le date passate

Question

Sto provando ad avere una selezione dell'intervallo di date usando il selettore di date dell'interfaccia utente.

nel campo Da/a, le persone non dovrebbero essere in grado di visualizzare o selezionare date precedenti al giorno presente.

Questo è il mio codice:

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

qualcuno può dirmi come disabilitare le date precedenti alla data attuale.

Answer 1

È necessario creare un nuovo oggetto Date e impostarlo come minDate quando si inizializza il datepickers

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

Edit - dal tuo commento ora funziona come previsto http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

Answer 2

Dichiarare variabili dateToday uso della data e () per impostarlo .. quindi utilizzare quella variabile per assegnare a minDate che è parametro di datepicker.

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

Questo è tutto ... risposta di cui sopra è stato davvero utile ... continuate così ragazzi ..

Answer 3

set di attributi startDate di datepicker, funziona, qui di seguito è il codice di lavoro

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

Answer 4

jQuery API documentation - datepicker

La data minima selezionabile. Se impostato su null, non c'è un minimo.

tipi multipli supportati:

Data: un oggetto Date contenente la data minima.
Numero: Un numero di giorni da oggi. Ad esempio 2 rappresenta two days da oggi e -1 rappresenta yesterday.
Stringa: Una stringa nel formato definito dall'opzione dateFormat o una data relativa.
Le date relative devono contenere coppie di valori e periodi; periodi validi sono per years, m per months, w per weeks e d per days. Ad esempio, +1m +7d rappresenta one month and seven days da today.

Al fine di non visualizzare le date precedenti diversi da oggi

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

Answer 5

si deve dichiarare la data corrente in variabili come questo

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

Answer 6

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

minDate:0 funziona per me.

Answer 7

Giusto per aggiungere a questo:

Se hai bisogno anche di impedire all'utente di digitare manualmente una data nel passato, questa è una possibile soluzione. Questo è ciò che abbiamo finito per fare (in base alla risposta del @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); 
    } 
}); 

Quello che fa è cambiare il valore alla data odierna, se l'utente digita manualmente una data nel passato.

Answer 8

Live Demo, provate questo,

$('#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);        
    } 
    }); 

Answer 9

"MinDate" attributo deve essere utilizzato per disabilitare le date passati in jQuery datepicker.

minDate: new Date() Or minDate: '0' is the key for this.

Ex: 

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

O

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

Answer 10

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

new Date(): funzione di ottenere la data di oggi data precedente sono bloccati. 100% che funziona

Answer 11

basta sostituire il codice:

vecchio codice:

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

}); 

nuovo codice:

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

Answer 12

Utilizzare l'opzione "MinDate" per limitare la data più consentito. Il valore "0" indica oggi (0 giorni da oggi):

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

Docs qui: http://api.jqueryui.com/datepicker/#option-minDate

Answer 13

Questo è il modo semplice di fare questo

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

anche noi possiamo disabilitare giorni futuri

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

Answer 14

ho creato la funzione per disabilitare la data precedente, disa giorni flessibili del fine settimana (come sabato, domenica)

Stiamo utilizzando il metodo beforeShowDay del plug-in DatePicker dell'interfaccia utente jQuery. Data

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

 

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

Qui di oggi è 15 Settembre Ho disabile Sabato e Domenica.