Added support of form-control--small for date and datetime.

app/assets/javascripts/app/controllers/_ui_element/date.coffee

@@ -87,10 +87,13 @@ class App.UiElement.date
   @validation: (item, attribute, runtime) ->
 
     # remove old validation
-    item.closest('.form-group').removeClass('has-error')
-    item.find('.has-error').removeClass('has-error')
-    item.find('.help-inline').html('')
-    item.closest('.form-group').find('.help-inline').html('')
+    if attribute.validationContainer is 'self'
+      item.find('.js-datepicker').removeClass('has-error')
+    else
+      item.closest('.form-group').removeClass('has-error')
+      item.find('.has-error').removeClass('has-error')
+      item.find('.help-inline').html('')
+      item.closest('.form-group').find('.help-inline').html('')
 
     timestamp = item.find("[name=\"#{attribute.name}\"]").val()
 
@@ -103,10 +106,13 @@ class App.UiElement.date
       timeObject = new Date( Date.parse( timestamp ) )
 
 
-    formGroup = item.closest('.form-group')
     App.Log.debug 'UiElement.date.validation', errors
     return if _.isEmpty(errors)
 
     # show invalid options
-    for key, value of errors
-      formGroup.addClass('has-error')
+    if attribute.validationContainer is 'self'
+      item.find('.js-datepicker').addClass('has-error')
+    else
+      formGroup = item.closest('.form-group')
+      for key, value of errors
+        formGroup.addClass('has-error')

app/assets/javascripts/app/controllers/_ui_element/datetime.coffee

@@ -99,10 +99,13 @@ class App.UiElement.datetime
   @validation: (item, attribute, runtime) ->
 
     # remove old validation
-    item.closest('.form-group').removeClass('has-error')
-    item.find('.has-error').removeClass('has-error')
-    item.find('.help-inline').html('')
-    item.closest('.form-group').find('.help-inline').html('')
+    if attribute.validationContainer is 'self'
+      item.find('.js-datepicker').removeClass('has-error')
+    else
+      item.closest('.form-group').removeClass('has-error')
+      item.find('.has-error').removeClass('has-error')
+      item.find('.help-inline').html('')
+      item.closest('.form-group').find('.help-inline').html('')
 
     timestamp = item.find("[name=\"#{attribute.name}\"]").val()
 
@@ -114,11 +117,15 @@ class App.UiElement.datetime
     else
       timeObject = new Date( Date.parse( timestamp ) )
 
-
-    formGroup = item.closest('.form-group')
     App.Log.debug 'UiElement.datetime.validation', errors
     return if _.isEmpty(errors)
 
     # show invalid options
-    for key, value of errors
-      formGroup.addClass('has-error')
+    if attribute.validationContainer is 'self'
+      item.find('.js-datepicker').addClass('has-error')
+    else
+      formGroup = item.closest('.form-group')
+      for key, value of errors
+        formGroup.addClass('has-error')
+
+

app/assets/javascripts/app/controllers/_ui_element/holiday_selector.coffee

@@ -16,6 +16,8 @@ class App.UiElement.holiday_selector
     attributeDatepicket =
       name: "#{attribute.name}_date"
       disable_feature: true
+      class: 'form-control--small'
+      validationContainer: 'self'
     datePicker = App.UiElement.date.render(attributeDatepicket)
     item.find('.js-datePicker').html(datePicker)
 

app/assets/javascripts/app/views/generic/date.jst.eco

@@ -1,4 +1,4 @@
 <div class="u-positionOrigin" data-name="<%= @attribute.nameRaw %>">
   <input type="hidden" value="<%= @attribute.value %>" name="<%= @attribute.name %>">
-  <input type="text" value="" class="form-control js-datepicker" data-item="date">
+  <input type="text" value="" class="form-control js-datepicker <%= @attribute.class %>" data-item="date">
 </div>

app/assets/javascripts/app/views/generic/datetime.jst.eco

@@ -1,6 +1,6 @@
 <div class="horizontal u-positionOrigin" data-name="<%= @attribute.nameRaw %>">
   <input type="hidden" value="<%= @attribute.value %>" name="<%= @attribute.name %>">
-  <input type="text" value="" class="form-control flex-shrink-horizontal js-datepicker" data-item="date">
+  <input type="text" value="" class="form-control flex-shrink-horizontal js-datepicker <%= @attribute.class %>" data-item="date">
   <div class="controls-label"><%- @T('at') %></div>
-  <input type="text" value="" class="form-control time js-timepicker" data-item="time">
+  <input type="text" value="" class="form-control time js-timepicker <%= @attribute.class %>" data-item="time">
 </div>