Update/refactor JS for handling Dates and Times

app/assets/javascripts/repositories/renderers/columns/date_time_helper.js

@@ -7,7 +7,7 @@ var DateTimeHelper = (function() {
   }
 
   function isValidDate(date) {
-    return (Object.prototype.toString.call(date) === '[object Date]') && !isNaN(date.getTime());
+    return (date instanceof Date) && !isNaN(date.getTime());
   }
 
   function addLeadingZero(value) {
@@ -20,10 +20,9 @@ var DateTimeHelper = (function() {
       date.setMinutes(0);
       return date;
     }
-    let hours = timeStr.split(':')[0];
+
-    let mins = timeStr.split(':')[1];
+    date.setHours(timeStr.split(':')[0]);
-    date.setHours(hours);
+    date.setMinutes(timeStr.split(':')[1]);
-    date.setMinutes(mins);
     return date;
   }
 
@@ -40,199 +39,159 @@ var DateTimeHelper = (function() {
     return `${y}/${m}/${d} ${hours}:${mins}`;
   }
 
-  function findSecondRangeInput($input) {
+  function insertHiddenField($container) {
-    let $container = $input.parent().parent();
+    let formId = $container.data('form-id');
-    let $secondInput;
+    let columnId = $container.data('column-id');
-    if ($input.parent().hasClass('start-time')) {
+    let dateStr = $container.find('input.date-part').data('selected-date');
-      $secondInput = $container.find('.end-time input').first();
+    let timeStr = $container.find('input.time-part').val();
-    } else {
+    let columnType = $container.data('type');
-      $secondInput = $container.find('.start-time input').first();
-    }
-    return $secondInput;
-  }
-
-  function replaceForRangeHiddenField($container) {
-    let startTimeContainer = $container.find('.start-time');
-    let endTimeContainer = $container.find('.end-time');
-    let startTime = startTimeContainer.find('input[type=hidden]').val();
-    let endTime = endTimeContainer.find('input[type=hidden]').val();
-    let formId = startTimeContainer.find('input[type!=hidden]').data('form-id');
-    let columnId = startTimeContainer.find('input[type!=hidden]').data('column-id');
-    let dataType = $container.find('.cell-range-container').data('type');
-    let json = {};
-    let hiddenField;
-    let value;
-
-    json.start_time = startTime;
-    json.end_time = endTime;
-
-    if (startTime && endTime) {
-      value = JSON.stringify(json);
-    } else {
-      value = '';
-    }
-
-    hiddenField = `
-      <input type="hidden"
-             form="${formId}"
-             name="repository_cells[${columnId}]"
-             value='${value}'
-             data-type="${dataType}"/>`;
-
-    $container.find('.cell-range-container').html(hiddenField);
-    startTimeContainer.find('.cell-timestamp-container').html('');
-    endTimeContainer.find('.cell-timestamp-container').html('');
-  }
-
-  function insertHiddenField($input) {
-    let fieldType = $input.data('datetime-part');
-    let $container = $input.parent().find('.cell-timestamp-container');
-    let dateStr = $container.data('current-date');
-    let columnType = $container.data('datetime-type');
-    let timeStr;
-
-    if (fieldType === 'time') {
-      timeStr = $input.val();
-    } else if (fieldType === 'date') {
-      timeStr = $input.parent().find('input[data-mask-type=time]').val();
-    }
-
-    if (columnType === 'time' && !isValidDate(dateStr)) {
-      // new time without value for date
-      dateStr = stringDateTimeFormat(new Date(), 'dateonly');
-    }
     let date = new Date(dateStr);
-
-    let formId = $input.data('form-id');
-    let columnId = $input.data('column-id');
-    let hiddenFieldContainer = $input.parent().find('.cell-timestamp-container');
-    let hasTime = isValidTimeStr(timeStr);
-    let hasDate = isValidDate(date);
-    let dataType = $container.data('type');
     let value;
     let hiddenField;
 
-    if (!hasDate) { // Date needs to be presence
+    if (isValidDate(date) && isValidTimeStr(timeStr)) {
-      value = '';
-    } else if (columnType === 'time' && !hasTime) { // Delete time value
-      value = '';
-    } else if (columnType === 'datetime' && !hasTime) { // Delete date time value
-      value = '';
-    } else {
-      // create date time format
       value = stringDateTimeFormat(recalcTimestamp(date, timeStr), 'full');
+    } else {
+      value = '';
     }
 
     hiddenField = `
-      <input type="hidden" 
+      <input class="repository-cell-value" 
+             type="hidden" 
              form="${formId}" 
              name="repository_cells[${columnId}]" 
              value="${value}" 
-             data-type="${dataType}"/>`;
+             data-type="${columnType}"/>`;
 
-    hiddenFieldContainer.html(hiddenField);
+    $container.find('input.repository-cell-value').remove('input.repository-cell-value');
+    $container.prepend(hiddenField);
+  }
+
+
+  function insertRangeHiddenField($container) {
+    let formId = $container.data('form-id');
+    let columnId = $container.data('column-id');
+    let columnType = $container.data('type');
+    let $startContainer = $container.find('.start-time');
+    let $endContainer = $container.find('.end-time');
+    let startDate = new Date($startContainer.find('input.date-part').data('selected-date'));
+    let startTimeStr = $startContainer.find('input.time-part').val();
+    let endDate = new Date($endContainer.find('input.date-part').data('selected-date'));
+    let endTimeStr = $endContainer.find('input.time-part').val();
+    let hiddenField;
+    let value = '';
+
+    if (isValidDate(startDate)
+      && isValidTimeStr(startTimeStr)
+      && isValidDate(endDate)
+      && isValidTimeStr(endTimeStr)) {
+      let start = stringDateTimeFormat(recalcTimestamp(startDate, startTimeStr), 'full');
+      let end = stringDateTimeFormat(recalcTimestamp(endDate, endTimeStr), 'full');
+      value = JSON.stringify({ start_time: start, end_time: end });
+    }
+
+    hiddenField = `
+      <input class="repository-cell-value" 
+             type="hidden" 
+             form="${formId}" 
+             name="repository_cells[${columnId}]" 
+             value='${value}' 
+             data-type="${columnType}"/>`;
+
+    $container.find('input.repository-cell-value').remove('input.repository-cell-value');
+    $container.prepend(hiddenField);
   }
 
   function initChangeEvents($cell) {
-    $cell.find('input[data-mask-type=time]').on('change', function() {
+    $cell.find('input.time-part').on('change', function() {
       let $input = $(this);
-      insertHiddenField($input);
+      let $container = $input.closest('.datetime-container');
 
-      if ($input.parent('.range-type').length) {
+      if ($container.hasClass('range-type')) {
-        let $secondInput = findSecondRangeInput($input);
+        insertRangeHiddenField($container);
-
+      } else {
-        insertHiddenField($secondInput);
+        insertHiddenField($container);
-        replaceForRangeHiddenField($input.parent().parent());
       }
     });
 
-    $cell.find('.calendar-input').on('dp.change', function(e) {
+    $cell.find('input.date-part').on('dp.change', function(e) {
       let $input = $(this);
       let date = e.date._d;
-      let $container = $input.parent().find('.cell-timestamp-container');
+      let $container = $input.closest('.datetime-container');
 
       if (date !== undefined) {
-        $container.data('current-date', stringDateTimeFormat(date, 'dateonly'));
+        $input.data('selected-date', stringDateTimeFormat(date, 'dateonly'));
       } else {
-        $container.data('current-date', '');
+        $input.data('selected-date', '');
       }
 
-      insertHiddenField($input);
+      if ($container.hasClass('range-type')) {
-
+        insertRangeHiddenField($container);
-      if ($input.parent('.range-type').length) {
+      } else {
-        let $secondInput = findSecondRangeInput($input);
+        insertHiddenField($container);
-
-        insertHiddenField($secondInput);
-        replaceForRangeHiddenField($input.parent().parent());
       }
     });
   }
 
-  function dateInputField(formId, columnId, value) {
+
+  function dateInputField(value, dateDataValue) {
     return `
-       <input class="form-control editing calendar-input" 
+       <input class="form-control editing calendar-input date-part" 
-             type="datetime"
+              type="datetime"
-             data-datetime-part="date"
+              data-datetime-part="date"
-             data-form-id="${formId}" 
+              data-selected-date="${dateDataValue}"
-             data-column-id="${columnId}"
+              value='${value}'/>     
-             value='${value}'/>     
     `;
   }
 
-  function timeInputField(formId, columnId, value) {
+  function timeInputField(value) {
     return `
-      <input class="form-control editing" 
+      <input class="form-control editing time-part" 
              type="text"
-             data-datetime-part="time"
              data-mask-type="time" 
-             data-form-id="${formId}" 
-             data-column-id="${columnId}" 
              value='${value}'
              placeholder="HH:mm"/>
     `;
   }
 
-  function initDateEditMode(formId, columnId, $cell, date, datetime) {
+  function getDateOrDefault($span, mode) {
-    let inputFields = `
+    let dateStr = $span.data('date');
-    <div class="form-group">
+    let date;
-      <div class="cell-timestamp-container" data-current-date="${datetime}" data-datetime-type="date"  data-type="RepositoryDateValue"></div>
+    if (mode === 'timeonly') {
-      ${dateInputField(formId, columnId, date)}
+      // Set default date if no data in span
-    </div>
+      date = new Date(dateStr);
-  `;
+      if (isValidDate(date)) {
-
+        dateStr = stringDateTimeFormat(new Date(date), 'dateonly');
-    $cell.html(inputFields);
+      } else {
-
+        dateStr = stringDateTimeFormat(new Date(), 'dateonly');
-    $cell.find('.calendar-input').datetimepicker({ ignoreReadonly: true, locale: 'en', format: formatJS });
+      }
-    initChangeEvents($cell);
+    }
+    return dateStr;
   }
 
-  function initTimeEditMode(formId, columnId, $cell, time, datetime) {
+  function getTimeOrDefault($span, mode) {
-    let inputFields = `
+    let timeStr = $span.data('time');
-    <div class="form-group">
-      <div class="cell-timestamp-container" data-current-date="${datetime}" data-datetime-type="time"  data-type="RepositoryTimeValue"></div>
-      ${timeInputField(formId, columnId, time)}
-    </div>
-  `;
 
-    $cell.html(inputFields);
+    if ((mode === 'dateonly') && (!isValidTimeStr(timeStr))) {
-
+      timeStr = '00:00';
-    Inputmask('datetime', {
+    }
-      inputFormat: 'HH:MM',
+    return timeStr;
-      placeholder: 'HH:mm',
-      clearIncomplete: true,
-      showMaskOnHover: true,
-      hourFormat: 24
-    }).mask($cell.find('input[data-mask-type="time"]'));
-
-    initChangeEvents($cell);
   }
 
-  function initDateTimeEditMode(formId, columnId, $cell, date, time, datetime) {
+  function initDateTimeEditMode(formId, columnId, $cell, mode, columnType) {
+    let $span = $cell.find('span').first();
+    let date = $span.data('date');
+    let dateDataValue = getDateOrDefault($span, mode);
+    let time = getTimeOrDefault($span, mode);
+    let datetime = $span.data('datetime');
     let inputFields = `
-    <div class="form-group">
+    <div class="form-group datetime-container ${mode}" 
-      <div class="cell-timestamp-container" data-current-date="${datetime}" data-datetime-type="datetime" data-type="RepositoryDateTimeValue"></div>
+                data-form-id="${formId}"
-      ${dateInputField(formId, columnId, date)}
+                data-column-id="${columnId}"
-      ${timeInputField(formId, columnId, time)}
+                data-type="${columnType}"
+                data-current-datetime="${datetime}">
+      ${dateInputField(date, dateDataValue)}
+      ${timeInputField(time)}
     </div>
   `;
 
@@ -250,19 +209,33 @@ var DateTimeHelper = (function() {
     initChangeEvents($cell);
   }
 
-  function initDateTimeRangeEditMode(formId, columnId, $cell, startDate, startTime, startDatetime, endDate, endTime, endDatetime) {
+  function initDateTimeRangeEditMode(formId, columnId, $cell, mode, columnType) {
+    let $startSpan = $cell.find('span').first();
+    let startDate = $startSpan.data('date');
+    let startTime = getTimeOrDefault($startSpan, mode);
+    let startDatetime = $startSpan.data('datetime');
+    let startDateDataValue = getDateOrDefault($startSpan, mode);
+    let $endSpan = $cell.find('span').last();
+    let endDate = $endSpan.data('date');
+    let endTime = getTimeOrDefault($endSpan, mode);
+    let endDatetime = $endSpan.data('datetime');
+    let endDateDataValue = getDateOrDefault($endSpan, mode);
+
     let inputFields = `
-    <div class="form-group">
+    <div class="form-group datetime-container range-type"
-      <div class="cell-range-container"  data-type="RepositoryDateTimeRangeValue"></div>
+         data-form-id="${formId}"
-      <div class="start-time range-type">
+         data-column-id="${columnId}"
-        <div class="cell-timestamp-container" data-current-date="${startDatetime}" data-datetime-type="datetime"></div>
+         data-type="${columnType}"
-        ${dateInputField(formId, columnId, startDate)}
+         >
-        ${timeInputField(formId, columnId, startTime)}   
+      <div class="start-time ${mode}" 
+           data-current-datetime="${startDatetime}"> 
+        ${dateInputField(startDate, startDateDataValue)}
+        ${timeInputField(startTime)}   
       </div>
-      <div class="end-time range-type">
+      <div class="end-time ${mode}"
-        <div class="cell-timestamp-container" data-current-date="${endDatetime}" data-datetime-type="datetime"></div>
+           data-current-datetime="${endDatetime}">
-        ${dateInputField(formId, columnId, endDate)}
+        ${dateInputField(endDate, endDateDataValue)}
-        ${timeInputField(formId, columnId, endTime)}
+        ${timeInputField(endTime)}
       </div>      
     </div>
   `;
@@ -290,70 +263,8 @@ var DateTimeHelper = (function() {
     initChangeEvents($cell);
   }
 
-  function initDateRangeEditMode(formId, columnId, $cell, startDate, startDatetime, endDate, endDatetime) {
-    let inputFields = `
-    <div class="form-group">
-      <div class="cell-range-container" data-type="RepositoryDateRangeValue"></div>
-      <div class="start-time range-type">
-        <div class="cell-timestamp-container" data-current-date="${startDatetime}" data-datetime-type="date"></div>
-        ${dateInputField(formId, columnId, startDate)}
-      </div>
-      <div class="end-time range-type">
-        <div class="cell-timestamp-container" data-current-date="${endDatetime}" data-datetime-type="date"></div>
-        ${dateInputField(formId, columnId, endDate)}
-      </div>      
-    </div>
-  `;
-
-    $cell.html(inputFields);
-
-    let $cal1 = $cell.find('.calendar-input').first().datetimepicker({ ignoreReadonly: true, locale: 'en', format: formatJS });
-    let $cal2 = $cell.find('.calendar-input').last().datetimepicker({ ignoreReadonly: true, locale: 'en', format: formatJS });
-
-    $cal1.on('dp.change', function(e) {
-      $cal2.data('DateTimePicker').minDate(e.date);
-    });
-    $cal2.on('dp.change', function(e) {
-      $cal1.data('DateTimePicker').maxDate(e.date);
-    });
-
-    initChangeEvents($cell);
-  }
-
-  function initTimeRangeEditMode(formId, columnId, $cell, startTime, startDatetime, endTime, endDatetime) {
-    let inputFields = `
-    <div class="form-group">
-      <div class="cell-range-container" data-type="RepositoryTimeRangeValue"></div>
-      <div class="start-time range-type">
-        <div class="cell-timestamp-container" data-current-date="${startDatetime}" data-datetime-type="time"></div>
-        ${timeInputField(formId, columnId, startTime)}   
-      </div>
-      <div class="end-time range-type">
-        <div class="cell-timestamp-container" data-current-date="${endDatetime}" data-datetime-type="time"></div>
-        ${timeInputField(formId, columnId, endTime)}
-      </div>      
-    </div>
-  `;
-
-    $cell.html(inputFields);
-
-    Inputmask('datetime', {
-      inputFormat: 'HH:MM',
-      placeholder: 'HH:mm',
-      clearIncomplete: true,
-      showMaskOnHover: true,
-      hourFormat: 24
-    }).mask($cell.find('input[data-mask-type="time"]'));
-
-    initChangeEvents($cell);
-  }
-
   return {
-    initDateEditMode: initDateEditMode,
-    initTimeEditMode: initTimeEditMode,
     initDateTimeEditMode: initDateTimeEditMode,
-    initDateTimeRangeEditMode: initDateTimeRangeEditMode,
+    initDateTimeRangeEditMode: initDateTimeRangeEditMode
-    initDateRangeEditMode: initDateRangeEditMode,
-    initTimeRangeEditMode: initTimeRangeEditMode
   };
 }());

app/assets/javascripts/repositories/renderers/edit_renderers.js

@@ -1,4 +1,7 @@
-/* global ListColumnHelper ChecklistColumnHelper Status SmartAnnotation I18n GLOBAL_CONSTANTS DateTimeHelper*/
+/*
+global ListColumnHelper ChecklistColumnHelper Status SmartAnnotation I18n
+GLOBAL_CONSTANTS DateTimeHelper
+*/
 
 $.fn.dataTable.render.editRowName = function(formId, cell) {
   let $cell = $(cell.node());
@@ -90,68 +93,38 @@ $.fn.dataTable.render.editRepositoryStatusValue = function(formId, columnId, cel
 
 $.fn.dataTable.render.editRepositoryDateTimeValue = function(formId, columnId, cell) {
   let $cell = $(cell.node());
-  let $span = $cell.find('span').first();
-  let date = $span.data('date');
-  let time = $span.data('time');
-  let datetime = $span.data('datetime');
 
-  DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, date, time, datetime);
+  DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeValue');
 };
 
 $.fn.dataTable.render.editRepositoryDateValue = function(formId, columnId, cell) {
   let $cell = $(cell.node());
-  let $span = $cell.find('span').first();
-  let date = $span.data('date');
-  let datetime = $span.data('datetime');
 
-  DateTimeHelper.initDateEditMode(formId, columnId, $cell, date, datetime);
+  DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateValue');
 };
 
 $.fn.dataTable.render.editRepositoryTimeValue = function(formId, columnId, cell) {
   let $cell = $(cell.node());
-  let $span = $cell.find('span').first();
-  let time = $span.data('time');
-  let datetime = $span.data('datetime');
 
-  DateTimeHelper.initTimeEditMode(formId, columnId, $cell, time, datetime);
+  DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeValue');
 };
 
 $.fn.dataTable.render.editRepositoryDateTimeRangeValue = function(formId, columnId, cell) {
   let $cell = $(cell.node());
-  let $startSpan = $cell.find('span').first();
-  let startDate = $startSpan.data('date');
-  let startTime = $startSpan.data('time');
-  let startDatetime = $startSpan.data('datetime');
-  let $endSpan = $cell.find('span').last();
-  let endDate = $endSpan.data('date');
-  let endTime = $endSpan.data('time');
-  let endDatetime = $endSpan.data('datetime');
 
-  DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, startDate, startTime, startDatetime, endDate, endTime, endDatetime);
+  DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeRangeValue');
 };
 
 $.fn.dataTable.render.editRepositoryDateRangeValue = function(formId, columnId, cell) {
   let $cell = $(cell.node());
-  let $startSpan = $cell.find('span').first();
-  let startDate = $startSpan.data('date');
-  let startDatetime = $startSpan.data('datetime');
-  let $endSpan = $cell.find('span').last();
-  let endDate = $endSpan.data('date');
-  let endDatetime = $endSpan.data('datetime');
 
-  DateTimeHelper.initDateRangeEditMode(formId, columnId, $cell, startDate, startDatetime, endDate, endDatetime);
+  DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateRangeValue');
 };
 
 $.fn.dataTable.render.editRepositoryTimeRangeValue = function(formId, columnId, cell) {
   let $cell = $(cell.node());
-  let $startSpan = $cell.find('span').first();
-  let startTime = $startSpan.data('time');
-  let startDatetime = $startSpan.data('datetime');
-  let $endSpan = $cell.find('span').last();
-  let endTime = $endSpan.data('time');
-  let endDatetime = $endSpan.data('datetime');
 
-  DateTimeHelper.initTimeRangeEditMode(formId, columnId, $cell, startTime, startDatetime, endTime, endDatetime);
+  DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeRangeValue');
 };
 
 $.fn.dataTable.render.editRepositoryChecklistValue = function(formId, columnId, cell) {

app/assets/javascripts/repositories/renderers/new_renderers.js

@@ -1,4 +1,7 @@
-/* global ListColumnHelper ChecklistColumnHelper Status SmartAnnotation I18n GLOBAL_CONSTANTS DateTimeHelper */
+/*
+global ListColumnHelper ChecklistColumnHelper Status SmartAnnotation I18n
+GLOBAL_CONSTANTS DateTimeHelper
+*/
 
 $.fn.dataTable.render.newRowName = function(formId, $cell) {
   $cell.html(`
@@ -87,27 +90,27 @@ $.fn.dataTable.render.newRepositoryNumberValue = function(formId, columnId, $cel
 };
 
 $.fn.dataTable.render.newRepositoryDateTimeValue = function(formId, columnId, $cell) {
-  DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, '', '', '');
+  DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeValue');
 };
 
 $.fn.dataTable.render.newRepositoryTimeValue = function(formId, columnId, $cell) {
-  DateTimeHelper.initTimeEditMode(formId, columnId, $cell, '', '');
+  DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeValue');
 };
 
 $.fn.dataTable.render.newRepositoryDateValue = function(formId, columnId, $cell) {
-  DateTimeHelper.initDateEditMode(formId, columnId, $cell, '', '');
+  DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateValue');
 };
 
 $.fn.dataTable.render.newRepositoryDateTimeRangeValue = function(formId, columnId, $cell) {
-  DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', '', '', '', '', '');
+  DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeRangeValue');
 };
 
 $.fn.dataTable.render.newRepositoryDateRangeValue = function(formId, columnId, $cell) {
-  DateTimeHelper.initDateRangeEditMode(formId, columnId, $cell, '', '', '', '');
+  DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateRangeValue');
 };
 
 $.fn.dataTable.render.newRepositoryTimeRangeValue = function(formId, columnId, $cell) {
-  DateTimeHelper.initTimeRangeEditMode(formId, columnId, $cell, '', '', '', '');
+  DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeRangeValue');
 };
 
 $.fn.dataTable.render.newRepositoryCheckboxValue = function(formId, columnId) {

app/assets/javascripts/repositories/validators/base_validator.js

@@ -39,15 +39,14 @@ $.fn.dataTable.render.RepositoryNumberValueValidator = function() {
 };
 
 $.fn.dataTable.render.RepositoryDateTimeValueValidator = function($input) {
-  let $container = $input.parents().eq(1);
+  let $container = $input.parents('.datetime-container');
-  let $date = $container.find('input[data-datetime-part=date]');
+  let $date = $container.find('input.date-part');
-  let $time = $container.find('input[data-datetime-part=time]');
+  let $time = $container.find('input.time-part');
 
   if (($date.val() === '') === ($time.val() === '')) {
     return true;
   }
 
-  // will be refactored
   $container.addClass('has-error');
   $container.append('<span class="help-block">Set both or none</span>');
   return false;
@@ -62,12 +61,11 @@ $.fn.dataTable.render.RepositoryTimeValueValidator = function() {
 };
 
 $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
-  // will be refactored
+  let $container = $input.parents('.datetime-container');
-  let $container = $input.parents().eq(1);
+  let $dateS = $container.find('.start-time input.date-part');
-  let $dateS = $container.find('.start-time input[data-datetime-part=date]');
+  let $timeS = $container.find('.start-time input.time-part');
-  let $timeS = $container.find('.start-time input[data-datetime-part=time]');
+  let $dateE = $container.find('.end-time input.date-part');
-  let $dateE = $container.find('.end-time input[data-datetime-part=date]');
+  let $timeE = $container.find('.end-time input.time-part');
-  let $timeE = $container.find('.end-time input[data-datetime-part=time]');
   let isValid = true;
   let errorMessage;
   let startTime;
@@ -86,10 +84,10 @@ $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
 
   if (a.filter((v, i, arr) => arr.indexOf(v) === i).length > 1) {
     isValid = false;
-    errorMessage = 'Needs to set all or none';
+    errorMessage = I18n.t('repositories.table.date_time.errors.set_all_or_none');
   } else if (($input.val()) && (startTime > endTime)) {
     isValid = false;
-    errorMessage = 'End time is before start time';
+    errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range');
   }
 
   if (isValid) {
@@ -102,11 +100,9 @@ $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
 };
 
 $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
-  // will be refactored
+  let $container = $input.parents('.datetime-container');
-
+  let $dateS = $container.find('.start-time input.date-part');
-  let $container = $input.parents().eq(1);
+  let $dateE = $container.find('.end-time input.date-part');
-  let $dateS = $container.find('.start-time input[data-datetime-part=date]');
-  let $dateE = $container.find('.end-time input[data-datetime-part=date]');
   let isValid = true;
   let errorMessage;
   let endTime;
@@ -118,10 +114,10 @@ $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
 
   if (!($dateS.val() === '') === ($dateE.val() === '')) {
     isValid = false;
-    errorMessage = 'Needs to set all or none';
+    errorMessage = I18n.t('repositories.table.date_time.errors.set_all_or_none');
   } else if (($input.val()) && (startTime > endTime)) {
     isValid = false;
-    errorMessage = 'End date is before start date';
+    errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range');
   }
 
   if (isValid) {
@@ -134,26 +130,22 @@ $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
 };
 
 $.fn.dataTable.render.RepositoryTimeRangeValueValidator = function($input) {
-  // will be refactored
+  let $container = $input.parents('.datetime-container');
-
+  let $timeS = $container.find('.start-time input.time-part');
-  let $container = $input.parents().eq(1);
+  let $timeE = $container.find('.end-time input.time-part');
-  let $timeS = $container.find('.start-time input[data-datetime-part=time]');
-  let $timeE = $container.find('.end-time input[data-datetime-part=time]');
   let isValid = true;
   let errorMessage;
 
   if (!($timeS.val() === '') === ($timeE.val() === '')) {
     isValid = false;
-    errorMessage = 'Needs to set both or none';
+    errorMessage = I18n.t('repositories.table.date_time.errors.set_all_or_none');
   } else if ($timeS.val() > $timeE.val()) {
     isValid = false;
-    errorMessage = 'Needs to set both or none';
+    errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range');
-    errorMessage = 'End time is before start time';
   }
   if (isValid) {
     return true;
   }
-  // will be refactored
   $container.addClass('has-error');
   $container.append(`<span class="help-block">${errorMessage}</span>`);
   return false;

app/assets/stylesheets/repository/repository_table.scss

@@ -14,4 +14,17 @@
       }
     }
   }
+
+  // DateTime
+  .dateonly {
+    input.time-part {
+      display: none;
+    }
+  }
+
+  .timeonly {
+    input.date-part {
+      display: none;
+    }
+  }
 }

config/locales/en.yml

@@ -1049,6 +1049,10 @@ en:
       added_by: "Added by"
       assets:
         select_file_btn: "Select File (Max %{max_size} MB)..."
+      date_time:
+        errors:
+          set_all_or_none: 'Needs to set both or none'
+          not_valid_range: 'Range is not valid.'
     add_new_record: "New item"
     import_records:
       import: 'Import'