fix: fix DateTimePicker text capitalization

src/components/DateTimePicker/helpers/capitalizeFirstLetter.js

@@ -0,0 +1,3 @@
+export default function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}

src/components/DateTimePicker/helpers/formatDateTime.js

@@ -1,3 +1,5 @@
+import capitalizeFirstLetter from './capitalizeFirstLetter';
+
 /* eslint-disable no-console */
 const FORMATS = {
     small: { year: '2-digit', month: 'numeric', day: 'numeric' },
@@ -18,7 +20,13 @@ export default function formatDateTime(
             const options = FORMATS[formatStyle] || FORMATS.medium;
             const value = typeof date === 'string' ? new Date(date) : date;
             const timeFormat = hour24 ? timeFormat24h : timeFormat12h;
-            return new Intl.DateTimeFormat(locale, { ...options, ...timeFormat }).format(value);
+            const formattedDatetime = new Intl.DateTimeFormat(locale, {
+                ...options,
+                ...timeFormat,
+            }).format(value);
+            return formatStyle === 'large'
+                ? capitalizeFirstLetter(formattedDatetime)
+                : formattedDatetime;
         } catch (error) {
             console.error(error);
             return '';

src/components/DateTimePicker/index.js

@@ -2,12 +2,12 @@
 import React, { useRef, useEffect, useState, useImperativeHandle, useContext } from 'react';
 import PropTypes from 'prop-types';
 import withReduxForm from '../../libs/hocs/withReduxForm';
+import Input from '../Input';
 import DateTimeIcon from './icon';
 import DateTimePickerModal from './pickerModal';
 import formatDateTime from './helpers/formatDateTime';
 import { ENTER_KEY, SPACE_KEY } from '../../libs/constants';
 import StyledContainer from './styled/container';
-import StyledInput from './styled/input';
 import { AppContext } from '../Application/context';
 import { getLocale } from '../../libs/utils';
 
@@ -105,7 +105,7 @@ const DateTimePicker = React.forwardRef((props, ref) => {
 
     return (
         <StyledContainer id={id} className={className} style={style}>
-            <StyledInput
+            <Input
                 ref={inputRef}
                 label={label}
                 placeholder={placeholder}