Start with supplier foundation style

app/assets/javascripts/translations.js.coffee.erb

@@ -56,10 +56,11 @@
 
 @setTranslations = (selector) ->
   #list = $("#top-navigation-list")
+  locale = Qstorage.getItem('locale') || 'en'
   selector = $( selector || document)
   selector.find(".locale-select").show()
-  selector.find(".locale-select-" + $locale).hide()
-  moment.lang $locale
+  selector.find(".locale-select-" + locale).hide()
+  moment.lang locale
   if selector
     selector.find("[data-t]").each ->
       $(this).html t($(this).data("t"), $(this).data("tAttributes"))
@@ -74,8 +75,32 @@
     $("*[data-time]").each ->
       $(this).text moment($(this).data("time")).format($(this).data("timeFormat") or "dd D MMM HH:MM")
 
-  $(".datepicker").datepicker "option", $.datepicker.regional[$locale]
+  $(".datepicker").datepicker "option", $.datepicker.regional[locale] if $.fn.datepicker
+  if $.fn.pickadate
+    datepicker_object = $('.datepicker')
+    datepicker_object.pickadate('stop') if datepicker_object.data('pickadate')
+    $.extend( $.fn.pickadate.defaults, $pickadate_translations[locale] )
+    $('.pickadate-display').remove()
+    window.pickadate_options ||= {}
+    datepicker_object.pickadate(window.pickadate_options)
+    datepicker_object.change()
 
+
+@setupTranslations = (options = {})->
+  locale = options.locale || Qstorage.getItem('locale') || 'en'
+  if $.fn.pickadate
+    $('.datepicker').change ->
+      input = $(@)
+      input.next().remove() if input.next().hasClass('pickadate-display')
+      display_format = $pickadate_translations[$locale].displayFormat
+      display_date = input.data('pickadate').get('select', display_format)
+      display_date = ' '+display_date # add space between the icon and the date
+      display_tag = $('<span></span>').addClass('pickadate-display').append('<span class="fa fa-calendar fa-lg"></span>').append($('<span></span>').text(display_date))
+      #display_tag.click (e)->(e.preventDefault();input.click().focus();false )
+      display_tag.click (e)->(e.preventDefault();input.pickadate('open');false )
+      $(@).after(display_tag)
+  setLocale(locale)
+  $('.datepicker').change().hide()
 $transformation_mappings =
   downcase: "toLowerCase"
   upcase: "toUpperCase"