Avatar billede LilleUdvikler Nybegynder
27. juli 2011 - 09:39 Der er 10 kommentarer og
1 løsning

Dropdown med nem løsning for datoer

Hejsa.

Jeg skal have lavet en dropdown, hvor der i den første skal være fra 1-31. (alt efter hvad måned det er) og i den anden skal der være måneder, og i den sidste årstal fra 1900 -> 2011..

Jeg kunne jo sidde og skrive dem alle sammen ind, men det ville fylde en del og tage ekstremt lang tid. Der må være en nemmere måde, at gøre det på - eller det håbede jeg i hvert fald lidt på at der var.

Kan man måske gøre det med noget PHP, eller noget?
Avatar billede ggxdg Nybegynder
27. juli 2011 - 09:57 #1
Hvis du laver det med PHP, er du nør til at reloade siden efter hvert valg, med mindre du bruger AJAX:
w3schools.com/ajax

Du bør nu nok kunne lave det hele med javascript, men jeg kender ikke så meget til dato funktioner i javascript.
Avatar billede ggxdg Nybegynder
27. juli 2011 - 09:58 #2
*nød
Avatar billede ggxdg Nybegynder
27. juli 2011 - 10:45 #3
Jeg har lige hurtigt kigget på Javascripts "Date()" funktion.
Der er ikke defineret nogen måde hvor på man kan finde antal dage i en måned, men jeg fandt et lille trick på en side.
Det viser sig nemlig at man kan lave overflow på Date()-funktionens dag-parameter. Når du laver overflow, går den ind i næste måned, og giver en dag der.
F.eks:
Februar har som regel 28 dage, så hvis du definerer at du gerne vil have dag 32 i måned 2 år 2011, vil den returnere noget i retningen af dag 4 måned 3 år 2011.
Så kan du tage dag 4, og trække fra dag 32 og så får du 28, altså er der 28 dage i februar 2011.

var intMonth = 1; //0=januar; 1=februar; [...] 11=december
var intYear = 2011;
function daysOfMonth(intMonth, intYear)
{
  return 32 - new Date(intYear, intMonth, 32).getDate();
}
Avatar billede LilleUdvikler Nybegynder
27. juli 2011 - 12:26 #4
Hej ggxdg,

Mange tak for dine svar, det er virkelig vildt du gider bruge din tid på at researche :-)

Jeg vil helst undgå JavaScript..

Har aldrig rodet med AJAX, er det svært, og har du kendskab til det? Fordi om jeg måske så kunne lade spørgsmålet her være åbent, og spørge dig om hjælp, samtidig med at jeg prøver at lave det i AJAX? :-)
Avatar billede olsensweb.dk Ekspert
27. juli 2011 - 13:42 #5
hvis du anvender AJAX anvender du også JS (AJAX = Asynchronous JavaScript and XML.)
i dette tilfælde er det nok overkill at bruge AJAX, jeg ville lave det med JS, og vælge boxene i omvendt rækkefølge så der først vælges årstal, derefter måned og til sidst dag
Avatar billede LilleUdvikler Nybegynder
27. juli 2011 - 14:32 #6
Jeg har ingen ide om, hvordan man gør dette. Synes altid JS er så voldsomt og indviklet.
Avatar billede olsensweb.dk Ekspert
27. juli 2011 - 15:38 #7
en js løsning demo http://olsensweb.dk/test/experten/spm/943853/l1.html

man kunne måske lege med en datapicker feks http://docs.jquery.com/UI/Datepicker
demo http://olsensweb.dk/test/experten/spm/943853/l2.html
men nok lidt besværligt når man skal bladre tilbare til 1900 :)

nb: slutåret bør nok sættes serverside, da vi ikke har styr på brugerens dato instillinger
Avatar billede ggxdg Nybegynder
10. august 2011 - 15:11 #8
JS's syntax minder da en del om PHP.
Det jeg ikke bryder mig så meget om er at det er utroligt nemt at lave fejl i JS, som accepteres indtil fejlen 'aktiveres' hvorefter den så bare stopper hele scriptet.
Hvis man laver fejl på serverside scripts, så er der intet der kører før det er fikset :P

Men du kan ikke undgå JS hvis du vil ændre inholdet dynamisk, medmindre du benytter dig af Java (hvilket rent syntax-mæssigt er laaangt fra PHP) eller Flash, men jeg vil nu mene at det er nemmest med JS.


Men det er nogle fine eksempler Ronols kommer med, så hvis du vælger at lukke denne tråd, så bare giv ham pointene.

Datapickeren, kan sikkert med lidt trylleri, modificeres så man har lettere adgang til at ændre året, frem for at skulle klikke 1327 gange for at kommer tilbage til januar 1900 :P
Avatar billede ggxdg Nybegynder
10. august 2011 - 16:20 #9
Jeg var lige lidt fræk og stjal det meste af din kode ronols, og ryddede lige en lille smule op i den og brugte det trick jeg beskrev tidligere.

Den leapyear funktion du har lavet, tager ikke højde for at hver 4. år som er delelig med 100 ikke er skudår, medmindre de også er delelige med 400 altså:
år 1900 er delelig med 100, men ikke med 400, ergo er det ikke et skudår.
år 2000 er delelig med 100 og 400 ergo er de skudår
år 2100, er som 1900 heller ikke delelig med 400, så det er heller ikke skudår.

<!DOCTYPE html>
<html>
  <head>
    <title>Fancy dato picker!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
      function JusterDage(){
        var fragment = document.createDocumentFragment();
        var daglisteelm = document.getElementById("dato");
        var aarvalue = document.getElementById("Aar").value;
        var md = document.getElementById("maaned").value;
        var dage = 32 - new Date(aarvalue, md, 32).getDate();
        var select = document.createElement('select');
        select.setAttribute("id", "dato");
        for( var i = 1; i <= dage; i++ ) {
          var option = document.createElement('option');
          option.setAttribute("value",i);
          var text = document.createTextNode(i);
          option.appendChild(text);
          select.appendChild(option);
        }
        fragment.appendChild(select);
        daglisteelm.parentNode.replaceChild(fragment, daglisteelm);
      }
    </script>
  </head>
  <body>
    <form method="post" action="#">
      <script type="text/javascript">
        var d=new Date();
        var mdNavn = [ "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ];
        var year = d.getFullYear();
        var html = '<select size="1" id="Aar"  name="Aar" onchange="JusterDage()">';
        for(var i=1900; i<= year; i++){
          html += '<option value="'+i+'">'+i+'</option>';
        }
        html += '</select><select size="1" name="maaned" id ="maaned" onchange="JusterDage()">';
        for(var i=0; i<= 11; i++){
          html += '<option value="'+i+'">'+mdNavn[i]+'</option>';
        }
        html += '</select>';
        document.write(html);
      </script>
      <select size="1" id="dato" name="dato">
        <option value="0">0</option>
      </select>
    </form>
  </body>
</html>
Avatar billede LilleUdvikler Nybegynder
18. august 2011 - 08:44 #10
Jeg er ked af, at jeg ikke har fået svaret på denne tråd i noget tid. Jeg vil kigge på dine eksempler Ronols. Det er ikke sikkert de skal bruges. Men så har jeg dem da, mange tak!

Vil du ikke lægge et svar? :-)
Avatar billede olsensweb.dk Ekspert
18. august 2011 - 20:39 #11
får du så her
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