Ergebnis 1 bis 12 von 12
  1. #1
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    DateSelector mit DOM einbinden

    Hallo,

    Ich habe ein DateSelector aus dem Internet was folgendermassen eingebunden wird:
    Code:
    <input type="text" id="date" class="text" name="date" value="'.$date.'" readonly>';
    <button id="cal_trigger" class="submit">...</button>
    <script type="text/javascript">
      Calendar.setup(
      {
        inputField  : "date",           // ID of the input field
        ifFormat    : "%d.%m.%Y",       // the date format
        button      : "cal_trigger",    // ID of the button
        weekNumbers : false,
        step        : 1
      }
      );
    </script>
    Ich will jetzt mit DOM eine beliebige Anzahl von diesen DateSelectoren erstellen (wenn z.B. der User auf einen Button drückt). Wie geht so was mit DOM (dabei meine ich den Part mit dem Calendar.setup(). Das muss im HTML anscheinend unbedingt direkt hinter dem Button stehen).

    So fange ich an:
    HTML-Code:
    var inputDate = document.createElement('input');
    inputDate.setAttribute('id', 'part_date_' + ctr_part);
    inputDate.setAttribute('class', 'text');
    inputDate.setAttribute('name', 'part_date_' + ctr_part);
    inputDate.setAttribute('value', date);
    
    var calBut = document.createElement('button');
    calBut.setAttribute('class', 'submit');
    calBut.setAttribute('id', 'cal_trigger_' + ctr_part);
    calBut.setAttribute('value', '...');
    Wie und wo muss jetzt das hier rein?
    Code:
    Calendar.setup(
      {
        inputField  : "date",           // ID of the input field
        ifFormat    : "%d.%m.%Y",       // the date format
        button      : "cal_trigger",    // ID of the button
        weekNumbers : false,
        step        : 1
      }
      );
    Das Einbinden in das Dokument hab ich hier wegelassen, aber das ist ja auch nicht das Problem

    Patrick

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: DateSelector mit DOM einbinden

    Vermutlich wirst du hier:
    PHP-Code:
       inputField  "date",           // ID of the input field
        
    button      "cal_trigger",    // ID of the button 
    Die ID der entsprechenden Felder übergeben müssen, ob dort wirklich mehrere Objekte unterstützt werden Wissen natürlich nicht.

  3. #3
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: DateSelector mit DOM einbinden

    Also, bei jedem Click auf diesen ominösen Button soll ein neues Textfield und ein neuer [...]-Button erstellt werden.

    _____________ ...
    _____________ ...
    _____________ ...
    _____________ ...

    Bei jedem Klick auf den [...] soll ein DateSelector aufgerufen werden, welches das ausgewählte Datum in das linke Textfield setzt. Also jedes DateSelector hat ihr eigenes Textfield.

    Ich frage mich eben nur wie und wo man das hier mit DOM hinpacken muss:
    Code:
    Calendar.setup(
      {
        inputField  : "date",           // ID of the input field
        ifFormat    : "%d.%m.%Y",       // the date format
        button      : "cal_trigger",    // ID of the button
        weekNumbers : false,
        step        : 1
      }
      );
    Patrick

  4. #4
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: DateSelector mit DOM einbinden

    Ich nehme an das Modul kann das nicht, da die Funktion setup heißt und nicht addXXX.

  5. #5
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: DateSelector mit DOM einbinden

    Gut, aber wenn ich 3 DateSelectors fest einfüge sieht das so aus:
    HTML-Code:
    <input type="text" id="date_1" class="text" name="date_1" readonly>
    <button id="cal_trigger_1" class="submit">...</button>
    <script type="text/javascript">
      Calendar.setup(
      {
        inputField  : "date_1",           // ID of the input field
        ifFormat    : "%d.%m.%Y",         // the date format
        button      : "cal_trigger_1",    // ID of the button
        weekNumbers : false,
        step        : 1
      }
      );
    </script>
    
    <input type="text" id="date_2" class="text" name="date_2" readonly>
    <button id="cal_trigger_2" class="submit">...</button>
    <script type="text/javascript">
      Calendar.setup(
      {
        inputField  : "date_2",           // ID of the input field
        ifFormat    : "%d.%m.%Y",         // the date format
        button      : "cal_trigger_2",    // ID of the button
        weekNumbers : false,
        step        : 1
      }
      );
    </script>
    
    <input type="text" id="date_3" class="text" name="date_3" readonly>
    <button id="cal_trigger_3" class="submit">...</button>
    <script type="text/javascript">
      Calendar.setup(
      {
        inputField  : "date_3",           // ID of the input field
        ifFormat    : "%d.%m.%Y",         // the date format
        button      : "cal_trigger_3",    // ID of the button
        weekNumbers : false,
        step        : 1
      }
      );
    </script>
    3 einzelne DateSelectors. Das geht ohne Problem. Aber wie erstellt man das mit DOM?

    Übrigendes, wenns jemanden interessiert, das ist der DatePicker: The Coolest DHTML / JavaScript Calendar [dynarch.com]

    Patrick
    Geändert von petz_e (02-05-2008 um 12:41 Uhr)

  6. #6
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: DateSelector mit DOM einbinden

    Naja, dann also genau wie ich es in meiner ersten Antwort beschrieben habe.

  7. #7
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: DateSelector mit DOM einbinden

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Naja, dann also genau wie ich es in meiner ersten Antwort beschrieben habe.
    Ja, ok, dann benutzt man eine Variable als Zähler. Aber wie kriegt man das da rein?
    So erstellt man das Textfeld und den Button:
    Code:
    var inputDate = document.createElement('input');
    inputDate.setAttribute('id', 'part_date_' + ctr_part);
    inputDate.setAttribute('class', 'text');
    inputDate.setAttribute('name', 'part_date_' + ctr_part);
    inputDate.setAttribute('value', date);
    
    var calBut = document.createElement('button');
    calBut.setAttribute('class', 'submit');
    calBut.setAttribute('id', 'cal_trigger_' + ctr_part);
    calBut.setAttribute('value', '...');
    Aber wohin klebt man dieses Script. Das setzt man ja nicht in ein setAttribute. Man muss es ja irgendwie mit DOM dem Document übergeben... Das ist mein eigentliches Problem.
    Code:
      Calendar.setup(
      {
        inputField  : "date_3",           // ID of the input field
        ifFormat    : "%d.%m.%Y",         // the date format
        button      : "cal_trigger_3",    // ID of the button
        weekNumbers : false,
        step        : 1
      }
      );
    Patrick

  8. #8
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: DateSelector mit DOM einbinden

    Ich verstehe dein Problem nicht?
    Hier setzt du das Attribut:
    PHP-Code:
    inputDate.setAttribute('id''part_date_' ctr_part); 
    wobei die setAttribute Funktion in so einem Fall überflüssig (und in manchen Fällen sogar im IE zu einem Fehler führt) ist.
    PHP-Code:
    inputDate.id'part_date_' ctr_part
    Da sollte es doch möglich sein, hier die IDs entsprechenden einzufügen:
    PHP-Code:
      {
        
    inputField  "date_3",           // ID of the input field
        
    ifFormat    "%d.%m.%Y",         // the date format
        
    button      "cal_trigger_3",    // ID of the button
        
    weekNumbers false,
        
    step        1
      
    }
      ); 
    Du musst natürlich darauf achten, dass das Element vorher in das Dokument eingefügt wird.

  9. #9
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: DateSelector mit DOM einbinden

    Hier ist das gesamte Script.
    Code:
    var ctr = 0;
    
        function createDateField() {
                      
          // creation of a label
          var label = document.createElement('label');
          label.innerHTML = 'Select Date';
          
          // creation of the input field for the dat
          var inputDate = document.createElement('input');
          inputDate.id = 'date_' + ctr;
          inputDate.class = 'text';
          inputDate.name = date_' + ctr;
          
          // creation of the [...] button
          var calBut = document.createElement('button');
          calBut.class = 'submit;
          calBut.id = 'cal_trigger_' + ctr;
          calBut.value = '...';
          
          // das hängt jetzt hier in der Luft. Wie fügt man das in das Dokument ein????????????????
          Calendar.setup(
          {
            inputField  : "date_" + ctr,         // ID of the input field
            ifFormat    : "%d.%m.%Y",            // the date format
            button      : "cal_trigger_" + ctr,  // ID of the button
            weekNumbers : false,
            step        : 1
          }
          );
                
          // insert the elements into the document
          var container = document.getElementById('container_dates');
          container.appendChild(label);
          container.appendChild(inputDate);
          container.appendChild(calBut);
                
          ctr++;
        }
    Der Button, welche dynamisch diese Felder erstellt wird so definiert:
    HTML-Code:
    <input type="button" class="submit" value="Add Date" onClick="createDateField()"/>
    Patrick
    Geändert von petz_e (02-05-2008 um 13:56 Uhr)

  10. #10
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: DateSelector mit DOM einbinden

    Du hast meinen letzten Satz gelesen?


    P.S. eine Sache die du beachten musst, wenn du nicht mit setattribute arbeitest ist, class musst du in className umwandeln, da class ein reserviertes wort ist.
    Geändert von ein schlauer (02-05-2008 um 14:58 Uhr)

  11. #11
    petz_e ist offline Routinier
    registriert
    14-03-2006
    Beiträge
    258

    AW: DateSelector mit DOM einbinden

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Du hast meinen letzten Satz gelesen?
    Heiss das dass ich das so machen muss?
    Code:
    // insert the elements into the document
          var container = document.getElementById('container_dates');
          container.appendChild(label);
          container.appendChild(inputDate);
          container.appendChild(calBut);
    Calendar.setup(
      {
        inputField  : "date_" + ctr,           // ID of the input field
        ifFormat    : "%d.%m.%Y",         // the date format
        button      : "cal_trigger_" + ctr,    // ID of the button
        weekNumbers : false,
        step        : 1
      }
      );
    Kann es leider erst wieder in 1 1/2 Stunden ausprobieren.

    Patrick

  12. #12
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: DateSelector mit DOM einbinden

    Ja.

Ähnliche Themen

  1. Antworten: 2
    Letzter Beitrag: 12-10-2007, 16:11
  2. Verwendung von DOM
    Von shf10105 im Forum Serverseitige Programmierung
    Antworten: 3
    Letzter Beitrag: 24-11-2006, 10:27
  3. Php Gästebuch in homepage einbinden
    Von burn4ever im Forum Serverseitige Programmierung
    Antworten: 1
    Letzter Beitrag: 21-06-2006, 18:42
  4. Menüs extern einbinden
    Von aggrowdorf im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 17-06-2005, 00:09
  5. Javascript in PDF Dokument einbinden
    Von loopback_28 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 01-06-2005, 10:33

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •