Not bind to input element

[Gruski]

Is there a way to not bind the component to an input element? I need to open the calendar when user clicks on a div, show the floating calendar positioned absolute with a given (x, y) offset relative to the clicked div then upon selecting a day from the calendar, it needs to update a variable. Also when calendar pops up the selected day should be that of the variable's value.

Trying to hack it right now by binding to a hidden input but its an ugly solution especially when I don't see a way to control the calendar's positioning. It would be nice if datepicker.show() would accept some parameters to control positioning like this:

datepicker.show(atElement, {x: 4, y: 15});

Where calendar would be positioned at x, y offset from the location of given element.

[mymth]

Is't it easier for you to use another date picker that supprots modal dialog mode?

Anyway, how about setting up an inline piker in your floating div, show and move the div and set the date to the picker through a click event handler set to the input element, and hide the div and set the selected date back to the input through a changeDate event handler set to the div?

It seems to me that the position option for show() is unnecessarily feature for the majority of people.

[Gruski]

I looked for many hours for a date picker that is not bound to an input element. Out of the ones that are not trash or use outdated tech, I found about a hand-full that are worth considering. Out of those ALL are intimately tied to an input element. Strange but true.

Regarding your suggestion. I don't have a floating div. The floating part I was talking about is the calendar itself. If I build my own floating div containing the inline picker then I'd have to write my own positioning code which I rather not do because it's done so well in the vanilajs picker and the reason I rejected many other pickers.

What I am attempting to do is build a Vue wrapper around the vanilajs picker, binding it to a hidden input element to satisfy its restrictive requirement, and using setDate() and changeDate event to set/get the date from the calendar and bind it to a reactive Vue data element. This will allow total flexibility since Vue can bind that data to anything including an input, a graphic, some read-only text, etc. The only problem now is the positioning of the floating calendar. I guess I'll have to modify the vanilajs picker's script myself to support this. I was just hoping not to do this as it will be harder to update the component later having to do diffs and merges.

[Gruski]

Actually rather than adding parameters to method show(), a cleaner way to implement custom positioning is to add two options:

let datepicker = new Datepicker(hiddenInput, {
    placeAtElem: this.$slots.default[0].elm,
    placeOffset: { x: 0, y: 0 }
});

And then act on them conditionally if they exist in method place()

[mymth]

I'm sorry I misunderstood.

Sorry again but for me, it's still questionable who other than you will use this feature.

It's inline picker that is not bound to input element and is intended to allow users to create a custom date picker with their own display method that matches their specific needs. Thus, regular picker's behavior should be specialized to provide the functionality common to ordinary people.

Until I start seeing the same request repeatedly, this feature will not be adopted.

Please understand this is my policy to prevent my code from bloating and becoming difficult to trace with repeated patchworks like bootstrap-datepicker's.

[Gruski]

The inline picker seems more removed from what I am trying to achieve. It doesn't pop up or anything. I ended up rewriting part of your component to make it do what I want. I added those two options and completely rewrote the place() method which never really worked well for me. It was oddly unpredictable in how it decides to place the popup below or above and would sometimes overflow beyond the browser's view-port. Now it works well although I spend more time on it than I wanted. Other than that, great component.

[brandonscript]

For what it's worth, I would greatly appreciate the offset option – I'm using some oversized form fields, and the picker ends up cutting off half of the input when it appears because the input is oversized. It would be nice to add a positioning offset to the API so that it always opens with that in mind.