diff --git a/src/filter/ruleComponent.js b/src/filter/ruleComponent.js
index 3353a454ff58..b320932897ae 100644
--- a/src/filter/ruleComponent.js
+++ b/src/filter/ruleComponent.js
@@ -227,12 +227,12 @@ exports.RuleController_ = class {
      * @export
      */
     this.timeRangeMode = {
-      widget: /** @type {ngeox.TimePropertyWidgetEnum} */ ('datepicker'),
+      widget: 'datepicker',
       maxValue: this.createDate_(),
       minValue: this.createWeekAgoDate_(),
       maxDefValue: null,
       minDefValue: null,
-      mode: /** @type {ngeox.TimePropertyModeEnum} */ ('range'),
+      mode: 'range',
       interval: [0, 1, 0, 0]
     };
 
@@ -243,12 +243,12 @@ exports.RuleController_ = class {
      * @export
      */
     this.timeValueMode = {
-      widget: /** @type {ngeox.TimePropertyWidgetEnum} */ ('datepicker'),
+      widget: 'datepicker',
       maxValue: this.createDate_(),
       minValue: this.createDate_(),
       maxDefValue: null,
       minDefValue: null,
-      mode: /** @type {ngeox.TimePropertyModeEnum} */ ('value'),
+      mode: 'value',
       interval: [0, 1, 0, 0]
     };
 
diff --git a/src/filter/rulecomponent.html b/src/filter/rulecomponent.html
index 39de87f381a5..ac7b969499a5 100644
--- a/src/filter/rulecomponent.html
+++ b/src/filter/rulecomponent.html
@@ -26,7 +26,7 @@
           ng-switch-when="date|datetime"
           ng-switch-when-separator="|">
         <div ng-switch="$ctrl.clone.operator">
-          <div ng-switch-when="..">
+          <div ng-switch-when="..|time_during" ng-switch-when-separator="|">
             <ngeo-date-picker
                 time="$ctrl.timeRangeMode"
                 on-date-selected="$ctrl.onDateRangeSelected(time)">
@@ -237,7 +237,7 @@
         ng-switch-when="date|datetime"
         ng-switch-when-separator="|">
       <div ng-switch="$ctrl.rule.operator">
-        <div ng-switch-when="..">
+        <div ng-switch-when="..|time_during" ng-switch-when-separator="|">
           <span translate>From </span>
           <span>{{ $ctrl.timeToDate($ctrl.rule.lowerBoundary) }}</span>
           <span translate> to </span>
@@ -284,7 +284,7 @@
 
     <div ng-switch-default>
       <div ng-switch="$ctrl.rule.operator">
-        <div ng-switch-when="..">
+        <div ng-switch-when="..|time_during" ng-switch-when-separator="|">
           <span translate>Between </span>
           <span>{{ $ctrl.rule.lowerBoundary }}</span>
           <span translate> and </span>
diff --git a/src/misc/datepickerComponent.js b/src/misc/datepickerComponent.js
index 7f12139e1d8d..933558f11bed 100644
--- a/src/misc/datepickerComponent.js
+++ b/src/misc/datepickerComponent.js
@@ -7,6 +7,12 @@ import ngeoMiscTime from 'ngeo/misc/Time.js';
 import 'angular-ui-date';
 import 'jquery-ui/themes/base/all.css';
 
+// FIXME: import the locales in the applications
+import 'jquery-ui/ui/i18n/datepicker-fr.js';
+import 'jquery-ui/ui/i18n/datepicker-en-GB.js';
+import 'jquery-ui/ui/i18n/datepicker-de.js';
+import 'jquery-ui/ui/i18n/datepicker-it.js';
+
 
 /**
  * @type {!angular.Module}