Comments (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.
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.
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 theopen
status
What do you think?
from vue-datetime.
option two sounds most flexible
would be good to have a short chat about it. how can I contact you?
from vue-datetime.
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 datetimeref="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 bothvdatetime-overlay
andvdatetime-popup
classes and callthis.$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)
- What to set in ":min-datetime" value ?
- min-datetime should update datetime
- The component is not accessibility
- Is it possible to make a Web Component from this package?
- Not emitting value in firefox
- minDatetime not validated when use12-hour HOT 1
- Input invalid message is above datetime modal
- Error on click of DateTime input HOT 5
- When we the select the time and if we compare the value then we found both times are different HOT 1
- Show only month and year?
- Disable dates, days, and specific time ranges (my fork) HOT 1
- I can't set always the time to start at 00:00
- Luxon Invalid unit zone HOT 10
- Dates range selection
- Issue with selecting year
- Select only Year or Year/Month
- Datetime component fires this.emitInput() upon creation - Solved
- React porting
- Firefox: Trapped inside calendar when using keyboard tab
- 🚨🚨 This project is no longer maintained 🚨🚨 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-datetime.