diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index d7624493fdc..124279bc0a0 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -904,7 +904,14 @@ label.error {
     position: absolute;
     cursor: pointer;
     right: 5px;
-    top: 5px;
+    top: 3px;
+}
+.openerp .oe_datepicker {
+    position: relative;
+    display: inline-block;
+}
+.openerp .oe_datepicker input[type="text"] {
+    min-width: 160px;
 }
 .openerp .oe_input_icon_disabled {
     position: absolute;
diff --git a/addons/web/static/src/js/core.js b/addons/web/static/src/js/core.js
index e26e01e5b29..076e91b269c 100644
--- a/addons/web/static/src/js/core.js
+++ b/addons/web/static/src/js/core.js
@@ -774,7 +774,6 @@ openerp.web.SessionAware = openerp.web.CallbackEnabled.extend(/** @lends openerp
  *         // stuff that you want to init before the rendering
  *     },
  *     start: function() {
- *         this._super();
  *         // stuff you want to make after the rendering, `this.$element` holds a correct value
  *         this.$element.find(".my_button").click(/* an example of event binding * /);
  *
@@ -918,6 +917,8 @@ openerp.web.Widget = openerp.web.SessionAware.extend(/** @lends openerp.web.Widg
      * @returns {jQuery.Deferred}
      */
     start: function() {
+        /* The default implementation is only useful for retro-compatibility, it is
+        not necessary to call it using _super() when using Widget for new components. */
         if (!this.$element) {
             var tmp = document.getElementById(this.element_id);
             this.$element = tmp ? $(tmp) : undefined;
@@ -925,7 +926,7 @@ openerp.web.Widget = openerp.web.SessionAware.extend(/** @lends openerp.web.Widg
         return $.Deferred().done().promise();
     },
     /**
-     * Destroys the current widget, also destory all its children before destroying itself.
+     * Destroys the current widget, also destroy all its children before destroying itself.
      */
     stop: function() {
         _.each(_.clone(this.widget_children), function(el) {
diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index 94143d4bbfa..db91d6bfd27 100644
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -795,20 +795,18 @@ openerp.web.search.BooleanField = openerp.web.search.SelectionField.extend(/** @
  * @extends openerp.web.search.DateField
  */
 openerp.web.search.DateField = openerp.web.search.Field.extend(/** @lends openerp.web.search.DateField# */{
-    /**
-     * enables date picker on the HTML widgets
-     */
+    template: "SearchView.date",
     start: function () {
         this._super();
-        this.$element.addClass('field_date').datepicker({
-            dateFormat: 'yy-mm-dd'
-        });
-    },
-    stop: function () {
-        this.$element.datepicker('destroy');
+        this.datewidget = new openerp.web.DateWidget(this);
+        this.datewidget.prependTo(this.$element);
+        this.datewidget.$element.find("input").attr("size", 15);
+        this.datewidget.$element.find("input").attr("autofocus",
+            this.attrs.default_focus === '1' ? 'autofocus' : undefined);
+        this.datewidget.set_value(this.defaults[this.attrs.name] || false);
     },
     get_value: function () {
-        return this.$element.val();
+        return this.datewidget.get_value() || null;
     }
 });
 /**
@@ -1123,7 +1121,7 @@ openerp.web.search.ExtendedSearchProposition.Char = openerp.web.OldWidget.extend
     }
 });
 openerp.web.search.ExtendedSearchProposition.DateTime = openerp.web.OldWidget.extend({
-    template: 'SearchView.extended_search.proposition.datetime',
+    template: 'SearchView.extended_search.proposition.empty',
     identifier_prefix: 'extended-search-proposition-datetime',
     operators: [
         {value: "=", text: "is equal to"},
@@ -1134,18 +1132,16 @@ openerp.web.search.ExtendedSearchProposition.DateTime = openerp.web.OldWidget.ex
         {value: "<=", text: "less or equal than"}
     ],
     get_value: function() {
-        return this.$element.val();
+        return this.datewidget.get_value();
     },
     start: function() {
         this._super();
-        this.$element.datetimepicker({
-            dateFormat: 'yy-mm-dd',
-            timeFormat: 'hh:mm:ss'
-        });
+        this.datewidget = new openerp.web.DateTimeWidget(this);
+        this.datewidget.prependTo(this.$element);
     }
 });
 openerp.web.search.ExtendedSearchProposition.Date = openerp.web.OldWidget.extend({
-    template: 'SearchView.extended_search.proposition.date',
+    template: 'SearchView.extended_search.proposition.empty',
     identifier_prefix: 'extended-search-proposition-date',
     operators: [
         {value: "=", text: "is equal to"},
@@ -1156,14 +1152,12 @@ openerp.web.search.ExtendedSearchProposition.Date = openerp.web.OldWidget.extend
         {value: "<=", text: "less or equal than"}
     ],
     get_value: function() {
-        return this.$element.val();
+        return this.datewidget.get_value();
     },
     start: function() {
         this._super();
-        this.$element.datepicker({
-            dateFormat: 'yy-mm-dd',
-            timeFormat: 'hh:mm:ss'
-        });
+        this.datewidget = new openerp.web.DateWidget(this);
+        this.datewidget.prependTo(this.$element);
     }
 });
 openerp.web.search.ExtendedSearchProposition.Integer = openerp.web.OldWidget.extend({
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 31779648f3b..6d224a46109 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -1121,16 +1121,13 @@ openerp.web.form.FieldFloat = openerp.web.form.FieldChar.extend({
     }
 });
 
-openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.template = "FieldDate";
-        this.jqueryui_object = 'datetimepicker';
-    },
+openerp.web.DateTimeWidget = openerp.web.Widget.extend({
+    template: "web.datetimepicker",
+    jqueryui_object: 'datetimepicker',
+    type_of_date: "datetime",
     start: function() {
         var self = this;
-        this._super.apply(this, arguments);
-        this.$element.find('input').change(this.on_ui_change);
+        this.$element.find('input').change(this.on_change);
         this.picker({
             onSelect: this.on_picker_select,
             changeMonth: true,
@@ -1148,6 +1145,7 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
         this.$element.find('button.oe_datepicker_close').click(function() {
             self.$element.find('.oe_datepicker').hide();
         });
+        this.set_readonly(false);
     },
     picker: function() {
         return $.fn[this.jqueryui_object].apply(this.$element.find('.oe_datepicker_container'), arguments);
@@ -1158,7 +1156,7 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
     },
     set_value: function(value) {
         value = this.parse(value);
-        this._super(value);
+        this.value = value;
         this.$element.find('input').val(value ? this.format_client(value) : '');
     },
     get_value: function() {
@@ -1167,24 +1165,22 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
     set_value_from_ui: function() {
         var value = this.$element.find('input').val() || false;
         this.value = this.parse_client(value);
-        this._super();
     },
-    update_dom: function() {
-        this._super.apply(this, arguments);
+    set_readonly: function(readonly) {
+        this.readonly = readonly;
         this.$element.find('input').attr('disabled', this.readonly);
-        this.$element.find('img.oe_datepicker_trigger').toggleClass('oe_input_icon_disabled', this.readonly);
+        this.$element.find('img.oe_datepicker_trigger').toggleClass('oe_input_icon_disabled', readonly);
     },
-    validate: function() {
-        this.invalid = false;
+    is_valid: function(required) {
         var value = this.$element.find('input').val();
         if (value === "") {
-            this.invalid = this.required;
+            return !required;
         } else {
             try {
                 this.parse_client(value);
-                this.invalid = false;
+                return true;
             } catch(e) {
-                this.invalid = true;
+                return false;
             }
         }
     },
@@ -1193,24 +1189,64 @@ openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
     },
     parse: openerp.web.auto_str_to_date,
     parse_client: function(v) {
-        return openerp.web.parse_value(v, this.field);
+        return openerp.web.parse_value(v, {"widget": this.type_of_date});
     },
     format: function(val) {
-        return openerp.web.auto_date_to_str(val, this.field.type);
+        return openerp.web.auto_date_to_str(val, this.type_of_date);
     },
     format_client: function(v) {
-        return openerp.web.format_value(v, this.field);
+        return openerp.web.format_value(v, {"widget": this.type_of_date});
+    },
+    on_change: function() {
+        if (this.is_valid()) {
+            this.set_value_from_ui();
+        }
+    }
+});
+
+openerp.web.DateWidget = openerp.web.DateTimeWidget.extend({
+    jqueryui_object: 'datepicker',
+    type_of_date: "date",
+    on_picker_select: function(text, instance) {
+        this._super(text, instance);
+        this.$element.find('.oe_datepicker').hide();
+    }
+});
+
+openerp.web.form.FieldDatetime = openerp.web.form.Field.extend({
+    template: "EmptyComponent",
+    build_widget: function() {
+        return new openerp.web.DateTimeWidget(this);
+    },
+    start: function() {
+        var self = this;
+        this._super.apply(this, arguments);
+        this.datewidget = this.build_widget();
+        this.datewidget.on_change.add(this.on_ui_change);
+        this.datewidget.appendTo(this.$element);
+    },
+    set_value: function(value) {
+        this._super(value);
+        this.datewidget.set_value(value);
+    },
+    get_value: function() {
+        return this.datewidget.get_value();
+    },
+    update_dom: function() {
+        this._super.apply(this, arguments);
+        this.datewidget.set_readonly(this.readonly);
+    },
+    validate: function() {
+        this.invalid = !this.datewidget.is_valid(this.required);
+    },
+    focus: function() {
+        this.datewidget.focus();
     }
 });
 
 openerp.web.form.FieldDate = openerp.web.form.FieldDatetime.extend({
-    init: function(view, node) {
-        this._super(view, node);
-        this.jqueryui_object = 'datepicker';
-    },
-    on_picker_select: function(text, instance) {
-        this._super(text, instance);
-        this.$element.find('.oe_datepicker').hide();
+    build_widget: function() {
+        return new openerp.web.DateWidget(this);
     }
 });
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 3870ef43b67..3e75628b12b 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -800,13 +800,15 @@
     ></textarea>
     <img class="oe_field_translate" t-if="widget.field.translate" src="/web/static/src/img/icons/terp-translate.png" width="16" height="16" border="0"/>
 </t>
-<t t-name="FieldDate">
-    <t t-call="FieldChar"/>
-    <img class="oe_input_icon oe_datepicker_trigger" src="/web/static/src/img/ui/field_calendar.png"
-         title="Select date" width="16" height="16" border="0"/>
-    <div class="oe_datepicker ui-widget-content ui-corner-all" style="display: none; position: absolute; z-index: 1;">
-        <div class="oe_datepicker_container"/>
-        <button type="button" class="oe_datepicker_close ui-state-default ui-priority-primary ui-corner-all" style="float: right;">Done</button>
+<t t-name="web.datetimepicker">
+    <div class="oe_datepicker">
+        <input type="text" size="1" style="width: 100%"/>
+        <img class="oe_input_icon oe_datepicker_trigger" src="/web/static/src/img/ui/field_calendar.png"
+             title="Select date" width="16" height="16" border="0"/>
+        <div class="oe_datepicker ui-widget-content ui-corner-all" style="display: none; position: absolute; z-index: 1;">
+            <div class="oe_datepicker_container"/>
+            <button type="button" class="oe_datepicker_close ui-state-default ui-priority-primary ui-corner-all" style="float: right;">Done</button>
+        </div>
     </div>
 </t>
 <t t-name="FieldSelection">
@@ -1051,6 +1053,18 @@
         <t t-if="filters.length" t-raw="filters.render(defaults)"/>
     </div>
 </t>
+<t t-name="SearchView.date">
+    <label t-att-class="'oe_label' + (attrs.help ? '_help' : '')"
+           t-att-title="attrs.help"
+           t-att-for="element_id">
+        <t t-esc="attrs.string || attrs.name"/>
+        <span t-if="attrs.help">?</span>
+    </label>
+    <div style="white-space: nowrap;">
+        <span t-att-id="element_id"></span>
+        <t t-if="filters.length" t-raw="filters.render(defaults)"/>
+    </div>
+</t>
 <t t-name="SearchView.field.selection">
     <label t-att-title="attrs.help"
            t-att-class="'oe_label' + (attrs.help ? '_help' : '')"
@@ -1142,11 +1156,8 @@
 <t t-name="SearchView.extended_search.proposition.char">
     <input t-att-id="element_id" class="field_char"/>
 </t>
-<t t-name="SearchView.extended_search.proposition.datetime">
-    <input t-att-id="element_id" class="field_datetime"/>
-</t>
-<t t-name="SearchView.extended_search.proposition.date">
-    <input t-att-id="element_id" class="field_date"/>
+<t t-name="SearchView.extended_search.proposition.empty">
+    <span t-att-id="element_id"></span>
 </t>
 <t t-name="SearchView.extended_search.proposition.integer">
     <input type="number" t-att-id="element_id" class="field_integer" step="1"/>