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

Also available in: Atom PDF