Added prepend labels to inputs for start/end

- Also added `toSentenceCase` string service

src/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -6,7 +6,8 @@ import moment from 'moment';
 import dateMath from '@elastic/datemath';
 
 import { EuiDatePicker } from '../../date_picker';
-import { EuiFormRow, EuiFieldText } from '../../../form';
+import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
+import { toSentenceCase } from '../../../../services/string/to_case';
 
 const INPUT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
 
@@ -17,10 +18,13 @@ export class EuiAbsoluteTab extends Component {
     const parsedValue = dateMath.parse(props.value, { roundUp: props.roundUp });
     const valueAsMoment =
       parsedValue && parsedValue.isValid() ? parsedValue : moment();
+    const sentenceCasedPosition = toSentenceCase(props.position);
+
     this.state = {
       valueAsMoment,
       textInputValue: valueAsMoment.format(INPUT_DATE_FORMAT),
       isTextInvalid: false,
+      sentenceCasedPosition,
     };
   }
 
@@ -70,6 +74,11 @@ export class EuiAbsoluteTab extends Component {
             value={this.state.textInputValue}
             onChange={this.handleTextChange}
             data-test-subj={'superDatePickerAbsoluteDateInput'}
+            prepend={
+              <EuiFormLabel>
+                {this.state.sentenceCasedPosition} date
+              </EuiFormLabel>
+            }
           />
         </EuiFormRow>
       </div>
@@ -82,4 +91,5 @@ EuiAbsoluteTab.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   roundUp: PropTypes.bool.isRequired,
+  position: PropTypes.oneOf(['start', 'end']),
 };

src/components/date_picker/super_date_picker/date_popover/date_popover_content.js

@@ -33,7 +33,7 @@ export function EuiDatePopoverContent({
     }
   };
 
-  const popoverTitle = `${position === 'start' ? 'Start' : 'End'} date:`;
+  const ariaLabel = `${position === 'start' ? 'Start' : 'End'} date:`;
 
   const renderTabs = () => {
     return [
@@ -46,10 +46,11 @@ export function EuiDatePopoverContent({
             value={value}
             onChange={onChange}
             roundUp={roundUp}
+            position={position}
           />
         ),
         'data-test-subj': 'superDatePickerAbsoluteTab',
-        'aria-label': `${popoverTitle} Absolute`,
+        'aria-label': `${ariaLabel} Absolute`,
       },
       {
         id: DATE_MODES.RELATIVE,
@@ -60,10 +61,11 @@ export function EuiDatePopoverContent({
             value={value}
             onChange={onChange}
             roundUp={roundUp}
+            position={position}
           />
         ),
         'data-test-subj': 'superDatePickerRelativeTab',
-        'aria-label': `${popoverTitle} Relative`,
+        'aria-label': `${ariaLabel} Relative`,
       },
       {
         id: DATE_MODES.NOW,
@@ -83,12 +85,12 @@ export function EuiDatePopoverContent({
               fullWidth
               size="s"
               fill>
-              Set date and time to now
+              Set {position} date and time to now
             </EuiButton>
           </EuiText>
         ),
         'data-test-subj': 'superDatePickerNowTab',
-        'aria-label': `${popoverTitle} Now`,
+        'aria-label': `${ariaLabel} Now`,
       },
     ];
   };

src/components/date_picker/super_date_picker/date_popover/relative_tab.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import dateMath from '@elastic/datemath';
+import { toSentenceCase } from '../../../../services/string/to_case';
 
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
 import {
@@ -10,6 +11,7 @@ import {
   EuiFieldNumber,
   EuiFieldText,
   EuiSwitch,
+  EuiFormLabel,
 } from '../../../form';
 import { EuiSpacer } from '../../../spacer';
 
@@ -23,9 +25,11 @@ import {
 export class EuiRelativeTab extends Component {
   constructor(props) {
     super(props);
+    const sentenceCasedPosition = toSentenceCase(props.position);
 
     this.state = {
       ...parseRelativeParts(this.props.value),
+      sentenceCasedPosition,
     };
   }
 
@@ -108,7 +112,13 @@ export class EuiRelativeTab extends Component {
           onChange={this.onRoundChange}
         />
         <EuiSpacer size="m" />
-        <EuiFieldText value={formatedValue} readOnly />
+        <EuiFieldText
+          value={formatedValue}
+          readOnly
+          prepend={
+            <EuiFormLabel>{this.state.sentenceCasedPosition} date</EuiFormLabel>
+          }
+        />
       </EuiForm>
     );
   }
@@ -119,4 +129,5 @@ EuiRelativeTab.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   roundUp: PropTypes.bool,
+  position: PropTypes.oneOf(['start', 'end']),
 };

src/services/string/index.ts

@@ -1 +1,2 @@
 export { toInitials } from './to_initials';
+export { toSentenceCase } from './to_case';

src/services/string/to_case.ts

@@ -0,0 +1,9 @@
+/**
+ * This function returns the same string with the first letter of the first word capitalized.
+ *
+ * @param {string} strint The input string
+ */
+
+export function toSentenceCase(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}