diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 3712b8a..00e0130 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1385,7 +1385,7 @@ module ApplicationHelper
 
   def calendar_for(field_id)
     include_calendar_headers_tags
-    javascript_tag("$(function() { $('##{field_id}').addClass('date').datepickerFallback(datepickerOptions); });")
+    javascript_tag("$(function() { $('##{field_id}').addClass('date').datepicker(datepickerOptions); });")
   end
 
   def include_calendar_headers_tags
@@ -1395,16 +1395,10 @@ module ApplicationHelper
       content_for :header_tags do
         start_of_week = Setting.start_of_week
         start_of_week = l(:general_first_day_of_week, :default => '1') if start_of_week.blank?
-        # Redmine uses 1..7 (monday..sunday) in settings and locales
-        # JQuery uses 0..6 (sunday..saturday), 7 needs to be changed to 0
-        start_of_week = start_of_week.to_i % 7
         tags << javascript_tag(
-                   "var datepickerOptions={dateFormat: 'yy-mm-dd', firstDay: #{start_of_week}, " +
-                     "showOn: 'button', buttonImageOnly: true, buttonImage: '" +
-                     path_to_image('/images/calendar.png') +
-                     "', showButtonPanel: true, showWeek: true, showOtherMonths: true, " +
-                     "selectOtherMonths: true, changeMonth: true, changeYear: true, " +
-                     "beforeShow: beforeShowDatePicker};")
+                   "var datepickerOptions={dateFormat: 'Y-m-d', " +
+                   "'locale' : {'firstDayOfWeek' : #{start_of_week}}, " +
+                   "beforeShow: beforeShowDatePicker};")
         jquery_locale = l('jquery.locale', :default => current_language.to_s)
         unless jquery_locale == 'en'
           tags << javascript_include_tag("i18n/datepicker-#{jquery_locale}.js")
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 5c8be88..b40ac2c 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -9,9 +9,11 @@
 <meta name="keywords" content="issue,bug,tracker" />
 <%= csrf_meta_tag %>
 <%= favicon %>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 <%= stylesheet_link_tag 'jquery/jquery-ui-1.11.0', 'application', 'responsive', :media => 'all' %>
 <%= stylesheet_link_tag 'rtl', :media => 'all' if l(:direction) == 'rtl' %>
 <%= javascript_heads %>
+<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 <%= heads_for_theme %>
 <%= call_hook :view_layouts_base_html_head %>
 <!-- page specific tags -->
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
index cb4d42a..4be9d8d 100644
--- a/public/javascripts/application.js
+++ b/public/javascripts/application.js
@@ -213,8 +213,8 @@ function buildFilterRow(field, operator, values) {
       ' <span style="display:none;"><input type="date" name="v['+field+'][]" id="values_'+fieldId+'_2" size="10" class="value date_value" /></span>' +
       ' <span style="display:none;"><input type="text" name="v['+field+'][]" id="values_'+fieldId+'" size="3" class="value" /> '+labelDayPlural+'</span>'
     );
-    $('#values_'+fieldId+'_1').val(values[0]).datepickerFallback(datepickerOptions);
-    $('#values_'+fieldId+'_2').val(values[1]).datepickerFallback(datepickerOptions);
+    $('#values_'+fieldId+'_1').val(values[0]).datepicker(datepickerOptions);
+    $('#values_'+fieldId+'_2').val(values[1]).datepicker(datepickerOptions);
     $('#values_'+fieldId).val(values[0]);
     break;
   case "string":
@@ -678,7 +678,7 @@ function beforeShowDatePicker(input, inst) {
       }
       break;
   }
-  $(input).datepickerFallback("option", "defaultDate", default_date);
+  $(input).datepicker("option", "defaultDate", default_date);
 }
 
 (function($){
@@ -838,28 +838,8 @@ function toggleNewObjectDropdown() {
 }
 
 (function ( $ ) {
-
-  // detect if native date input is supported
-  var nativeDateInputSupported = true;
-
-  var input = document.createElement('input');
-  input.setAttribute('type','date');
-  if (input.type === 'text') {
-    nativeDateInputSupported = false;
-  }
-
-  var notADateValue = 'not-a-date';
-  input.setAttribute('value', notADateValue);
-  if (input.value === notADateValue) {
-    nativeDateInputSupported = false;
-  }
-
-  $.fn.datepickerFallback = function( options ) {
-    if (nativeDateInputSupported) {
-      return this;
-    } else {
-      return this.datepicker( options );
-    }
+  $.fn.datepicker = function( options ) {
+      return this.flatpickr( options );
   };
 }( jQuery ));
 
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index dbafe14..ad1aa3a 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -1504,6 +1504,64 @@ img.filecontent.image {background-image: url(../images/transparent.png);}
 .ui-menu .ui-menu-item:hover {font-weight:normal; color:#555; background:#759FCF; color:#fff !important; border:1px solid #759FCF;}
 .ui-menu .ui-menu-item.ui-state-focus {font-weight:normal; color:#555; border-color:#759FCF;}
 
+/* Custom flatpickr styles */
+
+/* Colors */
+.flatpickr-months .flatpickr-month,
+.flatpickr-weekdays, span.flatpickr-weekday,
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #628DB6;
+  color: #fff;
+}
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  fill: #fff;
+}
+
+/* Font sizes */
+.flatpickr-day, span.flatpickr-weekday {
+  font-size: 0.8em;
+}
+.flatpickr-current-month {
+  font-size: 1em;
+}
+
+/* Calendar size */
+/*pixel square for each day - default is 39 */
+.flatpickr-calendar {
+  width: 224px;
+}
+.dayContainer {
+  width: 224px;
+  min-width: 224px;
+  max-width: 224px;
+}
+.flatpickr-days {
+  width: 224px;
+}
+.flatpickr-day {
+  max-width: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+
 /************* Rouge styles *************/
 /* generated by: pygmentize -f html -a .syntaxhl -S colorful */
 .syntaxhl .hll { background-color: #ffffcc }