new DateTime() passing to <input-date> fails

  • Dear all,

    I am new to Pagekit and Vue.js and really impressed! Currently I am developing my own extension and - so far - its quite perfect. Except one little thing...

    The Problem:

    I have a model "Transfer" and I want to change its database entries through an admin panel with Vue.JS.

    I can create new "Transfers" and change all its entries and values, except a column of type datetime, in my case its called "created".

    Whenever I pass "transfer.created" to <input-date> like so:

    1. <input-date :datetime.sync="transfer.created"></input-date>

    The datetime picker renders the date but not the time.

    When I try to change the value I always get "Invalid date" and the console says:

    If I try to display the date directly like this:

    1. <div class="uk-form-controls uk-form-controls-text">
    2. <p>{{ $trans('%date%', { date: transfer.created ? $date(transfer.created) : $trans('Never') }) }}</p>
    3. </div>

    I get this:

    What I have tried:

    I had a look at the blog-extension and copied and pasted nearly everthing related from BlogController.php, PostApiController.php, post-edit.php, post-edit.js and post-settings.vue.

    In the blog-extension the "" renders like a charm - in my extension not. It really drives me crazy!

    Can anybody give me a hint? What am I doing wrong?



  • Before you ask about my Model, here it is:

  • SPQRInc

    Approved the thread.
  • You can dump variables in Vue.js as json like this:

    {{ variable | json }}

    The better way would be to use the Vue.js Devtools which are available as Chrome Extension.

    For serialization this could help:

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7