webentwicklung-frage-antwort-db.com.de

Beschränken Sie das Datum in jquery datepicker basierend auf einem anderen Datumsauswahlfeld oder Textfeld

Ich habe zwei Textfelder, an die ein Datepicker angeschlossen ist. Die Textfelder sind für Start- und Enddatum. Der erste Datepicker ist so eingerichtet, dass der Benutzer kein Datum vor heute auswählen kann, sondern ein beliebiges Datum auswählen kann.

Wie kann ich den zweiten Datepicker so einrichten, dass er kein Datum vor dem in der ersten Datumsauswahl ausgewählten Datum auswählen kann? Zum Beispiel: Wenn heute der 11.12.2010 ist und ich im ersten Datumsaufruf den 15.12.10 auswähle, sollte der zweite Datumsauswahlbereich vor dem 15.12.10 keine Auswahl treffen können.

Heres, was ich bis jetzt habe:

$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});
31
The Muffin Man

In diesem Beispielcode ist beispielsweise startDatePicker als 2010-12-12 ausgewählt. Das Änderungsereignis von startDatePicker legt das minDate von endDatePicker 2010-12-13 fest. Es sperrt die Zellen vor diesem Datum. Dies ist ein Beispiel für das, was @Victor erwähnt hat .. Ich hoffe, es hilft ... Grüße ... Ozlem.

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    minDate: new Date(),
    maxDate: '+2y',
    onSelect: function(date){

        var selectedDate = new Date(date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);

       //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
        $("#endDatePicker").datepicker( "option", "minDate", endDate );
        $("#endDatePicker").datepicker( "option", "maxDate", '+2y' );

    }
});

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true
});
34
user403295

Aktualisieren:

Mit dem obigen Ansatz wurde minDate nur zum Erstellungszeitpunkt festgelegt Ich habe das Ereignis onSelect verwendet, um die Option minDate des zweiten Datumspickers wie folgt zu ändern:

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});
32
Nguyen Van Long

die Tin Man-Lösung funktionierte für mich, nachdem ich unten $ ("# txtEndDate"). datepicker () hinzugefügt hatte

$("#txtStartDate").datepicker({
  showOn: "both",       
  onSelect: function(dateText, inst){
     $("#txtEndDate").datepicker("option","minDate",
     $("#txtStartDate").datepicker("getDate"));
  }
});

$("#txtEndDate").datepicker(); //it is not working with out this line
6
aby

versuche diesen Mann:

$("#dateTo").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    minDate:  new Date()
    }).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    onSelect: function(){
        $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
    }
    }).datepicker("setDate", new Date());
4
Orlando Alfonso

Aus reiner UI-Sicht sollten Sie dies nicht tun. Wenn der Benutzer bei beiden Datumsempfängern den falschen Monat auswählt und versucht, den richtigen Monat auszuwählen, ändert sich der Benutzer um 50%, indem er von der Benutzeroberfläche behindert wird. Im Idealfall würden Sie die falsche Auswahl zulassen und eine hilfreiche Fehlermeldung anzeigen, dass das Enddatum nach dem Enddatum liegen sollte.

Wenn Sie Ihre Idee umsetzen möchten: Geben Sie jedem Datumsauswahlelement ein "change"-Ereignis, das die Optionen des anderen Datumsauswahlfelds entsprechend ändert.

4
Victor Nicollet

Verwenden Sie die "getDate" -Methode der ersten datepicker-Benutzeroberfläche und übergeben Sie sie an die minDate-Option des zweiten datepicker:

$("#txtEndDate").datepicker({
    showOn: "both",
    minDate: $("#txtStartDate").datepicker("getDate")
});
3
Nguyen Van Long

Verwenden Sie diesen Code:

<script type="text/javascript">
    $(function () {
        $("#txtStartDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
            minDate: 'dateToday'
        });
        $("#txtEndDate").datepicker({
            dateFormat: 'dd/mm/yy',
            inline: true,
             minDate: $("#txtStartDate").datepicker("getDate") });
        });
</script>
1
Anjyr
  $('#start_date').datepicker({
       endDate: new Date(),
       autoclose: true,
  }).on("changeDate", function (e) {
       $('#end_date').datepicker('setStartDate', e.date);
  });

  $('#end_date').datepicker({
      autoclose: true,
  });
1
beatusfk
 $startDateCtrl.change(function () {
            setMinEndDateValue($startDateCtrl, $endDateCtrl);
        });

 $endDateCtrl.datepicker(); 

Ich habe zwei Start und Ende der Datumsauswahl. Enddatum Min. Und Max.-Datum, die wir basierend auf der Auswahl von Anfang an festlegen. Min. Startdatum für das Enddatum ist das Startdatum aus der Startauswahl Das Enddatum für die Auswahl des Enddatums wird als Startdatum von der Startterminauswahl + 7 Tage ausgewählt.

function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
            var $maxSchedulingDate = new Date(@MaxDate.Year, @MaxDate.Month -1, @MaxDate.Day );
            var $startDate = $startDateCtrl.val();
            var $selectedStartDate = new Date($startDate);
            $selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
            var $maxEndDate = new Date();
            if ($selectedStartDate > $maxSchedulingDate) {
                $maxEndDate = $maxSchedulingDate;
            }
            else {
                $maxEndDate = $selectedStartDate;
            }
            $endDateCtrl.datepicker("option", "minDate", $startDate);
            $endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
        }
0
Jaydeep Shil

Aufbauend auf den vorherigen Antworten in diesem Thread hatte ich das Gefühl, dass eine Lösung, die mit Standardwerten arbeitete und sowohl das minimale als auch das maximale Datum erneut anwendete, nützlich wäre:

// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);

// To
$("#datepickerTo").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);

function limitToDateSpan(currentFromDate) {
  $("#datepickerTo").datepicker("option", "minDate", currentFromDate);

  var maxDate = new Date(currentFromDate.getTime());
  maxDate.setFullYear(maxDate.getFullYear() + 1);

  $("#datepickerTo").datepicker("option", "maxDate", maxDate);
}

limitToDateSpan(defaultFromDate);

// From
$("#datepickerFrom").datepicker({
  dateFormat: "yy-mm-dd",
  changeMonth: true,
  changeYear: true,
  minDate: "2013-01-01",
  maxDate: "+1Y",
  onSelect: function (dateText) {
    limitToDateSpan(new Date(dateText));
  }
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);
0