-
Notifications
You must be signed in to change notification settings - Fork 100
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to show calendar only when an icon is clicked? #71
Comments
I figured it out: call |
@airblade I started writing a second option, which is to put a click event handler on the icon and use the datepicker instance's |
Ok, turns out there wasn't a bug, rather, I hadn't considered the flow of events in the browser. If you implement a click event on some element to toggle the calendar with the // Keep the picker attached to the input element.
const picker = datepicker(inputElement, options)
// Toggle the calendar when the icon is clicked.
icon.addEventListener('click', e => {
// Prevent Datepicker's event handler from hiding the calendar.
e.stopPropagation()
// Toggle the calendar.
const isHidden = picker.calendarContainer.classList.contains('qs-hidden')
picker[isHidden ? 'show' : 'hide']()
}) With the above, you can avoid having to provide custom |
Ah, that makes sense. And I think this section option is simpler than my current approach. Thank you! |
Hello!
I have been reading through the code and I must say it is a breath of fresh air compared to some other datepickers :)
Anyway, I have an
<input type=text>
for a date and a little calendar icon next to it. I can't quite figure out how to show the calendar when the icon is clicked (but not when the user simply focuses/types in the input field).(Currently I have a click handler on the icon which calls
datepicker()
with the input field DOM element, and thenshow()
on the returned picker instance. At that point nothing happens and I have to click into the input field to get the calendar.)Any pointers would be much appreciated!
The text was updated successfully, but these errors were encountered: