Project

General

Profile

Actions

Feature #31300

open

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

Added by Marius BĂLTEANU over 5 years ago. Updated over 3 years ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
UI
Target version:
-
Start date:
Due date:
% Done:

0%

Estimated time:
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:


Files

replace_jquery_mobile_with_flatpickr_demo.patch (6.56 KB) replace_jquery_mobile_with_flatpickr_demo.patch Marius BĂLTEANU, 2019-05-05 13:27
mobile.png (159 KB) mobile.png Marius BĂLTEANU, 2019-05-05 13:27
non_mobile.png (275 KB) non_mobile.png Marius BĂLTEANU, 2019-05-05 13:27
redmine-flatpickr-datetimepicker.patch (71.2 KB) redmine-flatpickr-datetimepicker.patch 99.9% Marius' work (+ local flatpickr js and stylesheet files) Luc Luc, 2021-05-19 22:12

Related issues

Related to Redmine - Feature #23892: Switch date pickers embedded in browsers or bundled in redmineNew

Actions
Related to Redmine - Feature #13834: Can we change the jquery file with other versionsNew

Actions
Related to Redmine - Defect #31077: "Icon for Datepicker" does not appear after status was changed.Closed

Actions
Related to Redmine - Defect #31259: Redmine Datepicker does not show in Firefox Closed

Actions
Related to Redmine - Defect #35225: Edit issue shows date in MM/DD/YYYY while the rest of the application shows YYYY/MM/DDResolved

Actions
Actions #1

Updated by Marius BĂLTEANU over 5 years ago

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

Updated by Marius BĂLTEANU over 5 years ago

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

Updated by Marius BĂLTEANU over 5 years ago

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

Updated by Marius BĂLTEANU over 5 years ago

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

Updated by Pavel Rosický over 5 years 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.

Actions #6

Updated by Marius BĂLTEANU over 5 years 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.

Actions #7

Updated by James Byrne over 5 years 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.

Actions #8

Updated by Luc Luc about 5 years 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

Actions #9

Updated by Holger Just over 3 years ago

  • Related to Defect #35225: Edit issue shows date in MM/DD/YYYY while the rest of the application shows YYYY/MM/DD added
Actions #10

Updated by Luc Luc over 3 years ago

While I commented a year ago on this issue I didn't noticed Marius' patch until today (upgraded to 4.2 and checked again the date-picker related issues).

Wow... Thank you so so much Marius!

Due to #23224 I had to constantly revert the (unfortunate - in my opinion) native date-pickers patch on each Redmine upgrade.

This flatpickr proposal is awesome.

I took the liberty to adjust your patch Marius so it includes the flatpickr assets (js and stylesheet) into Redmine installation. Hopefully I didn't break some policy with this approach.

Thank you again.

Actions

Also available in: Atom PDF