Datepicker in einer Tabelle

  • Hallo in die Runde,

    ich bin ein Neuling auf dem HTML Gebiet und ich hoffe, ihr habt eine Idee für mein Problem.

    Bei Google bin ich leider nicht fündig geworden.


    Ich bin dabei mir ein Formular zu erstellen, dass eine Tabelle enthält.

    In der 1.Spalte der Tabelle möchte ich ein Datum haben. Wenn ich in das Feld springe soll ein Datepicker aufgehen, indem der Ausfüller das Datum auch per Klick wählen kann. Und zwar genau bei dem Datumsfeld. Wisst ihr wie ich das hinbekomme?


    Danke schon mal für Eure Anregungen und Ideen.

    Karin

    P.S. dies ist nur ein kleiner Ausschnitt aus dem Formular. Das Styling stimmt natürlich nicht.


    <html>


    <head>

    <title>TEST</title>

    <style type="text/css">


    table, td {

    border: 1px solid black;

    border-collapse: collapse;

    }


    </style>


    </head>



    <body>


    <table>


    <thead>


    <tr>

    <td scope="col" rowspan="2" style="text-align:center; width:14%">Datum</td>


    <td scope="colgroup" colspan="2" style="text-align:center; width:23%">Mehrarbeit</td>


    <td scope="colgroup" colspan="3"style="text-align:center; width:23%">Zeitzuschlagsstunden</td>


    <td scope="col" rowspan="2" style="text-align:center; width:40%">Bemerkungen</td>

    </tr>


    <tr>

    <td scope="col" style="text-align:center">Zuschlags-<br>stunden</td>


    <td scope="col" style="text-align:center">Vergütungs-<br>stunden *)</td>


    <td scope="col" style="text-align:center">Nacht<br>25%</td>


    <td scope="col" style="text-align:center">Sonntag<br>50%</td>


    <td scope="col" style="text-align:center">Feiertag<br>100%</td>

    </tr>


    </thead>


    <tr>

    <td><input type="text" id="inputDatum" class="datepicker" name="inputDatum" maxlength="10" placeholder="TT.MM.JJJJ"> </td>


    <td> <input type="text" id="inputZuschlagStd" name="inputZuschlagStd" maxlength="5" placeholder="0,00"> </td>


    <td> <input type="text" id="inputVerguetungStd" name="inputVerguetungStd" maxlength="5" placeholder="0,00"> </td>


    <td> <input type="text" id="inputNacht" name="inputNacht" maxlength="4" placeholder="0,00"> </td>


    <td> <input type="text" id="inputSonntag" name="inputSonntag" maxlength="4" placeholder="0,00"> </td>


    <td> <input type="text" id="inputFeiertag" name="inputFeiertag" maxlength="4" placeholder="0,00"> </td>


    <td> <input type="text" id="inputBemerkung" name="inputBemerkung" maxlength="30" placeholder="max. 30 Zeichen"> </td>

    </tr>


    </table>


    </body>

    </html>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!