CodePen

HTML

            
              <html>
<head>
  <script src="http://kosemo.se/t.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://kosemo.se/moment.js"></script>
    <script src="http://kosemo.se/pikaday.min.js"></script>
    <link href="http://kosemo.se/pikaday.css" rel="stylesheet" />
</head>
<body style="background: white;">
    <form id="frmPurredato" name="frmPurredato" method="post" action="">
        <input type="hidden" name="svarsettid" id="svarsettid" value="1234" />
        <input type="hidden" name="purredato" class="purredato" id="purredato" data-purring="1" value="29.01.2013" />
        <input type="hidden" name="purredato2" class="purredato" id="purredato2" data-purring="2" value="" />
        <input type="hidden" name="purredato3" class="purredato" id="purredato3" data-purring="3" value="" />
        <input type="hidden" name="purredato4" class="purredato" id="purredato4" data-purring="4" value="" />
        <input type="hidden" name="purredato5" class="purredato" id="purredato5" data-purring="5" value="" />
        <div id="purrecontainer">
            <table style="width: 100%;" id="purretable">
                <thead>
                    <tr>
                        <th class="purringheader">Reminder #</th>
                        <th>Date</th>
                        <th>Activity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-purring="1">
                        <td class="purring">1. reminder</td>
                        <td class="purredato">29.01.2013</td>
                        <td class="aktivitet">
                            <button type="button" data-purring="1" data-event="change">Change</button>
                            <button type="button" data-purring="1" data-event="delete" disabled title="Du kan ikke slette første purring">Delete</button></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" id="lastrow">
                            <button type="button" id="addpurring">Add reminder</button></td>
                    </tr>
                </tfoot>

            </table>
            <button type="submit">Save</button>
            <button type="button">Cancel</button>
        </div>
        <div id="picker"></div>
        <div style="clear: both;"></div>
    </form>
    <script type="t/template" id="rowtemplate">
            <tr data-purring="{{=purring}}">
                <td class="purring">{{=purring}}. reminder</td>
                <td class="purredato">{{=purredato}}</td>
                <td class="aktivitet">
                    <button type="button" data-purring="{{=purring}}" data-event="change">Change</button>
                    <button type="button" data-purring="{{=purring}}" data-event="delete" class="delete">Delete</button></td>
            </tr>
    </script>

</body>
</html>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
                     #purrecontainer {
            float: left;
        }

        #picker {
            float: left;
            padding: 10px;
            background-color: #3366ff;
            display: none;
        }

        .purringheader {
            text-align: left;
        }

        .purring {
        }

        .purredato {
            font-weight: bold;
        }

        #lastrow {
            text-align: right;
        }

        .aktivitet {
            text-align: right;
        }

        .activerow {
            background-color: #3366ff;
            color: white;
        }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
                      var count = 1; // This one is actually set dynamically with ASP

        var createPicker = function (dato, purring) {
            return picker = new Pikaday({
            
                format: 'DD.MM.YYYY',
                firstDay: 1,
                setDefaultDate: true,
                defaultDate: moment(dato, "DD.MM.YYYY").toDate(),
                i18n: {
                    months: ['Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Desember'],
                    weekdays: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
                    weekdaysShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tors', 'Fre', 'Lør']
                },
                onSelect: function () {
                    $(".purredato[data-purring=" + purring + "]").val(this.getMoment().format("DD.MM.YYYY"));
                    console.log($("tr[data-purring=" + purring + "]").children(".purredato").text());
                    $("tr[data-purring=" + purring + "]").children(".purredato").text(this.getMoment().format("DD.MM.YYYY"));
                    this.hide();
                    $("#picker").hide();
                }
            });

        }

        var closePicker = function () {
            $("#picker").first(".pika-single").remove();
            $("#picker").hide();
        };

        var checkForMax = function () {
            count == 5 ? $("#addpurring").attr("disabled","disabled") : $("#addpurring").removeAttr("disabled");
        };

        var checkLastDelete = function () {
            $(".delete").attr("disabled","disabled");
            $(".delete[data-purring=" + count + "]").removeAttr("disabled");
            $(".delete[data-purring!=" + count + "]").attr("title","Du kan kun slette den siste purringen");

        };
        
        for (var i=2; i<count+1;i++) {
            raw_template = $("#rowtemplate").text();
            //alert(raw_template);
            template = new t(raw_template);
            el = $(".purredato[data-purring=" + i + "]");
            data = template.render({purring: el.data("purring"), purredato: el.val()});
            $("#purretable").append(data);
        }
        checkLastDelete();
        // Handle buttons
        $("#purretable").on("click","button", function(ev) {
            el = $(ev.currentTarget);
            console.log(el.data());

            // Delete
            if (el.data("event") === "delete") {
                el.parent().parent().remove();
                $(".purredato[data-purring=" + el.data("purring") + "]").val("");
                count--;
            }

            // Change date
            if (el.data("event") === "change") {
                $("#picker").children(".pika-single").remove();
                mypicker = createPicker($(".purredato[data-purring=" + el.data("purring") + "]").val(), el.data("purring"));
                
                $("#purretable tr").removeClass("activerow");
                el.parent().parent().addClass("activerow");
                $("#picker").append(mypicker.el).show();
            }

            checkLastDelete();
            checkForMax();
        });
        
        
        // Add reminder
        $("#addpurring").on("click", function(ev) {
            count++;
            template = new t($("#rowtemplate").text());
            data = template.render({purring: "" + count, purredato: moment().format("DD.MM.YYYY")});
            $("#purretable").append(data);
            $(".purredato[data-purring=" + count + "]").val(moment().format("DD.MM.YYYY"));

            // Deactivate all deletebuttons except the last one
            checkLastDelete();
            checkForMax();
        });


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................