Avatar billede dane022 Seniormester
02. september 2022 - 10:20 Der er 6 kommentarer

Beregning 8 uger fra dato

Hej

Er der en der vil hjælpe med at lave html + js kode til at fratrække 8 uger fra en dato?

Bruger indtaster en forventet fødselsdato i datofelt og der beregnes derefter, ved siden af, datoen svarende til 8 uger tidligere.
Avatar billede michael_stim Ekspert
02. september 2022 - 12:48 #1
Avatar billede Henrik Hansen Forsker
02. september 2022 - 12:53 #2
Med input typen "date" får man en kalender i feltet. Desværre (endnu) ingen DK-formatering :(
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

<input type="date" name="date_input" value="2022-09-02" min="2022-01-01" max="2023-12-31"><br>
<input type="text" name="date_output"><br>
<script>
document.querySelector('input[name="date_input"]').addEventListener('input', (event) => {
    const day = document.querySelector('input[name="date_input"]').valueAsNumber; // ms siden 1970 ...
    const ewa = new Date(day - 4838400000 ); // 8*7 * 24*60*60 * 1000 = 4838400000 ms på 2 mnd
    const dk = ewa.toLocaleDateString('da-DK').split('.'); // toLocaleDateString viser DK-dato med . :/
    document.querySelector('input[name="date_output"]').value = `${dk[0]}/${dk[1]} ${dk[2]}`;
});
</script>
Avatar billede dane022 Seniormester
02. september 2022 - 13:47 #3
Mange tak
1) Hvis der skal lægges 1 dag til formlen, hvorhenne gøres det så? F.eks. skal datoen 14/9 blive til 21/7.
2) Kan der komme til at stå dags dato i inputfeltet som default?
3) Hvis jeg skal lave et html element som henviser til date_output, så jeg f.eks. kan placere den på siden eller lave en tekst ved feltet, hvad skal html koden så henvise til?
Avatar billede Henrik Hansen Forsker
02. september 2022 - 19:06 #4
Du skal lige vide, at <input type="date"> kalender-funktionen ikke virker i alle (de gamle) browsere, men der findes en del alternativer, som koble på et input-felt. Google "vanilla js date picker" Mange "Kalendere / Date Picker" kræver f.eks. jQuery, Bootstrap, NodeJS eller andet for at kunne køre, men der findes en del som er "vanilla" og ikke kræver andet end deres egen kode.
F.eks. https://www.cssscript.com/vanilla-date-range-picker/

<input type="date" name="date_input" value="2022-01-01" min="2022-01-01" max="2023-12-31"><br>
<div id="date_output"></div><br>
<script>
function regn57dage() {
    const day = document.querySelector('input[name="date_input"]').valueAsNumber; // ms siden 1970 ...
    const ewa = new Date(day - 4924800000 ); // 57 * 24*60*60 * 1000 = 4924800000ms på 2 mnd og 1 dag (PUNKT 1)
    const dk = ewa.toLocaleDateString('da-DK').split('.'); // toLocaleDateString viser DK-dato med . :/
    document.querySelector('#date_output').innerHTML = `${dk[0]}/${dk[1]} ${dk[2]}`; // (PUNKT 3)
}

document.querySelector('input[name="date_input"]').addEventListener('input', (event) => {
    regn57dage();
});

// Hent Dags Dato i US-format YYYY-MM-DD (PUNKT 2)
// new Date() ->  Fri Sep 02 2022 11:22:33 GMT+0200 (Central European Summer Time)
// .toJSON()  ->  2022-09-02T11:22:33.456Z
// .split('T') ->  ['2022-09-02', '11:22:33.456Z']
// [0]        ->  '2022-09-02'
document.querySelector('input[name="date_input"]').value = new Date().toJSON().split('T')[0];

regn57dage(); // Vis anden dato, nu DD lige er sat
</script>
Avatar billede dane022 Seniormester
05. september 2022 - 14:34 #5
Ser ud til den udregner en dag ekstra til den forkerte side :)
Der er reelt tale om at den skal fraregne 55 dage. Dog sker der ikke nogen ændring når jeg prøver at ændre det i formlen.

Og så har jeg stadig brug for hjælp til HTML delen, så det er muligt at indlejre på en side og gøre det lidt pænt.
Avatar billede Henrik Hansen Forsker
10. september 2022 - 17:38 #6
OK, hvis du vil have 55 dage, så skal du udregne det store tal (55 * 24*60*60 * 1000), og så får du 4752000000, som skal indsættes i stedet for 4924800000 (formlen er en kommentar, så du kan se hvordan det tal udregnes). Skal det være 56 dage, så udregn nyt tal og erstat, eller indsæt hele formel i stedet for tallet.
const ewa = new Date(day - (57 * 24*60*60 * 1000) );

Den nye dato vises allerede i HTML i de 2 linjer:
const dk = ewa.toLocaleDateString('da-DK').split('.'); // Laver f.eks. 01.09.2022 til array med 01, 09 og 2022
document.querySelector('#date_output').innerHTML = `${dk[0]}/${dk[1]} ${dk[2]}`; // indsætter "01/09 2022" i div-feltet med id'et "date_output"
Læs mere om "Template literals" her: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester