Hallo Comunity,
Ich möchte ein Formular erstellen in dem auch Arbeitszeiten erfasst werden. Dabei kann es sich um Einsätze handeln von 1-x Tage.
Ich hatte gehofft es gibt eine Möglichkeit ähnlich wie ein "wiederholbares SubForm" finde jedoch keine.
zusammengegoogelt habe ich mir bisher folgendes:
<script>
document.addEventListener("DOMContentLoaded", function() {
const addButton = document.getElementById("add_date_range");
const container = document.getElementById("date_ranges_container");
let dateRangeCounter = 1;
function addDateRangeField() {
const newDiv = document.createElement("div");
newDiv.classList.add("date-range");
newDiv.innerHTML = `
<label>Date Range ${dateRangeCounter}</label>
<input type="date" name="date_${dateRangeCounter}">
<input type="time" name="start_time_${dateRangeCounter}">
<input type="time" name="end_time_${dateRangeCounter}">
`;
container.appendChild(newDiv);
dateRangeCounter++;
}
addButton.addEventListener("click", function(event) {
event.preventDefault();
addDateRangeField();
});
});
</script>
Alles anzeigen
dies habe ich in die Formulareigenschaften eingetragen.
diesen CSS Code auch.
und
Als Atribut in ein verstecktes Feld.
Ausserdem habe ich die entsprechenden Felder erstellt.
Leider finde ich den Feldtyp "TIME" nicht. Lediglich das "date and time picker".
Für meine Anwendung könnte ich auch mit 2 dieser Felder leben.
Auf jeden Fall soll es so ablaufen, dass ich zu einem bestimmten Tag eine Start- und eine Endzeit eingebe. wenn nötig klicke ich auf "Arbeitstag hinzufügen" und werde dort weitere Zeiten eingeben
Wenn mir hierbei schon jemand helfen könnte wäre das riesig.
Wenn mir auch gleich noch jemand erzählen könnte, wie ich aus diesen Werten die Gesamtarbeitszeit extrahieren kann würde ich mir ein Loch in den Bauch freuen.