Set default end date in datetime range field

  • I need to set the default-selection value for datetime range field. Right now when I add it I get errors. How do I do it. I did not find any proper docs for that field.
    I tried

    eod: {
            from: moment().format(),
            to: moment().endOf('day').format(),
    eod: {
            from: moment(),
            to: moment().endOf('day')
    eod: moment().endOf('day')

    But none of the above works. The error I get is

    Error in render function: (found in <QInlineDatetime>)

    RangeError: Invalid array length at Proxy.renderList (eval at <anonymous> (app.js:833), <anonymous>:3309:11) at Proxy.render (eval at <anonymous> (app.js:814), <anonymous>:3965:112) at VueComponent.Vue._render (eval at <anonymous> (app.js:833), <anonymous>:3530:22) at VueComponent.updateComponent (eval at <anonymous> (app.js:833), <anonymous>:2107:22) at Watcher.get (eval at <anonymous> (app.js:833), <anonymous>:2426:25) at (eval at <anonymous> (app.js:833), <anonymous>:2496:22) at flushSchedulerQueue (eval at <anonymous> (app.js:833), <anonymous>:2290:13) at Array.eval (eval at <anonymous> (app.js:833), <anonymous>:460:20) at nextTickHandler (eval at <anonymous> (app.js:833), <anonymous>:409:16) handleError @ vue.runtime.esm.js?a427:1449 Vue._render @ vue.runtime.esm.js?a427:3532 updateComponent @ vue.runtime.esm.js?a427:2107 get @ vue.runtime.esm.js?a427:2426 run @ vue.runtime.esm.js?a427:2496 flushSchedulerQueue @ vue.runtime.esm.js?a427:2290 (anonymous) @ vue.runtime.esm.js?a427:460 nextTickHandler @ vue.runtime.esm.js?a427:409

  • @administrators Please take a look. is this a bug or I am implementing in a wrong way ?

  • Admin

    Correct way would be:

    eod: {
       from: moment().format(),
       to: moment().endOf('day').format()
    <q-datetime-range v-model="eod">

    Tested again and it does not error out. Which means there’s something in your app code. Any repo I can take a look?

  • @rstoenescu Thanks for taking time to test it again for me. I know that I can implement it using v-model.
    In my case, datetime-range field is an optional field and I want the eod to be set only when the popover is shown. And when shown, the default from time should be current time and to time should be end of day. I see default-selection prop in the documentation but it wasn’t explained anywhere how to use that for date-range field. I implemented it by
    <q-datetime-range class="full-width" type="datetime" v-model="range" @input="$v.new_reservation.range.from.$touch()" default-selection="eod"> </q-datetime-range>

    I implemented this way and the above mentioned error comes when I open the popover to pick datetime.

  • @administrators @Global-Moderators I am still struggling to find solution to this issue. Please help.

  • Admin

    Hi, please allow a few days to investigate. Don’t remember embedding a default-selection prop on Datetime Range. If it’s not there, I’ll add it to v0.14. Thanks for your patience!

  • Thank you.

  • Admin

    Just pushed patch to fix this in future v0.14. It works with “default-selection” prop for QDatetime and QInlineDatetime and with “default-from” and “default-to” for QDatetimeRange.

  • Great. Thanks.

Log in to reply