Using date-time view, if before I try to set minutes to '00' (scrolling), after 2 seconds it will change to the actual minute of my PC or mobile phone.

Try the demo:
"Date and Time Selection"
https://quasarframework.github.io/quasar-ui-qscroller/demo

Most noticeable when used with QInput. The other views are working as intended.

There needs to be some semantic relationship between the left and right scrollers so that the left is <= to the right. Would also be good to have some limits such that end date is not past the current date for past ranges or the inverse for future bookings.

QScroller seems to be issuing console.log statements when scrolling the scroller.

I was using the console in the inspector for something else when I suddenly started getting log statements when scroll my QScroller

Mainly stating "update position" .. but also "no selected item found ..."

I am probably implementing this wrong.

ISSUE: Adding min-time or max-time with string has no effect on scroller
Example (other props left off for brevity)

<q-time-scroller v-model="time" min-time="08:00" max-time="15:30" />

Binding them to a data object has the same result:
:min-time="timeString"
timeString: '08:00'

Example markup for the image shown:

<q-input color="orange-6" filled v-model="time2" label="Enter time" mask="##:##">
            <template v-slot:append>
              <q-icon name="far fa-clock" class="cursor-pointer">
                <q-popup-proxy v-model="showTimeScroller2">
                  <q-time-scroller
                    v-model="time2"
                    :locale="locale"
                    :rounded-borders="roundedBorders"
                    :no-header="false"
                    :no-footer="false"
                    :disable="disable"
                    bar-color="#21ba45"
                    min-time="08:00"
                    max-time="15:30"
                    color="white"
                    background-color="grey-9"
                    inner-color="grey-9"
                    inner-background-color="white"
                    :style="scrollerPopupStyle120"
                    @close="() => { showTimeScroller2 = false }"
                  />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>

I use three qscrollers next to each other to simulate a time picker with limited times.

When run it on iPhone with iOS 13.3.1:

• doesn't highlight the active row
• doesn't snap the selected text/value to the center of the field (example with number 6/7)
• when clicked on the number outside the selected row it doesn't change the value
  

The same example from Chrome Win 10

BTW Thanks for the extension.

Nothing critical, just for the next roundup

time-range with disabled 24h-format requires more space at the header

date-time content looks also a little bit squeezed.

Keep it up
brindosch

Is your feature request related to a problem? Please describe.
Customization of selected item is not easy now

Describe the solution you'd like
The slot should look something like this:

{{ item.label.toUpperCase() }}

Describe alternatives you've considered
I am currently using a computed prop, but it's cumbersome

{{ selectedValue }}

Very fascinating framework nonetheless.

Kind regards,
Presiyan

typescript support
composition-api support

Thank you for this great extension! I noticed a corner case with time-range where the validation should be disabled.

To enable/disable dark mode i want to provide a timespan. This usually starts at the evening and ends at the morning. But this is invalid.

Thank you
brindosch

Code:
bar-color="teal-9"
result:

I noticed the same issue on the docs as well...
Colors . The colors say bar-color="purple" but the demo is blue or what appears to be primary
Browser: Chrome Version 78.0.3904.70 (Official Build) (64-bit)
Dev Env: Electron v6.1.2

Hi.
On mobile (Android Chrome was used for testing - no iPhone available), on the demo page, on the first QScroller (blue), after you click on an option (try one that is towards bottom, but it happens on almost all):

• the option is selected
• after a short delay the selection is moved one up
• the move up may happen once or multiple times

It looks like it's related to the normal height of items, because I cannot reproduce it in dense mode.

On Lenovo tablet with Win10, Edge 80.0.361.50 (Chromium) scroller doesn't recognise swipe gestures for changing the content. The same problem is with Chrome 80.0.3987 on the same tablet.
You can only a click on the line and the clicked value is selected with the animation.

I added a css for s dialog window where the scrollers are but it doesn't help

{
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

Google guide for pull-to-refresh. It works for the whole page but doesn't help for accepting swipe gestures for qscroller.

I'll try to investigate it more later along with iOS issue.

Create event listeners for key-binding up/down arrow scrolling. Also to 'jump' between fields. Desktop web / Electron

For example:

• Up-arrow to scroll ascending values
• Down-arrow to scroll descending values
• Left-arrow / right-arrow to move between the value object's keys e.g.: (hours, minutes)

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it from within Dependabot.

Just seen that at the demo page. If you set disable to true, the date-range content disappears. Is for sure the dark<->light color for text which is overwritten by the disable prop

Describe the bug
When QScrollArea is a child of QMenu. QDialog or QPopupProxy, the popup doesn't work.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/pressijan/pen/rNojyBG
2. Click on 'Click here'

Expected behavior
"This should appear inside a Menu or a Dialog" should pop up to the screen

Actual behavior
If using QMenu or QPopupProxy on a big screen, nothing visible happens. When using QDialog or QPopupProxy on a small screen, an overlay appears.
If you remove you receive the expected behavior

Desktop (please complete the following information):

• OS: MS WIndows
• Browser: Chrome, Firefox
• Version: 2.12.6, 2.6.0

Add a label item to the LIST in the DEMO, and then click the item, it cannot be automatically positioned

Can we get a Scroller Header Height property added to make it easy to adjust the height of the Header section of the scrollers?

I particularly want this so that I can set the header height to match the header height of a QDate component that is displayed next to it, but I am sure there will be many other situations where developers may wish to adjust the height of the header section.

When setting time to 12:00 AM the time from the header disappears.
You can check it on the playground: https://quasarframework.github.io/quasar-ui-qscroller/demo
Tested on macOS Big Sur.