jQuery datepicker- 2 Eingänge/Textfelder und die Einschränkung Bereich

Question

ich das jQuery Datepicker-Widget mit zwei Eingabefeldern, eine für die „Von“ Datum und die zweite mit dem „To“ Datum. Ich bin mit den jQuery Datepicker functional demo als Grundlage der beiden Eingabefelder für immer miteinander zu arbeiten, aber ich brauche diese zusätzliche Einschränkungen hinzufügen zu können:

1. Datumsbereich 2008 frühestens 1. Dezember sein kann

2. "To" Datum kann keine später als heute

3. Einmal "Von" Datum ist select ed kann „To“ die bisher nur in einem Bereich von 7 Tagen nach die „Von“ Datum

4. Wenn ein „To“ Datum ist zuerst ausgewählt sein , dann ist die " von“ Datum kann nur im Bereich von 7 Tagen dauern, bis die ‚To‘ Datum (mit Grenze 1. Dezember das erste auswählbaren Datum ist)

Ich kann nicht scheinen, alle oben genannten zusammenzuarbeiten.

Zusammenfassend möchte ich einen Bereich von bis zu 7 Tagen zwischen dem 01. Dezember und heute auswählen können (ich weiß, dass ich dies am 1. Dezember posten werde, also werde ich nur heute für den Moment bekommen).

Mein Code bisher

$(function() { 

$('#txtStartDate, #txtEndDate').datepicker(
      { 
      showOn: "both", 
      beforeShow: customRange, 
      dateFormat: "dd M yy", 
      firstDay: 1, 
      changeFirstDay: false 
      }); 
}); 

function customRange(input) 
{ 

return { 
     minDate: (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : null), 
     minDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null), 
     maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null) 
     }; 
} 

Ich vermisse die 7 Tage Bereichsbeschränkung und auch eine „To“ aktuelle Auswahl vor 1. Dezember 2008 oder nach dem heutigen Tag zu verhindern. Jede Hilfe würde sehr geschätzt werden, Danke.

Answer 1

Vielen Dank für Ihre Hilfe Ben, Ich habe auf deinen Posts aufgebaut und bin auf dieses Thema gekommen. Es ist jetzt abgeschlossen und funktioniert hervorragend!

Hier ist ein Working Demo. In bearbeiten/ an die URL

kompletten Code, um den Code zu sehen unten-

$(function() 
{ 
    $('#txtStartDate, #txtEndDate').datepicker({ 
     showOn: "both", 
     beforeShow: customRange, 
     dateFormat: "dd M yy", 
     firstDay: 1, 
     changeFirstDay: false 
    }); 

}); 

function customRange(input) { 
    var min = new Date(2008, 11 - 1, 1), //Set this to your absolute minimum date 
     dateMin = min, 
     dateMax = null, 
     dayRange = 6; // Set this to the range of days you want to restrict to 

    if (input.id === "txtStartDate") { 
     if ($("#txtEndDate").datepicker("getDate") != null) { 
      dateMax = $("#txtEndDate").datepicker("getDate"); 
      dateMin = $("#txtEndDate").datepicker("getDate"); 
      dateMin.setDate(dateMin.getDate() - dayRange); 
      if (dateMin < min) { 
       dateMin = min; 
      } 
     } 
     else { 
      dateMax = new Date; //Set this to your absolute maximum date 
     }      
    } 
    else if (input.id === "txtEndDate") { 
     dateMax = new Date; //Set this to your absolute maximum date 
     if ($("#txtStartDate").datepicker("getDate") != null) { 
      dateMin = $("#txtStartDate").datepicker("getDate"); 
      var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + dayRange); 

      if(rangeMax < dateMax) { 
       dateMax = rangeMax; 
      } 
     } 
    } 
    return { 
     minDate: dateMin, 
     maxDate: dateMax 
    };  
} 

Answer 2

Verwenden Sie rangeSelect, um ein Steuerelement anstelle von zwei zu verwenden.

Um zu erreichen, wonach Sie suchen, müssen Sie einen OnSelect-Listener hinzufügen und dann datepicker("option", settings) aufrufen, um die Einstellungen zu ändern.

Answer 3

Ihr Startdatum für txtStartDate funktioniert nicht, da Ihr zweites minDate auf null gesetzt wird, wenn es die Eingabe.id das zweite Mal überprüft. Außerdem sollte maxDate nach txtEndDate und nicht nach txtStartDate suchen. Versuchen Sie folgendes:

function customRange(input) 
{ 
    var mDate = (input.id == "txtStartDate" ? new Date(2008, 12 - 1, 1) : $("#txtStartDate").datepicker("getDate")); 
    return { 
     minDate: mDate, 
     maxDate: (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate").getDate() + 5 : null) 
     }; 
} 

Ich weiß nicht, warum die ‚+ 5‘ anstelle von ‚+ 7‘, aber wenn ich 0 hinzufügen, erhalte ich einen auswählbaren Datumsbereich des Tages nahm ich und die nächsten.

Answer 4

Okay, wie wäre es damit:

function customRange(input) 
{ 
    var min = new Date(2008, 12 - 1, 1); 
    var dateMin = min; 
    var dateMax = null; 

    if (input.id == "txtStartDate" && $("#txtEndDate").datepicker("getDate") != null) 
    { 
     dateMax = $("#txtEndDate").datepicker("getDate"); 
     dateMin = $("#txtEndDate").datepicker("getDate"); 
     dateMin.setDate(dateMin.getDate() - 7); 
     if (dateMin < min) 
     { 
      dateMin = min; 
     }   
    } 
    else if (input.id == "txtEndDate") 
    { 
     dateMax = new Date(); 
     if ($("#txtStartDate").datepicker("getDate") != null) 
     { 
      dateMin = $("#txtStartDate").datepicker("getDate"); 
      dateMax = $("#txtStartDate").datepicker("getDate"); 
      dateMax.setDate(dateMax.getDate() + 7); 
     } 
    } 
    return { 
    minDate: dateMin, 
    maxDate: dateMax 
    }; 

} 

Dies ist das Beste, was ich oben kommen könnte, dass alle Ihre Anforderungen erfüllt (glaube ich ...)

Answer 5

dies ist, wie ich es verwenden:

function customRange(input) 
{ 
    var min = new Date(); 
    return { 
     minDate: ((input.id == "txtStartDate") ? min : (input.id == "txtEndDate" ? $("#txtStartDate").datepicker("getDate") : null)), 
     maxDate: (input.id == "txtStartDate" ? $("#txtEndDate").datepicker("getDate") : null) 
    }; 
} 

Answer 6

Ich weiß, ich bin ein wenig spät die Party, aber hier habe ich den Arbeitsbeispielcode geändert. Ich brauchte nicht einen bestimmten maximalen und minimalen Datum einzustellen, nur nicht einen Datumsbereich überlappen wollte, so ließ ich sie nur einander gesetzt:

jQuery(function() { 
    jQuery('#calendardatetime_required_to, #calendardatetime_required_from').datepicker('option', { 
    beforeShow: customRange 
    }); 
}); 

function customRange(input) { 
    if (input.id == 'calendardatetime_required_to') { 
    return { 
     minDate: jQuery('#calendardatetime_required_from').datepicker("getDate") 
    }; 
    } else if (input.id == 'calendardatetime_required_from') { 
    return { 
     maxDate: jQuery('#calendardatetime_required_to').datepicker("getDate") 
    }; 
    } 
} 

(My Kalenderwerkzeug bereits in einem Skript initialisiert wurden weiter , aber es ist nur die Standardeinstellungen.)

scheint zu tun, was ich brauche es, mein Beispiel :)

Siehe here für.

Answer 7

Hier ist eine Lösung, die ich nach viel Graben für eine Lösung für das, was ich denke, ein häufiges Problem ist. Dies "springt" effektiv die Eingaben um einen gemeinsamen Eingabebereich von kompatiblen Tagen herum. Bedeutung - wenn ich zwei Felder habe, kann eines verwendet werden, um das andere zu beschränken, und das andere könnte das Original falls notwendig neu definieren. Das Ziel ist, immer sicherzustellen, dass es nur einen begrenzten Bereich von Tagen (oder Monaten oder was auch immer) zwischen den beiden Feldern gibt. Dieses spezifische Beispiel begrenzt auch die Menge an Zeit in die Zukunft, dass etwas in jedem der Felder ausgewählt werden könnte (z. B. 3 Monate).

 

$("#startdate").datepicker({ 
    minDate: '+5', 
    maxDate: '+3M', 
    changeMonth: true, 
    showAnim: 'blind', 
    onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection 
    var oldDate = new Date(dateText); 
    var newDate = new Date(dateText); 

    // Compute the Future Limiting Date 
    newDate.setDate(newDate.getDate()+5); 


    // Set the Widget Properties 
    $("#enddate").datepicker('option', 'minDate', oldDate); 
    $("#enddate").datepicker('option', 'maxDate', newDate); 

    } 
    }); 

$("#enddate").datepicker({ 
    minDate: '+5', 
    maxDate: '+3M', 
    changeMonth: true, 
    showAnim: 'blind', 
    onSelect: function(dateText, inst){ 

    // Capture the Date from User Selection 
    var endDate = new Date(dateText); 
    var startDate = new Date(dateText); 

    // Compute the Future Limiting Date 
    startDate.setDate(startDate.getDate()-5); 

    // Set the Widget Properties 
    $("#startdate").datepicker('option', 'minDate', startDate); 
    $("#startdate").datepicker('option', 'maxDate', endDate); 

    } 

    }); 
 

Answer 8

So habe ich es gemacht. Ich habe die Quelle von der Jquery UI-Website genommen und diese geändert, um Ihre Einschränkungen hinzuzufügen.

$(document).ready(function() 
{  
    var dates = $('#StartDate, #EndDate').datepicker({ 
     minDate: new Date(2008, 11, 1), 
     maxDate: "+0D", 
     dateFormat: "dd M yy", 
     changeMonth: true, 
     changeYear: true, 
     onSelect: function (selectedDate) 
     { 
      var option = this.id == "StartDate" ? "minDate" : "maxDate", 
       instance = $(this).data("datepicker"), 
       date = $.datepicker.parseDate(
        instance.settings.dateFormat || 
        $.datepicker._defaults.dateFormat, 
        selectedDate, instance.settings); 
      var edate; 
      var otherOption; 
      var d; 
      if (option == "minDate") 
      { 
       otherOption = "maxDate"; 
       d = date.getDate() + 7; 
      } 
      else if (option == "maxDate") 
      { 
       otherOption = "minDate"; 
       d = date.getDate() - 7; 
      } 

      var m = date.getMonth(); 
      var y = date.getFullYear(); 
      edate = new Date(y, m, d); 

      dates.not(this).datepicker("option", option, date); 
      dates.not(this).datepicker("option", otherOption, edate); 
     } 
    }); 
}); 

erste Idee aus: http://jqueryui.com/demos/datepicker/#date-range

Hinweis: Sie müßten auch eine Option, die Daten zum Zurücksetzen/Löschen (dh wenn ein Benutzer eines ‚Ab Datum‘ wählt, das ‚Bis heute‘ wird Nachdem Sie ein "Von Datum" gewählt haben, wenn der Benutzer jetzt ein "Bis Datum" wählt, wird auch das Von Datum begrenzt. Sie müssen eine klare Option haben, um dem Benutzer zu erlauben, ein anderes "Von" Datum zu wählen.)