Patch #19468

Replace jQuery UI Datepicker with native browser date fields when available

Added by Jan from Planio www.plan.io over 3 years ago. Updated almost 2 years ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Jean-Philippe Lang% Done:

0%

Category:UI
Target version:3.3.0

Description

Some browsers have started to implement the input type "date" and are rendering nice native date pickers.

Here's a patch that uses Rails' date_field instead of text_field. To still support browsers which are not implementing date fields, the jQuery UI Datepickers are still rendered when date fields are not available.

This is especially useful on mobile devices where the jQuery UI Datepickers do not seem to work well, at least not in combination with #19097 it seems.

Here's a nice list of browsers that support this feature: http://caniuse.com/#feat=input-datetime and here's a screenshot of what it looks like on Chrome for OS X:

native_datepicker.png (59.6 KB) Jan from Planio www.plan.io, 2015-03-24 17:31

0001-Use-HTML5-date-input-fields-instead-of-text-fields-w.patch Magnifier (10.2 KB) Jan from Planio www.plan.io, 2015-03-25 16:28

19468-for-r15361.diff Magnifier (9.17 KB) Go MAEDA, 2016-05-01 03:08


Related issues

Related to Redmine - Feature #19097: Responsive layout for mobile devices Closed
Related to Redmine - Feature #23892: Switch date pickers embedded in browsers or bundled in re... New
Duplicated by Redmine - Feature #13509: Better mobile support: input with date Closed

Associated revisions

Revision 15375
Added by Jean-Philippe Lang over 2 years ago

Use HTML5 date input fields instead of text fields with jquery ui date pickers (#19468).

Patch by Jan Schulz-Hofen.

History

#1 Updated by Jan from Planio www.plan.io over 3 years ago

  • Related to Feature #19097: Responsive layout for mobile devices added

#2 Updated by Jan from Planio www.plan.io over 3 years ago

Revising the patch in order to also change date fields in issue queries/filters

#3 Updated by Jan from Planio www.plan.io over 3 years ago

  • File deleted (0001-Use-HTML5-date-input-fields-instead-of-text-fields-w.patch)

#4 Updated by Go MAEDA over 3 years ago

I have tried the patch with Chrome (Mac).

It looks neat but ignores 'Start calendars on' setting.

#5 Updated by Go MAEDA over 3 years ago

  • Duplicated by Feature #13509: Better mobile support: input with date added

#6 Updated by Jan from Planio www.plan.io over 3 years ago

Go MAEDA wrote:

It looks neat but ignores 'Start calendars on' setting.

Yes, the same goes for the language. Since it's a browser widget, it follows the settings defined in the Operating System, not in Redmine. The HTML5 tag does not support supplying a "start calendar on" setting. So this is a limitation we would have to live with.

Redmine's "Start calendars on" setting is still useful for e.g. the Calendar view in projects, so we should keep it in any case.

#7 Updated by Go MAEDA over 2 years ago

I slightly modified Jan's patch for the latest trunk(r15361).

Although it ignores 'Start calendars on' setting, I think this is not a problem because it respects the settings defined in the operating system as Jan said.

Jan from Planio www.plan.io wrote:

This is especially useful on mobile devices where the jQuery UI Datepickers do not seem to work well, at least not in combination with #19097 it seems.

Absolutely. Redmine supports responsive layouts since 3.2.0. I suggest including this feature in Redmine 3.3.0.

#8 Updated by Jean-Philippe Lang over 2 years ago

  • Category set to UI
  • Status changed from New to Closed
  • Assignee set to Jean-Philippe Lang

Committed, thanks.

#9 Updated by Toshi MARUYAMA over 2 years ago

Jan from Planio www.plan.io wrote:

Go MAEDA wrote:

It looks neat but ignores 'Start calendars on' setting.

Yes, the same goes for the language. Since it's a browser widget, it follows the settings defined in the Operating System, not in Redmine. The HTML5 tag does not support supplying a "start calendar on" setting. So this is a limitation we would have to live with.

Redmine's "Start calendars on" setting is still useful for e.g. the Calendar view in projects, so we should keep it in any case.

Ref: #23224.

#10 Updated by Luc Luc about 2 years ago

Native date picker breaks Redmine Settings, see #23224.

Thanks,
Luc

#11 Updated by Toshi MARUYAMA about 2 years ago

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

#12 Updated by Kush Suryavanshi almost 2 years ago

Sorry, if this a stupid question - but, if we apply this patch, will we be able to use the "time" functionality that's mentioned in #5458? It seems that we need to use JQuery input for #5458 but this patch will give preference to native pickers. Thanks for the help.

#13 Updated by Jan from Planio www.plan.io almost 2 years ago

Kush Suryavanshi wrote:

Sorry, if this a stupid question - but, if we apply this patch, will we be able to use the "time" functionality that's mentioned in #5458? It seems that we need to use JQuery input for #5458 but this patch will give preference to native pickers. Thanks for the help.

#5458 has not been committed to Redmine yet. There are native time pickers as well using <input type="time"> which can be used for #5458 if implemented.

#14 Updated by Kush Suryavanshi almost 2 years ago

Thanks much Jan. Appreciate your prompt input.

Also available in: Atom PDF