diff --git a/Gemfile b/Gemfile
index bf657d345..5352a8052 100644
--- a/Gemfile
+++ b/Gemfile
@@ -15,6 +15,7 @@ gem 'coffee-rails', '~> 4.1.0'
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
+gem 'jquery-ui-rails'
 # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
 gem 'turbolinks'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index fafb13808..b5f4e866d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -203,6 +203,8 @@ GEM
       rails-dom-testing (~> 1.0)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (5.0.5)
+      railties (>= 3.2.16)
     json (1.8.3)
     jwt (1.5.2)
     kaminari (0.16.3)
@@ -475,6 +477,7 @@ DEPENDENCIES
   i18n-tasks
   initialjs-rails (= 0.2.0.1)
   jquery-rails
+  jquery-ui-rails
   kaminari
   launchy
   letter_opener_web (~> 1.3.0)
diff --git a/app/assets/javascripts/advanced_search.js.coffee b/app/assets/javascripts/advanced_search.js.coffee
index 8bff7f996..a5e657633 100644
--- a/app/assets/javascripts/advanced_search.js.coffee
+++ b/app/assets/javascripts/advanced_search.js.coffee
@@ -10,12 +10,23 @@ App.AdvancedSearch =
   toggle_date_options: ->
     if $('#js-advanced-search-date-min').val() == 'custom'
       $('#js-custom-date').show()
-      $('#js-custom-date input').prop 'disabled', false
+      $( ".js-calendar" ).datepicker( "option", "disabled", false )
     else
       $('#js-custom-date').hide()
-      $('#js-custom-date input').prop 'disabled', true
+      $( ".js-calendar" ).datepicker( "option", "disabled", true )
+
+  init_calendar: ->
+    locale = $('#js-locale').data('current-locale')
+    if locale == 'en'
+      locale = ''
+
+    $('.js-calendar').datepicker
+      regional: locale
+      maxDate:  "+0d"
 
   initialize: ->
+    App.AdvancedSearch.init_calendar()
+
     if App.AdvancedSearch.advanced_search_terms()
       $('#js-advanced-search').show()
       App.AdvancedSearch.toggle_date_options()
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 24f164bb2..52d176c41 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,6 +12,8 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require jquery-ui/datepicker
+//= require jquery-ui/datepicker-es
 //= require foundation
 //= require turbolinks
 //= require ckeditor/init
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 0dedc20b6..822e4cd4c 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -9,4 +9,6 @@
 @import "participation";
 @import "c3";
 @import "annotator.min";
-@import "annotator_overrides";
\ No newline at end of file
+@import "annotator_overrides";
+@import "jquery-ui/datepicker";
+@import "datepicker_overrides";
\ No newline at end of file
diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss
new file mode 100644
index 000000000..abab720e0
--- /dev/null
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -0,0 +1,94 @@
+// Overrides styles of jquery-ui/datepicker
+//
+
+.ui-datepicker-header {
+  background: $brand;
+  color: white;
+  font-weight: bold;
+}
+
+.ui-datepicker-calendar {
+
+  .ui-state-default {
+    background: $highlight;
+    color: $text;
+  }
+
+  .ui-state-hover, .ui-state-active {
+    background: $brand;
+    color: white;
+  }
+}
+
+.ui-datepicker {
+  padding: 0;
+  z-index: 4 !important;
+
+  .ui-datepicker-prev {
+    left: 12px;
+  }
+
+  .ui-datepicker-next {
+    right: 12px;
+  }
+
+  .ui-datepicker-prev, .ui-datepicker-next {
+    color: white;
+    cursor: pointer;
+    font-weight: normal;
+    font-size: $small-font-size;
+    line-height: $line-height;
+    top: 0;
+  }
+
+  table {
+    border: 1px solid $border;
+    border-top: 0;
+
+    thead {
+      background: $dark;
+      border-left: 1px solid $dark;
+      border-right: 1px solid $dark;
+
+      tr th {
+        color: white;
+      }
+    }
+
+    tr {
+      border-bottom: 1px solid $border;
+
+      &:last-child {
+        border-bottom: 0px;
+      }
+
+      &:nth-child(odd) {
+        background: none;
+      }
+    }
+
+    td {
+      padding: 0;
+      border-right: 1px solid $border;
+
+      &:last-child {
+        border-right: 0px;
+      }
+
+      span, a {
+        text-align: center;
+        line-height: $line-height;
+        color: $text;
+      }
+
+      &.ui-datepicker-unselectable.ui-state-disabled {
+        background: white;
+
+        .ui-state-default {
+          background: $input-bg;
+          color: $text-medium;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 749c009b0..26aeebfcc 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -482,6 +482,7 @@ header {
 
   @media (min-width: $small-breakpoint) {
     background: white;
+    min-height: rem-calc(50);
   }
 
   a {
diff --git a/app/views/shared/_advanced_search.html.erb b/app/views/shared/_advanced_search.html.erb
index 2f0233b53..03c1a4319 100644
--- a/app/views/shared/_advanced_search.html.erb
+++ b/app/views/shared/_advanced_search.html.erb
@@ -27,13 +27,17 @@
         <div id='js-custom-date' class='small-12 large-8 column' style="display: none">
           <div class='small-12 large-6 column'>
             <label><%= t("shared.advanced_search.from") %></label>
-            <%= date_field 'advanced_search', 'date_min', max: Date.today,
-                           value: params[:advanced_search].try(:[], :date_min) %>
+            <%= text_field_tag 'advanced_search[date_min]',
+                                params[:advanced_search].try(:[], :date_min),
+                                placeholder: t("shared.advanced_search.date_placeholder"),
+                                class: 'js-calendar' %>
           </div>
           <div class='small-12 large-6 column'>
             <label><%= t("shared.advanced_search.to") %></label>
-            <%= date_field 'advanced_search', 'date_max', max: Date.today,
-                           value: params[:advanced_search].try(:[], :date_max) %>
+            <%= text_field_tag 'advanced_search[date_max]',
+                                params[:advanced_search].try(:[], :date_max),
+                                placeholder: t("shared.advanced_search.date_placeholder"),
+                                class: 'js-calendar' %>
           </div>
         </div>
       </div>
@@ -44,4 +48,4 @@
 
     </div>
   <% end %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/shared/_locale_switcher.html.erb b/app/views/shared/_locale_switcher.html.erb
index c5c69bbe4..e0a550667 100644
--- a/app/views/shared/_locale_switcher.html.erb
+++ b/app/views/shared/_locale_switcher.html.erb
@@ -1,5 +1,5 @@
 <% if I18n.available_locales.size > 1 %>
-  <div class="locale">
+  <div class="locale" id="js-locale" data-current-local="<%= I18n.locale %>">
     <span class="inline-block">
       <%= t("layouts.header.locale") %>
     </span>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index f29d4e781..c3f035fc8 100755
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -336,6 +336,7 @@ en:
       author_type_4: 'City councillor'
       author_type_5: 'Mayoress'
       date: 'By date'
+      date_placeholder: 'DD/MM/YYYY'
       date_range_blank: 'Choose a date'
       date_1: 'Last 24 hours'
       date_2: 'Last week'
diff --git a/config/locales/es.yml b/config/locales/es.yml
index 4c5a3b675..87cabe85d 100644
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -336,6 +336,7 @@ es:
       author_type_4: 'Concejal'
       author_type_5: 'Alcaldesa'
       date: 'Por fecha'
+      date_placeholder: 'DD/MM/AAAA'
       date_range_blank: 'Elige una fecha'
       date_1: 'Últimas 24 horas'
       date_2: 'Última semana'