Aktivierung eine JavaScript - HTML Bootstrap-Kombination

JenneMander · 9 Februar 2013

Hallo Forum,
ich möchte gerne einen auf Bootstrap basierenden datetime-picker auf meiner HP integrieren.
Wenn ich das Feld statisch habe in etwa so:

HTML:

<body>    <div id="datetimepicker" class="input-append date">      <input type="text" placeholder="Tatzeit"></input>      <span class="add-on">        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>      </span>    </div>    <script type="text/javascript"     src="jQuery/jquery-1.8.3.js">    </script>     <script type="text/javascript"     src="bootstrap/js/bootstrap.js">    </script>    <script type="text/javascript"     src="bootstrap/js/bootstrap-datetimepicker.min.js">    </script>    <script type="text/javascript"     src="bootstrap/js/bootstrap-datetimepicker.pt-BR.js">    </script>    <script type="text/javascript">      $('#datetimepicker').datetimepicker({        format: 'dd/MM/yyyy hh:mm:ss',        language: 'pt-BR'      });    </script>  </body>

Dann funktioniert alles genauso wie es soll. Nun ist es aber so, dass ich dynamisch ein Formular generiere, welches nicht immer Datum und Uhrzeit benötigt. Daher wollte ich diesen Bestandteil nur generieren wenn er wirklich benötigt wird. Und habe mich wie folgt daran gemacht:

//JavaScript:

Code:

if(type == "date")
  {
    text = text + " <div id='datetimepicker' class='input-append date'><input type='text' placeholder='Zeitangabe'></input><span class='add-on'><i data-time-icon='icon-time' data-date-icon='icon-calendar'></i></span></div>";
    $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss',
        language: 'pt-BR'
      });
    return text;
  }

//und dann kommt
document.getElementById("platzhalter").innerHTML=text;

Mit allen Elementen funktioniert es wie am Schnürrchen nur eben nicht mit diesem.

Mir wird zwar das Inputfeld angezeigt, aber die Funktionen stehen mir nicht zur Verfügung, woran kann das liegen? Und vor allem wie kann ich das beheben? Firebug sagt gar nichts dazu.
Über Hilfe eurerseits bin ich euch sehr dankbar.
Ein schönen Sonntag wünschend
Jenne

Tronjer · 9 Februar 2013

Was genau willst du mit if() abfragen, ob ein <input> Element existiert oder den Typ date enthält?

In jQuery könnte das so aussehen:

Code:

if($('#target').is('input') {
    // tu was
})
if($('#target').length > 0) {
    // tu was
}
if($('#target').attr('type') === 'date') {
    // tu was
}

Wobei ich eine Abfrage nach Typ bisher noch nie hatte, aber im Zweifelsfall könnte man dem <input> Element ja zusätzlich einen Namen oder ein data-Attribut mit einem eindeutigen Bezeichner geben.

JenneMander · 9 Februar 2013

Oh, ich habe jetzt erst gesehen, dass gar keine Formatierung übernommen wurde. Sorry.
Also mit Hilfe einer reinen JavaScript-Bibliothek parse ich auf Knopfdruck (Buttonevent) eine zufällige XML-Datei. Die XML-Elemente werden dann nacheinander abgearbeitet und jedes wird nach dem Namen und dem Typ überprüft. Anschließend wird entschied, was aus dem Element wird.

Z.b.(stark vereinfacht)

Code:

if(type = int )
{
   if(name=plz) { text=text+"<input type='int'></input>"}
   if(name=hausnr) {text=text+"<input type='int'</input><input type='string'></input>"}//hier einfach nur String hinzu falls jemand in der 1 A wohnt
}

Und eine dieser Abfragen soll eben diesen DateTimepicker erzeugen. Sprich ich kann nicht die gesamte Zeit jquery nutzen-weil ich einfach nicht die Fähigkeiten besitze.
vielen Dank für eure Hilfe

Tronjer · 9 Februar 2013

JenneMander schrieb:
Also mit Hilfe einer reinen JavaScript-Bibliothek parse ich auf Knopfdruck (Buttonevent) eine zufällige XML-Datei. Die XML-Elemente werden dann nacheinander abgearbeitet und jedes wird nach dem Namen und dem Typ überprüft. Anschließend wird entschied, was aus dem Element wird.

Bedeutet, dass das HTML-Element, auf welches der Datepicker aufgerufen werden soll, erst nach dem Laden der Seite eingebunden oder erzeugt wird? In dem Fall würdest du eventuell einen Evenlistener benötigen.

Also statt:

Code:

$('#button').click(function() {
    // erzeuge Div und rufe darauf datepicker auf.
});

ein

Code:

$(document).on('click', '#button', function() {
    // erzeuge Div und rufe darauf datepicker auf.
})

Aktivierung eine JavaScript - HTML Bootstrap-Kombination

JenneMander

Neues Mitglied

Tronjer

Senior HTML'ler

JenneMander

Neues Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge