redmine.tokyo » Unofficial Redmine Cooking

■現象/要望¶

ChromeでもIEやFireFoxと同じようにカレンダー設定画面を表示させたい。（Redmine/プラグイン側で定義した休日設定などを反映したい。）

---

RedmineのView Customize pluginでカレンダーに祝日表示
http://qiita.com/kn5/items/4f0d5f2b86527f5f3a1d

こちらのサイトを参考にView Customize pluginを使用して、redmineのカレンダーに祝日を表示できるようになったのですが、
チケット作成の時に、開始日と期日を設定するときのポップアップカレンダーを表示させようとしたのですが、
IEとFireFoxでは祝日が表示されるポップアップカレンダーが表示されたのですが、Chromeではデフォルトのポップアップカレンダーのままでした。

調査したところ、
https://stackoverflow.com/questions/10932341/jquery-date-picker-not-working-on-chrome
上記のサイトに症状が似ていると思い、
開始日と期日のフィールドタイプをdate.fieldからtext.fieldに変更してみたのですが、
テキストフィールドに変わっただけでカレンダが表示されなくなってしまいました。
(app/view/issues/_attributes.html.ebの55行目と62行目を修正)

ChromeでもIEやFireFoxと同じように表示させたいのですがどのように修正をおこなえばよろしいでしょうか。

■解決策¶

ブラウザ内のDatePickerではなく、jQuery UI Datepickerを利用すれば良い。下記1,2のいずれか実施。
（Redmine3.3の修正を3.2以前の動作に戻す。スマホ等で使いにくくなる場合有）

なお、この修正は、 Chrome76にて発生したDatePickerが表示されない障害の対策としても有効。（この障害は、7/Eに配信開始され、8/7配信の76.0.3809.100にて修正された）

1.Viewcusyomizeに下記定義追加¶

(function ( $ ) {
  $.fn.datepickerFallback = function( options ) {
     return this.datepicker( options );
  };
}( jQuery ));

2. Redmineのソース変更¶

https://twitter.com/g_maeda/status/831012799081877505

public/javascripts/application.js の741行目で nativeDateInputSupported に false をセットする

■対応状況¶

Redmine本体のソース変更 or Viewcustomizeで対処可能

■補足¶

上記設定の副作用として、
スマホなどの画面が小さい場合もjQueryUIのカレンダーが表示される。（Redmine3.2以前と同じ）

Redmine3.3にて、モバイルデバイスの対応改善を考慮し、ブラウザ内のDatePickerがあれば、そちらを利用するように変更された。

Replace jQuery UI Datepicker with native browser date fields when available
http://www.redmine.org/issues/19468

Some browsers have started to implement the input type "date" and are rendering nice native date pickers.
This is especially useful on mobile devices where the jQuery UI Datepickers do not seem to work well,

理想を言えば、UI Agentレベルの動作変更を、各サイトレベルで実施可能とすることになる。
（viewcustomizeのスクリプトベース、デフォルトに各現場で詳細調整可能）