Flatpickr: Input type number hard to use

[mgohin]

You can't change hours/minutes by entering numbers. If you try to enter 12, it'll only enter 01.

If you hide Chrome arrows for input type number or you try to use it with IE10, you can't change hours/minutes has you want.

If you want to try without those arrows on Chrome :

input::-webkit-outer-spin-button, /* Removes arrows */
input::-webkit-inner-spin-button, /* Removes arrows */
input::-webkit-clear-button { /* Removes blue cross */
  -webkit-appearance: none;
  margin: 0;
}

Update : add more precisions

[rutger1140]

Current version on the demo site shows spinners overlapping the year in Safari. This might be related?

OSX 10.11.5 with Safari 9.1.1

[mgohin]

Yes it is, it's the browser that add this kind of helper on inputs like date, time, number.

So if you hide that kind of helper, you get stuck and can't change values properly

[mgohin]

Could you add arrows ? That way the timepicker will be the same for everyone.

[andrewmclagan]

Agree, this is a UI issue going forward I believe. The native number controls are woeful and its not possible to style them. We could do something with pseudo classes i guess? Although we would still need just plain text inputs.

[andrewmclagan]

Also scrolling on the fields like this can be super buggy and hijack the actual window scroll, on osx peripherals scrolling with mouse is way too fast.

[chmln]

Agreed - the number input implementations across browsers are inconsistent at best - in terms of both design and behavior.

I will add +- buttons with icons that can be customized.

osx peripherals scrolling with mouse is way too fast.

Unfortunately I don't have a mac to play around with scrolling events and behavior. All the scrolling action happens in the timeWrapper function, where I do attempt to stabilize the scrolling amount.

@mgohin @andrewmclagan I'm also contemplating bundling a few svg icons instead of current unicode versions. They'd increase the css size by a few kilobytes, but the calendar will look much more polished out of the box. Any opinions?

[rutger1140]

Go for SVG, it's worth the extra size imo.
I'm happy to test on OS X if needed.

[mgohin]

SVG is fine for most of modern browsers, please don't forget at least IE10 for me :)

Or at least add an option to replace those templates, for me I would use font-awesome icons, IE is a pain in the ass for svg

[chmln]

Or at least add an option to replace those templates, for me I would use font-awesome icons, IE is a pain in the ass for svg

Absolutely. They will be similar to the prev/next arrow icons, where you can insert your own html for icons.

[mgohin]

perfect, can't wait, my boss is asking me those arrows, I was about to fork the project 👍

[andrewmclagan]

School is the most flexible option. For react fans it's also a first class citizen

[mgohin]

Will it be only in the V2 ?

[row1]

Would be good to also have an option to disable changing the year altogether i.e. just make it a label and no arrows.

[chmln]

Chrome, Firefox, and Safari all have arrows on their inputs and I've restyled them to ensure they display correctly in 2.0.
I don't find it is worth to reimplement features as of now already existing in latest browsers, or that will exist in the near future (MS Edge)