Git Product home page Git Product logo

Comments (5)

clytras avatar clytras commented on May 23, 2024 5

This would be a really handy feature and would un-bind the datetime popup control from the input field. There are so many cases that a datetime picker is needed without an input field. @zombeej solution/hack does not work for me, it throws an error (Uncaught TypeError: this.$refs['datepicker'].$el.firstChild.click is not a function with the right datetime ref="datepicker") and there is also a problem with bootstap 4 modal, because the overlay fixed position actually fits inside the modal instead of the whole window and in cases like this one, would be nice to have the picker popup independently without an input or to bind it to another input.

EDIT
My workaround for bootstrap 4 modal is to add the datetime component outside the modal, hide the input like @zombeej does, add highther than boostrap modal z-index for both vdatetime-overlay and vdatetime-popup classes and call this.$refs.datepicker.open(event); bind to focus event on an input field inside the modal. It works for me, but it would be really nice to have it working with no need of an input control.

from vue-datetime.

zombeej avatar zombeej commented on May 23, 2024 2

Just to leave this here, you can accomplish it this way:

In the template:

<button @click="openPicker">Open it!</button>
<datetime
  ref="date-picker"
  v-model="date" />

In Methods:

openPicker () {
  this.$refs['date-picker'].$el.firstChild.click()
}

In your CSS:

.vdatetime-input {
  display: none;
}

from vue-datetime.

mariomka avatar mariomka commented on May 23, 2024

Sounds good, I thought three options:

  • Add a simply property to draw a button instead of an input

If we want to be more customizable we can:

  • Add a slot to override the input
  • Or add a property no-input or similar and another one to set the open status

What do you think?

from vue-datetime.

bloukrans avatar bloukrans commented on May 23, 2024

option two sounds most flexible

would be good to have a short chat about it. how can I contact you?

from vue-datetime.

giacomotontini avatar giacomotontini commented on May 23, 2024

This would be a really handy feature and would un-bind the datetime popup control from the input field. There are so many cases that a datetime picker is needed without an input field. @zombeej solution/hack does not work for me, it throws an error (Uncaught TypeError: this.$refs['datepicker'].$el.firstChild.click is not a function with the right datetime ref="datepicker") and there is also a problem with bootstap 4 modal, because the overlay fixed position actually fits inside the modal instead of the whole window and in cases like this one, would be nice to have the picker popup independently without an input or to bind it to another input.

EDIT
My workaround for bootstrap 4 modal is to add the datetime component outside the modal, hide the input like @zombeej does, add highther than boostrap modal z-index for both vdatetime-overlay and vdatetime-popup classes and call this.$refs.datepicker.open(event); bind to focus event on an input field inside the modal. It works for me, but it would be really nice to have it working with no need of an input control.

This helped me a lot. Must be added to the docs.

from vue-datetime.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.