Meine Herren!

Ich muss dann abhängig von der Datenauswahl des benutzers, andere Informationen aus der Tabelle hearusholen und anzeigen, die zwischen zwei Daten (von - bis) liegen und bis zu sieben Tagen zurückreichen können.

Du möchtest also eine Filter-Funktionialität erstellen.

Bei deinem bisherigen Ansatz, jeweils ein Eingabefeld für Start- und Enddatum zu anzubieten, gibt es ein Problem. Die Gültigkeit des Enddatum hängt stets vom gewählten Startdatum ab. Wenn der Nutzer das Startdatum ändert, kann es passieren, dass das Enddatum plötzlich ungültig wird, dann muss der Nutzer also auch dieses Eingabefeld korrigieren.

Mein Vorschlag ist, du nimmst nur ein Eingabefeld für das Startdatum und ein zweites Eingabefeld für die Zeitspanne. Startdatum und Zeitspanne hängen nicht voneinander ab und der Nutzer kann gefahrlos ein Eingabefeld manipulieren ohne, dass es eine Auswirkung auf das zweite Eingabefeld hätte.

<dl>  
    <dt>  
        <label for="startdate">Startdatum</label>  
    </dt>  
    <dd>  
        <input id="startdate" type="date">  
    </dd>  
    <dt>  
        <label for="daterange">Zeitspanne</label>  
    </dt>  
    <dd>  
        <span>+1 Tag</span>  
        <input id="daterange" type="range" min="1" max="7">  
        <span>+7 Tage</span>  
    </dd>  
</dl>

Das Startdatum könntest du ebenfalls durch min/max-Attribute einschränken. Für die Beschriftung ließen sich bestimmt auch noch aussagekräftigere Texte finden.

Insgesamt ist das einfacher zu implementieren, zugänglicher und auch noch benutzerfreundlicher.