TMDatePicker Standardization

src/Components/AdministratorPage/ManageBidSeasons/ManageBidSeasons.jsx

@@ -146,10 +146,10 @@ const ManageBidSeasons = () => {
             <TMDatePicker
               onChange={setSelectedDate}
               selected={selectedDate}
-              type="filter"
               showMonthDropdown
               showYearDropdown
               isClearable
+              condensed
             />
           </div>
         </div>

src/Components/AssignmentsSeparations/Separation/Separation.jsx

@@ -255,6 +255,7 @@ const Separation = (props) => {
               showMonthDropdown
               showYearDropdown
               isClearable
+              showIcon
               type="form"
             />
           </div>
@@ -276,6 +277,7 @@ const Separation = (props) => {
               showMonthDropdown
               showYearDropdown
               isClearable
+              showIcon
               type="form"
               disabled
             />
@@ -304,6 +306,52 @@ const Separation = (props) => {
               <FA name="globe" />
             </InteractiveElement>
           </div>
+          <div className="position-form--label-input-container">
+            <label htmlFor="separation-date">Form Datepicker</label>
+            <TMDatePicker
+              selected={panelMeetingDate}
+              onChange={setPanelMeetingDate}
+              showMonthDropdown
+              showYearDropdown
+              isClearable
+              showIcon
+              useStandardInputWidth
+            />
+          </div>
+          <div className="position-form--label-input-container">
+            <label htmlFor="separation-date">Form Datepicker No Icon</label>
+            <TMDatePicker
+              selected={panelMeetingDate}
+              onChange={setPanelMeetingDate}
+              showMonthDropdown
+              showYearDropdown
+              isClearable
+              useStandardInputWidth
+            />
+          </div>
+          <div className="position-form--label-input-container">
+            <label htmlFor="panel-meeting-date">Filter Datepicker</label>
+            <TMDatePicker
+              selected={panelMeetingDate}
+              onChange={setPanelMeetingDate}
+              showMonthDropdown
+              showYearDropdown
+              isClearable
+              showIcon
+              condensed
+            />
+          </div>
+          <div className="position-form--label-input-container">
+            <label htmlFor="panel-meeting-date">Filter Datepicker No Icon</label>
+            <TMDatePicker
+              selected={panelMeetingDate}
+              onChange={setPanelMeetingDate}
+              showMonthDropdown
+              showYearDropdown
+              isClearable
+              condensed
+            />
+          </div>
         </div>
         {showLocationSearch &&
           <GsaLocations

src/Components/CycleManagement/CycleManagement.jsx

@@ -238,10 +238,11 @@ const CycleManagement = (props) => {
                 <TMDatePicker
                   onChange={setSelectedDate}
                   selected={selectedDate}
-                  type="filter"
                   showMonthDropdown
                   showYearDropdown
                   isClearable
+                  showIcon
+                  condensed
                 />
               </div>
             </div>

src/Components/Panel/PanelMeetingSearch/PanelMeetingSearch.jsx

@@ -241,11 +241,11 @@ const PanelMeetingSearch = ({ isCDO }) => {
               <TMDatePicker
                 value={selectedPanelMeetDate}
                 onChange={setSelectedPanelMeetDate}
-                type="filter"
                 showMonthDropdown
                 showYearDropdown
                 selectsRange
                 isClearable
+                condensed
               />
             </div>
           </div>

src/Components/TMDatePicker/TMDatePicker.jsx

@@ -1,36 +1,47 @@
+import { useRef } from 'react';
 import PropTypes from 'prop-types';
 import DatePicker from 'react-datepicker';
 import FA from 'react-fontawesome';
 
 const TMDatePicker = ({
   selected,
   onChange,
-  type,
   value,
   selectsRange,
   showTimeSelect,
   showMonthDropdown,
   showYearDropdown,
   placeholderText,
   showIcon,
-  icon,
   isClearable,
   excludeDates,
+  useStandardInputWidth,
+  condensed,
   disabled,
 }) => {
-  const typeClasses = {
-    filter: {
-      wrapper: 'larger-date-picker',
-      datePicker: 'tm-date-picker-range',
-    },
-    form: {
-      wrapper: 'larger-date-picker form-date-picker',
-      datePicker: '',
-    },
+  const datePickerRef = useRef(null);
+  const openDatePicker = () => {
+    datePickerRef.current.setOpen(true);
   };
+
+  let wrapperClasses = 'tm-datepicker';
+
+  if (showIcon) {
+    wrapperClasses = wrapperClasses.concat(' show-icon');
+  }
+  if (useStandardInputWidth) {
+    wrapperClasses = wrapperClasses.concat(' standard-input-width');
+  }
+  if (condensed) {
+    wrapperClasses = wrapperClasses.concat(' condensed');
+  }
+
+
   return (
-    <div className={`tm-datepicker-wrapper ${typeClasses[type]?.wrapper}`}>
-      {showIcon && icon}
+    <div className={wrapperClasses}>
+      {showIcon &&
+        <FA name="fa fa-calendar" onClick={() => openDatePicker()} />
+      }
       <DatePicker
         selected={selected}
         onChange={onChange}
@@ -42,29 +53,28 @@ const TMDatePicker = ({
         endDate={selectsRange ? value[1] : null}
         isClearable={isClearable}
         dropdownMode="select"
-        className={`tm-datepicker ${typeClasses[type]?.datePicker}`}
         placeholderText={placeholderText}
         excludeDates={excludeDates}
+        ref={datePickerRef}
         disabled={disabled}
       />
     </div>
   );
-}
-;
+};
 
 export default TMDatePicker;
 
 TMDatePicker.propTypes = {
   value: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
   onChange: PropTypes.func.isRequired,
-  type: PropTypes.string.isRequired,
   selected: PropTypes.instanceOf(Date),
   showMonthDropdown: PropTypes.bool,
   showYearDropdown: PropTypes.bool,
   placeholderText: PropTypes.string,
   selectsRange: PropTypes.bool,
   showIcon: PropTypes.bool,
-  icon: PropTypes.element,
+  useStandardInputWidth: PropTypes.bool,
+  condensed: PropTypes.bool,
   isClearable: PropTypes.bool,
   showTimeSelect: PropTypes.bool,
   excludeDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
@@ -79,7 +89,8 @@ TMDatePicker.defaultProps = {
   placeholderText: 'Select Date',
   selectsRange: false,
   showIcon: false,
-  icon: <FA name="fa fa-calendar" />,
+  useStandardInputWidth: false,
+  condensed: false,
   isClearable: false,
   showTimeSelect: false,
   excludeDates: [],

src/sass/_common.scss

@@ -87,9 +87,13 @@ $values in $filters-sizing-config {
       }
 
       .picky,
-      .tm-datepicker-wrapper {
+      .react-datepicker-wrapper {
         color: $color-black;
-        width: $picky-width;
+        width: $picky-width !important;
+      }
+
+      .tm-datepicker {
+        width: auto;
       }
     }
   }