Feature #31300

Automatically switch between native date picker and custom date picker based on mobile or not mobile devices

Added by Marius BALTEANU over 1 year ago. Updated over 1 year ago.

Status:NewStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:UI
Target version:-
Resolution:

Description

In #19468 was implemented the browser native date picker (when it's available) which is great for mobile devices, but to be honest, not so great when we speak about desktops/laptops. Being a project management/issue tracking platform, I expect that most of the usages are made from desktops/laptops (or at least, this is the case at Zitec).

I would like to propose to change a little bit the current behaviour and to use the native date picker only for mobile devices and for non-mobile devices, to use the custom date picker.
I made some tests using FlatPickr:"https://github.com/flatpickr/flatpickr" library and it works very well.

Why FlatPickr and not jQuery UI Date Picker?
- first of all, because the switch between native and non native is made by this library and we don't need to code it
- second of all, it is written in JS vanilla without any dependency, it is very light weight and has tests
- and finally, it offers a bunch of other really great features that can be useful for other improvements or by the plugins (for ex: time picker, range selections, etc).

At the same time, jQuery UI is not actively maintained (last release in September 14, 2016) and I think it is a good idea to start replace it with other modern libraries.

I'm attaching a very basic patch for demo and test purposes and to take some feedback, especially from Plan.io guys who were behind those two great additions (mobile responsive and native pickers).

Screenshots:
1. Non mobile devices:

2. Mobile devices:

replace_jquery_mobile_with_flatpickr_demo.patch Magnifier (6.56 KB) Marius BALTEANU, 2019-05-05 13:27

mobile.png (159 KB) Marius BALTEANU, 2019-05-05 13:27

non_mobile.png (275 KB) Marius BALTEANU, 2019-05-05 13:27


Related issues

Related to Redmine - Feature #23892: Switch date pickers embedded in browsers or bundled in re... New
Related to Redmine - Feature #13834: Can we change the jquery file with other versions New
Related to Redmine - Defect #31077: "Icon for Datepicker" does not appear after status was ch... Closed
Related to Redmine - Defect #31259: Redmine Datepicker does not show in Firefox Closed

History

#1 Updated by Marius BALTEANU over 1 year ago

  • Related to Feature #23892: Switch date pickers embedded in browsers or bundled in redmine added

#2 Updated by Marius BALTEANU over 1 year ago

  • Related to Feature #13834: Can we change the jquery file with other versions added

#3 Updated by Marius BALTEANU over 1 year ago

  • Related to Defect #31077: "Icon for Datepicker" does not appear after status was changed. added

#4 Updated by Marius BALTEANU over 1 year ago

  • Related to Defect #31259: Redmine Datepicker does not show in Firefox added

#5 Updated by Pavel Rosický over 1 year ago

I like this change! Do you think that flatpickr's assets should be served via cdn? It's cleaner, but it also might cause problems on networks with restricted access.

#6 Updated by Marius BALTEANU over 1 year ago

Pavel Rosický wrote:

I like this change! Do you think that flatpickr's assets should be served via cdn? It's cleaner, but it also might cause problems on networks with restricted access.

Thanks! No, it’s only for testing, the final patch will contain the library assets.

#7 Updated by James Byrne over 1 year ago

I vote for this. We recently updated to 3.4.11 from 3.2.? and discovered that our corporate standard date format (yyyy-mm-dd) is not available in Redmine Date pickers. I have read the W3 consortium's implementation notes and cannot believe that something as idiocentric as date formatting was not provided for as a type attribute.

Alternatively, provide for a system-wide configuration option to either use date type or js text date fields.

#8 Updated by Luc Luc over 1 year ago

Please take into consideration https://www.redmine.org/issues/23224#note-5 (maybe #23224 is related to this issue) and make the native ones optional if possible (even on mobile).
I'm on 4.0.4 and with each update since 3.2.x I have to revert c418fab8a76b7672c4f341fb7c3e203ae92b50c0 for the date-picker to be consistent and allow ISO8601 date format (YYYY-MM-DD).

Thank you,
Luc

Also available in: Atom PDF