diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 1bf91306..ceda0d8a 100755
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -40,7 +40,7 @@
 $(document).on('turbolinks:load', function() {
     
     $('.datetimepicker').bootstrapMaterialDatePicker({
-        format: 'DD-MM YYYY - HH:mm',
+        format: 'DD-MM-YYYY - HH:mm',
         clearButton: true,
         weekStart: 1
     });
diff --git a/app/views/settings/promotions/_form.html.erb b/app/views/settings/promotions/_form.html.erb
index e68cb665..1c528682 100755
--- a/app/views/settings/promotions/_form.html.erb
+++ b/app/views/settings/promotions/_form.html.erb
@@ -27,7 +27,7 @@
               <% if !@promotion.promo_start_date.nil?%>
                 <input type="text" name="promotion[promo_start_date]" value="<%= @promotion.promo_start_date.strftime('%A, %d-%m-%Y') %>" class="datepicker form-control" placeholder="Start Date...">
               <% else %>
-                 <input type="text" name="promotion[promo_start_date]" class="datepicker form-control" placeholder="Start Date...">
+                 <input type="date" name="promotion[promo_start_date]" class="datepicker form-control" placeholder="Start Date...">
               <% end %>
             </div>
           </div>
@@ -38,9 +38,9 @@
                 <i class="material-icons">date_range</i>
               </span>
               <% if !@promotion.promo_end_date.nil?%>
-                <input type="text" name="promotion[promo_end_date]" value="<%= @promotion.promo_end_date.strftime('%A, %d-%m-%Y') %>" class="datepicker form-control" placeholder="Start Date...">
+                <input type="date" name="promotion[promo_end_date]" value="<%= @promotion.promo_end_date.strftime('%A, %d-%m-%Y') %>" class="datepicker form-control" placeholder="Start Date...">
               <% else %>
-                 <input type="text" name="promotion[promo_end_date]" class="datepicker form-control" placeholder="End Date...">
+                 <input type="date" name="promotion[promo_end_date]" class="datepicker form-control" placeholder="End Date...">
               <% end %>
             </div>
           </div>
@@ -54,9 +54,9 @@
                 <i class="material-icons">access_time</i>
               </span>
                 <% if !@promotion.promo_start_hour.nil?%>
-                  <input type="text" name="promotion[promo_start_hour]" value="<%= @promotion.promo_start_hour.utc.strftime('%H:%M') %>" class="timepicker form-control" placeholder="Start Time...">
+                  <input type="date" name="promotion[promo_start_hour]" value="<%= @promotion.promo_start_hour.utc.strftime('%H:%M') %>" class="timepicker form-control" placeholder="Start Time...">
                 <% else %>
-                   <input type="text" name="promotion[promo_start_hour]" class="timepicker form-control" placeholder="Start Time...">
+                   <input type="date" name="promotion[promo_start_hour]" class="timepicker form-control" placeholder="Start Time...">
                 <% end %>
             </div>         
           </div>