Can't solve my converting circular JSON error

Question

I keep having this error: Converting circular JSON.

I can't seem to find the mistake

function functie()
{
    var footer = document.createElement("footer");
    footer.innerHTML = "<button id='addButton'>" + "+" + "</button>";
    footer.setAttribute("id", "footer");
    document.body.appendChild(footer);

    $(function() { 
        var naam = $("#naam"),
            beschrijving = $("#beschrijving"),
            vervaldatum = $("#vervaldatum"),
            allFields = $([]).add(naam).add(beschrijving).add(vervaldatum);

    function checkRegexp(o, regexp, n) {
        if (!(regexp.test(o.val()))) {
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        } else {
            return true;
        }
    }

    $("#dialog-form").dialog({

        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "toevoegen": function() {
                var bValid = true;
                allFields.removeClass("ui-state-error");
                bValid = bValid && checkRegexp(naam, /^[0-9a-zA-Z-" "]+$/, "Medicatie may consist of a-z, 0-9, underscores, begin with a letter.");
                bValid = bValid && checkRegexp(beschrijving, /^[0-9a-zA-Z-" "]+$/, "eg. ui@jquery.com");
                bValid = bValid && checkRegexp($('#datepicker'), /^(0[1-9]|[12][0-9]|3[01])[\/|-|\.](0[1-9]|1[012])[\/|-|\.](19|20)\d\d$/, "Datum field only allow : a-z 0-9");

                if (bValid) {
                    if (arr === null)
                    {
                        var arr = [];
                arr = JSON.parse(localStorage.getItem("data"));
                        var gegevens = [{
                                naam: naam,
                                beschrijving: beschrijving,
                                vervalDatum: $('#datepicker')
                            }];
                        localStorage.setItem("data", JSON.stringify(gegevens));
                    }
                    else
                    {
                        var arr = [];
                arr = JSON.parse(localStorage.getItem("data"));
                        arr.push({
                            naam: naam,
                            beschrijving: beschrijving,
                            vervalDatum: $('#datepicker')
                        });
                        localStorage.setItem("data", JSON.stringify(arr));
                    }
                    $(this).dialog("close");
                }
            },
            annuleren: function() {
                $(this).dialog("close");
            }
        },
        close: function() {
            allFields.val("").removeClass("ui-state-error");
        }
    });

    $("#addButton")
            .click(function() {
                $("#dialog-form").dialog("open");
            });

    $(function() {
        $("#datepicker").datepicker();
    });
});

He gives the error ar this line: localStorage.setItem("data", JSON.stringify(arr)); which is located in the 'toevoegen': function() {...}

Can you guys help me?

please no down-voting, I've did alot of research..

Answer 1

You want to pass the 'vervalDatum' (expiration date), but you're passing the jQuery wrapper. Don't you mean to use $('#datepicker').val()? and get the value from the $('#datepicker') element?