diff --git a/example/index.tsx b/example/index.tsx
index eeae802..01f70e5 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -54,8 +54,8 @@ const App = () => {
   const { colorMode, toggleColorMode } = useColorMode();
   const [date, setDate] = useState<Date | undefined>(demoDate);
   const [selectedDates, setSelectedDates] = useState<Date[]>([
-    new Date(),
-    new Date(),
+    // new Date(),
+    // new Date(),
   ]);
   const [firstDayOfWeek, setFirstDayOfWeek] = useState<FirstDayOfWeek>(1);
   const [isSingleChecked, setSingleCheck] = useState(true);
@@ -103,6 +103,14 @@ const App = () => {
         flexDirection={['column', 'column', 'row']}
       >
         <TabList display={'flex'} flexDir={'column'} gridGap={'1'}>
+          <Tab
+            borderRadius="0.5rem"
+            height="2rem"
+            width="15rem"
+            justifyContent={'flex-start'}
+          >
+            Placeholder
+          </Tab>
           <Tab
             borderRadius="0.5rem"
             height="2rem"
@@ -146,6 +154,71 @@ const App = () => {
           </Tab>
         </TabList>
         <TabPanels height={'20rem'}>
+          <TabPanel>
+            <Panel>
+              <>
+                <Section title="Button:">
+                  <Box>Using placeholder on button trigger</Box>
+                  <RangeDatepicker
+                    selectedDates={selectedDates}
+                    onDateChange={setSelectedDates}
+                    configs={{
+                      dateFormat: 'yyyy-MM-dd',
+                      dayNames: 'abcdefg'.split(''), // length of 7
+                      monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
+                    }}
+                    placeholder='Click to select a range date'
+                  />
+                </Section>
+                <Section title="Button (No fill):">
+                  <Box>Don't fill missing end range</Box>
+                  <RangeDatepicker
+                    selectedDates={selectedDates}
+                    onDateChange={setSelectedDates}
+                    configs={{
+                      dateFormat: 'yyyy-MM-dd',
+                      dayNames: 'abcdefg'.split(''), // length of 7
+                      monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
+                    }}
+                    placeholder='Click to select a range date'
+                    fillEmpty={false}
+                  />
+                </Section>
+
+                <Section title="Input:">
+                  <Box>Using placeholder on input</Box>
+                  <RangeDatepicker
+                    selectedDates={selectedDates}
+                    onDateChange={setSelectedDates}
+                    configs={{
+                      dateFormat: 'yyyy-MM-dd',
+                      dayNames: 'abcdefg'.split(''), // length of 7
+                      monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
+                    }}
+                    triggerVariant="input"
+                    placeholder='Click to select a range date'
+                  />
+                </Section>
+
+                <Section title="Input (No fill):">
+                  <Box>Don't fill missing end range</Box>
+                  <RangeDatepicker
+                    selectedDates={selectedDates}
+                    onDateChange={setSelectedDates}
+                    configs={{
+                      dateFormat: 'yyyy-MM-dd',
+                      dayNames: 'abcdefg'.split(''), // length of 7
+                      monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
+                    }}
+                    triggerVariant="input"
+                    placeholder='Click to select a range date'
+                    fillEmpty={false}
+                  />
+                </Section>
+              </>
+            </Panel>
+          </TabPanel>
+
           <TabPanel>
             <Panel>
               <Flex flexDir={'column'} gap={3} pb="5rem">
@@ -394,6 +467,7 @@ const App = () => {
                     dayNames: 'abcdefg'.split(''), // length of 7
                     monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
                   }}
+                  placeholder='Click to select a range date'
                 />
               </Section>
             </Panel>
diff --git a/src/range.tsx b/src/range.tsx
index af6dd72..26ed5e7 100644
--- a/src/range.tsx
+++ b/src/range.tsx
@@ -96,6 +96,8 @@ interface RangeProps extends DatepickerProps {
   name?: string;
   usePortal?: boolean;
   portalRef?: React.MutableRefObject<null>;
+  placeholder?: string;
+  fillEmpty?: boolean;
 }
 
 export type RangeDatepickerProps = RangeProps & VariantProps;
@@ -108,7 +110,8 @@ const DefaultConfigs: Required<DatepickerConfigs> = {
   monthsToDisplay: 2,
 };
 
-const defaultProps = {
+const defaultProps: Partial<RangeDatepickerProps> = {
+  fillEmpty: true,
   defaultIsOpen: false,
   closeOnSelect: true,
   triggerVariant: 'default' as const,
@@ -132,6 +135,8 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
     disabled,
     children,
     triggerVariant,
+    placeholder,
+    fillEmpty
   } = mergedProps;
 
   // chakra popover utils
@@ -186,13 +191,20 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
     }
   };
 
-  // eventually we want to allow user to freely type their own input and parse the input
-  let intVal = selectedDates[0]
-    ? `${format(selectedDates[0], datepickerConfigs.dateFormat)}`
-    : `${datepickerConfigs.dateFormat}`;
-  intVal += selectedDates[1]
-    ? ` - ${format(selectedDates[1], datepickerConfigs.dateFormat)}`
-    : ` - ${datepickerConfigs.dateFormat}`;
+  let intVal = null;
+
+  if (selectedDates?.filter(x => x).length) {
+    // eventually we want to allow user to freely type their own input and parse the input
+    intVal = selectedDates[0]
+      ? `${format(selectedDates[0], datepickerConfigs.dateFormat)}`
+      : `${datepickerConfigs.dateFormat}`;
+  
+    intVal += selectedDates[1]
+        ? ` - ${format(selectedDates[1], datepickerConfigs.dateFormat)}`
+        : fillEmpty
+        ? ` - ${datepickerConfigs.dateFormat}`
+        : '';
+  }
 
   const PopoverContentWrapper = usePortal ? Portal : React.Fragment;
 
@@ -217,7 +229,10 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
             disabled={disabled}
             {...propsConfigs?.triggerBtnProps}
           >
-            {intVal}
+            {
+              // Use placehold or empty string as default value
+              intVal ?? placeholder
+            }
           </Button>
         </PopoverTrigger>
       ) : null}
@@ -237,6 +252,7 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
               paddingRight={'2.5rem'}
               isDisabled={disabled}
               name={name}
+              placeholder={placeholder}
               value={intVal}
               onChange={(e) => e.target.value}
               {...propsConfigs?.inputProps}