adding date placeholder

app/assets/javascripts/global_activities/side_pane.js

@@ -95,7 +95,7 @@ $(function() {
     var dateContainer = $('.ga-side .date-selector.filter-block');
     if (updateRunning) return false;
     $('.ga-top .ga-tags').children().remove();
-    if (dateContainer[0].dataset.periodSelect) {
+    if (dateContainer[0].dataset.periodSelect && dateContainer[0].dataset.periodSelect !== 'null') {
       $('<li class="select2-selection__choice">'
           + dateContainer[0].dataset.periodLabel
           + $('.ga-side .date-selector.filter-block')[0].dataset.periodSelect
@@ -182,6 +182,7 @@ $(function() {
     $('.ga-side .subject-selector select').select2MultipleClearAll();
     $('#calendar-from-date').data('DateTimePicker').clear();
     $('#calendar-to-date').data('DateTimePicker').clear();
+    $('.ga-side .date-selector.filter-block')[0].dataset.periodSelect = null;
     updateRunning = false;
     GlobalActivitiesUpdateTopPaneTags();
     reloadActivities();

app/assets/stylesheets/global_activities.scss

@@ -151,7 +151,6 @@
       float: left;
       height: 2px;
       margin: 16px 10px;
-      margin-top: 38px;
       position: relative;
       width: 10px;
     }
@@ -299,4 +298,16 @@
 
 .datetime-picker-container {
   position: relative;
+
+  input {
+    background-color: transparent !important;
+    box-shadow: none;
+    color: inherit;
+    font-size: 13px;
+    padding-left: 5px;
+
+    &::placeholder{
+      color: $color-silver-chalice;
+    }
+  }
 }

app/assets/stylesheets/select2_customizations.scss

@@ -18,6 +18,10 @@
 
     .select2-search__field {
       min-width: 150px;
+
+      &::placeholder{
+        color: $color-silver-chalice;
+      }
     }
 
     .select2-selection__choice {

app/views/global_activities/_date_picker.html.erb

@@ -2,7 +2,7 @@
   <% if label %>
     <label class="control-label required" for="calendar-<%= id %>"><%= label %></label>
   <% end %>
-  <input type="datetime" class="form-control" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" />
+  <input type="datetime" class="form-control" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" placeholder="<%= placeholder %>" />
   <%
     js_format = I18n.backend.date_format.dup
       js_format.gsub!(/%-d/, 'D')

app/views/global_activities/_side_filters.html.erb

@@ -31,11 +31,11 @@
       <%= t('global_activities.index.custom_dates_label') %>
     </h4>
     <div class="to">
-      <%= render partial: "date_picker", locals: { id: 'to-date', use_current: 'false', label: t('global_activities.index.to_label') } %>
+      <%= render partial: "date_picker", locals: { id: 'to-date', use_current: 'false', placeholder: t('global_activities.index.to_label'), label: nil } %>
     </div>
     <div class="separator"></div>
     <div class="from">
-      <%= render partial: "date_picker", locals: { id: 'from-date', use_current: 'true', label: t('global_activities.index.from_label') } %>
+      <%= render partial: "date_picker", locals: { id: 'from-date', use_current: 'true', placeholder: t('global_activities.index.from_label'), label: nil } %>
     </div>
   </div>
 </div>

config/locales/global_activities/en.yml

@@ -11,8 +11,8 @@ en:
       this_month: "This month"
       last_month: "Last month"
       custom_dates_label: "Select custom dates"
-      from_label: "End date"
-      to_label: "Start date"
+      from_label: "Select end date"
+      to_label: "Select start date"
       clear: "clear"
       activity_type: "Activity type"
       user: "User"