Adds placeholder props and allows empty state

src/components/DatePicker/DatePicker.tsx

@@ -88,10 +88,13 @@ export interface DatePickerProps extends DatePickerWrapperProps {
   helperTextFrom?: string;
   /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
   helperTextTo?: string;
-  /** The initial date value. This must be in the mm/dd/yyyy format. */
+  /** The initial date value. If no initialDate is passed, the input will render with
+   * today's date. If an empty string is passed, the input will render with no initial
+   * value. If a date is passed, it must be in the mm/dd/yyyy format. */
   initialDate?: string;
-  /** The initialTo date value used for date ranges.
-   * This must be in the mm/dd/yyyy format. */
+  /** The initialTo date value (used for date ranges). If no initialTo is passed, the input
+   * will render with today's date. If an empty string is passed, the input will render with
+   * no initial value.  If a date is passed, it must be in the mm/dd/yyyy format. */
   initialDateTo?: string;
   /** Populates the `HelperErrorText` error state for both "From"
    * and "To" input components. */
@@ -116,6 +119,10 @@ export interface DatePickerProps extends DatePickerWrapperProps {
    * This will return the data in an object with `startDate` and `endDate` keys.
    */
   onChange?: (data: FullDateType) => void;
+  /** Placeholder text for the input. */
+  placeholder?: string;
+  /** Placeholder text for the end date input (used in date ranges). */
+  placeholderTo?: string;
   /** An additional explicit React ref passed for a date range's "To"
    * input field. Note that the "From" input takes the initial "ref" value. */
   refTo?: React.Ref<TextInputRefType>;
@@ -267,6 +274,8 @@ export const DatePicker = chakra(
       nameFrom,
       nameTo,
       onChange,
+      placeholder,
+      placeholderTo,
       refTo,
       showHelperInvalidText = true,
       showLabel = true,
@@ -275,8 +284,16 @@ export const DatePicker = chakra(
     } = props;
     const styles = useMultiStyleConfig("DatePicker", {});
     const finalStyles = isDateRange ? styles : {};
-    const initStartDate = initialDate ? new Date(initialDate) : new Date();
-    const initEndDate = initialDateTo ? new Date(initialDateTo) : new Date();
+    const initStartDate = initialDate
+      ? new Date(initialDate)
+      : initialDate === ""
+      ? null
+      : new Date();
+    const initEndDate = initialDateTo
+      ? new Date(initialDateTo)
+      : initialDateTo === ""
+      ? null
+      : new Date();
     const startDateInputRef = useRef(null);
     const endDateInputRef = useRef(null);
 
@@ -421,6 +438,7 @@ export const DatePicker = chakra(
           id={`${id}-end`}
           name={nameTo}
           onChange={(date: Date) => onChangeDefault(date, "endDate")}
+          placeholderText={placeholderTo}
           selected={fullDate.endDate}
           {...endDatePickerAttrs}
         />
@@ -445,6 +463,7 @@ export const DatePicker = chakra(
         id={`${id}-start`}
         name={nameFrom}
         onChange={(date: Date) => onChangeDefault(date, "startDate")}
+        placeholderText={placeholder}
         selected={fullDate.startDate}
         {...startDatePickerAttrs}
       />