From 1eb038b94b81ff51f7ae841c1e69268edb8237fb Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Thu, 2 Jun 2022 17:19:22 -0400
Subject: [PATCH 01/14] [Input] Optimize `isValidOnBlur` regex algorithm.

---
 packages/date-picker/date-picker-input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/date-picker/date-picker-input.js b/packages/date-picker/date-picker-input.js
index 376df69..d8ad358 100644
--- a/packages/date-picker/date-picker-input.js
+++ b/packages/date-picker/date-picker-input.js
@@ -47,7 +47,7 @@ export const AmsDatePickerInput = ({
   const isValidOnBlur = () => {
     return (
       inputValue.length > 0
-      && !inputValue.match(/^\d{1,2}\/\d{1,2}\/\d{4}, \d{1,2}:\d{2}(?::\d{2})? (?:AM|PM)?$/)
+      && inputValue.match(/^\d{1,2}\/\d{1,2}\/\d{4},? \d{1,2}:\d{2}(?::\d{2})? ?(?:AM|PM)?$/)
     );
   };
 

From 6fc3f859ce5c001a1a745a26a97fd9d7f7fa0530 Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Fri, 3 Jun 2022 16:36:30 -0400
Subject: [PATCH 02/14] [Input] Finish basic input integration.

---
 packages/date-picker/date-picker-input.js | 22 ++++++++++++++++++----
 packages/support/date.js                  |  4 ++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/date-picker/date-picker-input.js b/packages/date-picker/date-picker-input.js
index d8ad358..d29fdfd 100644
--- a/packages/date-picker/date-picker-input.js
+++ b/packages/date-picker/date-picker-input.js
@@ -3,7 +3,11 @@ import { styled } from '@stitches/react';
 import { parseDate } from './processor.js';
 import { dateOptions } from '../support/date.js';
 
-const AmsDatePickerInputContainer = styled('input', {});
+const AmsDatePickerInputContainer = styled('input', {
+  outline: 'none',
+  border: 'none',
+  backgroundColor: 'transparent',
+});
 
 export const AmsDatePickerInput = ({
   className,
@@ -16,13 +20,18 @@ export const AmsDatePickerInput = ({
   onKeyPress,
   onFocus,
   onBlur,
+  dateOption = dateOptions,
   onShouldOpenSelector,
   onShouldCloseSelector,
 }) => {
-  const [inputValue, setInputValue] = useState(value);
+  const [inputValue, setInputValue] = useState('');
 
   useEffect(() => {
-    setInputValue(value.toLocaleString('en-US', dateOptions));
+    if (value) {
+      setInputValue(value.toLocaleString('en-US', dateOption));
+    } else {
+      setInputValue('');
+    }
   }, [value]);
 
   // This function is a callback when the input is finished by user (on finalizing or on blurring).
@@ -34,7 +43,11 @@ export const AmsDatePickerInput = ({
         onChange(parsedDate);
       }
     } catch (e) {
-      onError(e); // Return error.
+      if (onError) {
+        onError(e); // Return error.
+      } else {
+        console.error('ams:', e); // Log error.
+      }
     }
   };
 
@@ -57,6 +70,7 @@ export const AmsDatePickerInput = ({
       className={`ams-date-picker-input ${className ?? ''}`}
       id={id ?? 'ams-date-picker-input'}
       css={style}
+      value={inputValue}
       onChange={(e) => {
         setInputValue(e.target.value);
       }}
diff --git a/packages/support/date.js b/packages/support/date.js
index 5139543..fa2c49b 100644
--- a/packages/support/date.js
+++ b/packages/support/date.js
@@ -1,7 +1,7 @@
 export const dateOptions = {
   year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
   weekday: undefined,
   hour: 'numeric',
   minute: 'numeric',

From afbc72244d3af3ea19204080874305b932de8523 Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Fri, 3 Jun 2022 16:36:44 -0400
Subject: [PATCH 03/14] [Headful] Finish the base of headful component and its
 integration.

---
 packages/date-picker/date-picker.js | 94 +++++++++++++++++------------
 1 file changed, 56 insertions(+), 38 deletions(-)

diff --git a/packages/date-picker/date-picker.js b/packages/date-picker/date-picker.js
index 05b6248..0807395 100644
--- a/packages/date-picker/date-picker.js
+++ b/packages/date-picker/date-picker.js
@@ -1,83 +1,101 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { AmsDatePickerInput } from './date-picker-input';
+import { Layout } from './layout-support.js';
+import { AmsDesign } from '../support/standards.js';
 
 /**
  * [Ams] (WIP) Magic Date Picker Component.
  *
+ * @param {string|undefined} className
  * @param {string|undefined} id
- * @param {string} label
  * @param {Date|undefined} value
  * @param {function} onChange
- * @param {string|null} hint
- * @param {string|null} error
  * @param {Date|undefined} baseDate
+ * @param {object} layoutStyle
+ * @param {object} style
+ * @param {any} props
  * @return {JSX.Element}
  */
 export const AmsDatePicker = ({
+  className,
   id = 'ams-date-picker',
-  label,
   value,
   onChange,
-  hint,
-  error,
   baseDate,
+  layoutStyle,
+  style,
+  ...props
 }) => {
   // Date picker value state.
-  const [valueState, setValueState] = useState(null);
+  const [valueState, setValueState] = useState(value);
 
   // Date picker open state.
   const [isOpen, setIsOpen] = useState(false);
 
-  // Date picker hint state.
-  const [hintState, setHintState] = useState(null);
-
-  // Date picker input field error state.
-  const [errorState, setErrorState] = useState(null);
-
-  // Date picker anchor element.
-  const boxRef = useRef(null);
-
   const handlePopoverClose = () => {
     setIsOpen(false);
   };
 
-  // Update hint state when hint prop changes.
-  useEffect(() => {
-    if (hint) {
-      setHintState(hint);
-    }
-  }, [hint]);
-
-  // Update error state when error prop changes.
-  useEffect(() => {
-    if (error) {
-      setErrorState(error);
-    }
-  }, [error]);
-
   // Process the datepicker value into input value.
   useEffect(() => {
     if (valueState) {
-      setHintState(null);
-      setErrorState(null);
       if (onChange) {
         // Call the onChange callback with Date object.
         // It will always be called nevertheless it is inputted by typing or selecting.
         onChange(valueState);
+      } else {
+        console.warn('ams:', 'onChange callback is not defined.');
+        console.log('ams:', 'valueState:', valueState);
       }
     }
   }, [valueState]);
 
   return (
-    <div
-      style={{
+    <Layout
+      id={id}
+      css={{
         width: '100%',
+        height: '42px',
         display: 'flex',
-        flexDirection: 'column',
+        flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
+        position: 'relative',
+        borderRadius: '$md',
+        border: '0.5px solid $gray5',
+        backgroundColor: '$gray1',
+        transition: AmsDesign.transition.cubic,
+        '&:hover': {
+          backgroundColor: '$white',
+          border: '0.5px solid $gray7',
+        },
+        '&:focus-within': {
+          backgroundColor: '$white',
+          boxShadow: '$md',
+        },
+        overflow: 'hidden',
+        ...layoutStyle,
       }}
     >
-      {/* TODO */}
-    </div>
+      {/* TODO: Replenish necessary APIs */}
+      <AmsDatePickerInput
+        className={className}
+        id={`${id}-input`}
+        value={valueState}
+        baseDate={baseDate}
+        onChange={(value) => {
+          setValueState(value);
+        }}
+        style={{
+          width: '100%',
+          height: '100%',
+          padding: '10px 14px',
+          fontSize: '$lg',
+          fontWeight: '400',
+          ...style,
+        }}
+        {...props}
+      />
+    </Layout>
   );
 };

From 6bd578a8f085f0a675abe77ff96f2a7b2aed6438 Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Fri, 3 Jun 2022 16:37:01 -0400
Subject: [PATCH 04/14] [UserManual] Optimize the default icon.

---
 packages/user-manual/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/user-manual/index.js b/packages/user-manual/index.js
index 4b55278..87eb7a4 100644
--- a/packages/user-manual/index.js
+++ b/packages/user-manual/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@stitches/react';
 import * as Dialog from '@radix-ui/react-dialog';
-import { IconQuestionMark } from '@tabler/icons';
+import { IconHelp, IconQuestionMark } from '@tabler/icons';
 
 import { AmsDesign } from '../support/standards.js';
 
@@ -71,7 +71,9 @@ export const AmsUserManual = ({ style, children }) => {
         css={style}
       >
         {children ?? (
-          <IconQuestionMark size={24} />
+          <IconHelp size={17} strokeWidth={2.1} style={{
+            marginBottom: -2,
+          }}/>
         )}
       </UMTrigger>
       <Dialog.Portal>

From 069c42478c1a08b387091696dd68bd7dbdc8f87e Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Fri, 3 Jun 2022 16:37:14 -0400
Subject: [PATCH 05/14] [General] Fix global css font family issue.

---
 styles/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/globals.css b/styles/globals.css
index b5e1b2d..095926d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -26,7 +26,7 @@ a:hover {
     text-decoration: none;
 }
 
-button {
+* {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Helvetica Neue, sans-serif;
 }

From 7206586ec49f347fdb8179fab6c40709dd06712a Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Fri, 3 Jun 2022 16:37:47 -0400
Subject: [PATCH 06/14] [Website] Update demo.

---
 pages/_document.js |  5 ++--
 pages/index.js     | 60 +++++++++++++++++++++++++++++++++++++---------
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/pages/_document.js b/pages/_document.js
index 53b6ab8..b96800f 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -3,11 +3,10 @@ import { Html, Head, Main, NextScript } from 'next/document';
 import { getCssText } from '../packages/support/stitches.config';
 
 const AmsExampleDocument = () => {
-  const styles = getCssText();
   return (
     <Html>
       <Head>
-        <style id="stitches" dangerouslySetInnerHTML={{ __html: styles }} />
+        <style id="stitches" dangerouslySetInnerHTML={ { __html: getCssText() } } />
         <link
           rel="preconnect"
           href="https://fonts.googleapis.com"
@@ -17,7 +16,7 @@ const AmsExampleDocument = () => {
           href="https://fonts.gstatic.com"
         />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Fira+Code&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap"
           rel="stylesheet"
         />
         <link
diff --git a/pages/index.js b/pages/index.js
index a795957..05c8240 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -10,6 +10,8 @@ import { AmsWebsiteStandards } from '../support/website-standards';
 import { IconCopy, IconLivePhoto } from '@tabler/icons';
 import { getHeadTitle } from '../support/head';
 import { Layout } from '../components/layout';
+import { AmsDatePicker } from '../packages/date-picker/date-picker';
+import { isInDaylightSavingConflictTime } from '../packages/date-picker/processor';
 
 const HeroTitleTag = styled('div', {
   fontSize: '14px',
@@ -95,7 +97,7 @@ const SectionTitle = styled('div', {
 });
 
 export default function Home() {
-  const [date, setDate] = useState(moment('11/07/2021 1:00 AM'));
+  const [date, setDate] = useState(moment());
 
   return (
     <div
@@ -242,28 +244,64 @@ export default function Home() {
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
-              justifyContent: 'center',
+              justifyContent: 'flex-start',
               rowGap: 30,
+              paddingTop: 70,
             }}
           >
             <div
               style={{
                 width: '100%',
-                maxWidth: '300px',
                 display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
+                flexDirection: 'row',
+                alignItems: 'flex-start',
                 justifyContent: 'center',
+                columnGap: 20,
               }}
             >
-              <AmsDateConflictResolver
-                date={date.toDate()}
-                onChange={(newDate) => {
-                  setDate(moment(newDate));
+              <Layout
+                css={{
+                  height: 40,
+                  flexShrink: 0,
+                  fontSize: '$md',
+                  fontWeight: '500',
+                  lineHeight: '40px',
+                  textAlign: 'right',
+                  letterSpacing: '-0.01em',
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  columnGap: 1,
+                }}
+              >
+                <span>Departure Date</span>
+                <AmsUserManual />
+              </Layout>
+              <div
+                style={{
+                  width: 300,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  rowGap: 10,
                 }}
-              />
+              >
+                <AmsDatePicker
+                  value={date.toDate()}
+                  onChange={(newDate) => setDate(moment(newDate))}
+                />
+                {isInDaylightSavingConflictTime(date.toDate()) && (
+                  <AmsDateConflictResolver
+                    date={date.toDate()}
+                    onChange={(newDate) => {
+                      setDate(moment(newDate));
+                    }}
+                  />
+                )}
+              </div>
             </div>
-            <AmsUserManual />
           </div>
         </div>
         <SectionContainer

From 5c2b2933eefb60c01f74f9cdeeaf1bb40599b99f Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Fri, 3 Jun 2022 16:38:03 -0400
Subject: [PATCH 07/14] [Stitches] Optimize shadow based on design prototype.

---
 packages/support/stitches.config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/support/stitches.config.js b/packages/support/stitches.config.js
index fd17606..401814b 100644
--- a/packages/support/stitches.config.js
+++ b/packages/support/stitches.config.js
@@ -30,9 +30,9 @@ export const {
       black: '#000',
     },
     shadows: {
-      'sm': '0 5px 6px 0 rgba(0, 0, 0, 0.03)',
-      'md': '0 6px 8px 0 rgba(0, 0, 0, 0.03)',
-      'lg': '0px 10px 16px rgba(0, 0, 0, 0.03)',
+      'sm': '0 4px 10px 0 rgba(0, 0, 0, 0.03)',
+      'md': '0 6px 14px 0 rgba(0, 0, 0, 0.03)',
+      'lg': '0px 10px 20px rgba(0, 0, 0, 0.03)',
     },
     fontSizes: {
       'xxs': '11px',

From 7ca4cc1a6e8589874af1b7729eb1efece68d2414 Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Fri, 3 Jun 2022 23:40:31 -0400
Subject: [PATCH 08/14] [Input] Accept wild props.

---
 packages/date-picker/date-picker-input.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/date-picker/date-picker-input.js b/packages/date-picker/date-picker-input.js
index d29fdfd..12ff3cf 100644
--- a/packages/date-picker/date-picker-input.js
+++ b/packages/date-picker/date-picker-input.js
@@ -23,6 +23,7 @@ export const AmsDatePickerInput = ({
   dateOption = dateOptions,
   onShouldOpenSelector,
   onShouldCloseSelector,
+  ...props
 }) => {
   const [inputValue, setInputValue] = useState('');
 
@@ -97,6 +98,10 @@ export const AmsDatePickerInput = ({
           onBlur(e);
         }
       }}
+      {
+        ...props
+        // TODO: Handle potential conflicts with props.
+      }
     />
   );
 };

From 9ff1b3748ada15f9578d74eca1f6377cbfa6fca6 Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Sat, 4 Jun 2022 22:50:21 -0400
Subject: [PATCH 09/14] [Website] Fix a little demo gap.

---
 pages/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.js b/pages/index.js
index 05c8240..003ec08 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -256,7 +256,7 @@ export default function Home() {
                 flexDirection: 'row',
                 alignItems: 'flex-start',
                 justifyContent: 'center',
-                columnGap: 20,
+                columnGap: 15,
               }}
             >
               <Layout

From ac180392cb2dad11275bad02f2f3b1bb3776759b Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Sat, 4 Jun 2022 22:52:43 -0400
Subject: [PATCH 10/14] [General] Adjust global font style.

---
 pages/index.js     | 2 +-
 styles/globals.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 003ec08..75e9442 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -36,7 +36,7 @@ const HeroSubtitle = styled('div', {
 });
 
 const InstallCommandBox = styled('div', {
-  fontFamily: 'Fira Code, monospace',
+  fontFamily: '"Fira Code", monospace',
   fontSize: '14px',
   fontWeight: '500',
   color: AmsDesign.color.black,
diff --git a/styles/globals.css b/styles/globals.css
index 23eb943..7c8a303 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -29,7 +29,7 @@ a:hover {
     text-decoration: none;
 }
 
-* {
+*:not(code) {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Helvetica Neue, sans-serif;
 }

From b6b1834de165355850c0c9248c557c15d26940ec Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Sat, 4 Jun 2022 22:55:00 -0400
Subject: [PATCH 11/14] [Website] Fix install command style.

---
 pages/index.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 75e9442..7ed6eef 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -36,7 +36,9 @@ const HeroSubtitle = styled('div', {
 });
 
 const InstallCommandBox = styled('div', {
-  fontFamily: '"Fira Code", monospace',
+  '& code': {
+    fontFamily: '"Fira Code", monospace',
+  },
   fontSize: '14px',
   fontWeight: '500',
   color: AmsDesign.color.black,
@@ -323,9 +325,9 @@ export default function Home() {
             </p>
           </SectionTitle>
           <InstallCommandBox>
-            <span>
+            <code>
               npm install ams-date-picker
-            </span>
+            </code>
             <InstallCommandCopyButton
               width={20}
               height={20}
@@ -336,9 +338,9 @@ export default function Home() {
             />
           </InstallCommandBox>
           <InstallCommandBox>
-            <span>
+            <code>
               yarn add ams-date-picker
-            </span>
+            </code>
             <InstallCommandCopyButton
               width={20}
               height={20}

From a88e97c7be570094f23d2b252cc6c725513930b2 Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Sat, 4 Jun 2022 22:57:17 -0400
Subject: [PATCH 12/14] [General] Remove IBM Plex Sans.

---
 styles/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/globals.css b/styles/globals.css
index 7c8a303..25592d6 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css2?family=Fira+Code&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Fira+Code&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);
 
 html {

From 950195bef1fa88c380e28080db63d782acd80e9b Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Mon, 6 Jun 2022 23:05:29 -0400
Subject: [PATCH 13/14] [Dark] Change the dark theme name to `dark`.

---
 packages/support/stitches.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/support/stitches.config.js b/packages/support/stitches.config.js
index 401814b..8c3d37b 100644
--- a/packages/support/stitches.config.js
+++ b/packages/support/stitches.config.js
@@ -68,7 +68,7 @@ export const {
   },
 });
 
-export const amsDarkTheme = createTheme('ams-dark-theme', {
+export const amsDarkTheme = createTheme('dark', {
   colors: {
     ...grayDark,
     ...blueDark,

From 6d2daa4e4ff20792cfd2831730a4926a8c4e7f3b Mon Sep 17 00:00:00 2001
From: Lingxi Li <lilingxi01@gmail.com>
Date: Mon, 6 Jun 2022 23:05:43 -0400
Subject: [PATCH 14/14] [Input] Code cleanup.

---
 packages/date-picker/date-picker-input.js | 34 +++++++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/date-picker/date-picker-input.js b/packages/date-picker/date-picker-input.js
index 12ff3cf..b5ca2a2 100644
--- a/packages/date-picker/date-picker-input.js
+++ b/packages/date-picker/date-picker-input.js
@@ -9,6 +9,24 @@ const AmsDatePickerInputContainer = styled('input', {
   backgroundColor: 'transparent',
 });
 
+/**
+ * [Ams] The headless date picker component.
+ * @param {string} className
+ * @param {string} id
+ * @param {object} style
+ * @param {any} value
+ * @param {any} baseDate
+ * @param {function} onChange - Callback function to be called when the date is changed (only when finalized).
+ * @param {function} onError - Callback function when the error is occurring in user's input (neither functionality error nor development error).
+ * @param {function} onKeyPress
+ * @param {function} onFocus
+ * @param {function} onBlur
+ * @param {object} dateOption - (TBD) The date option for formatting the date.
+ * @param {function} onShouldOpenSelector
+ * @param {function} onShouldCloseSelector
+ * @param {any} props
+ * @return {JSX.Element}
+ */
 export const AmsDatePickerInput = ({
   className,
   id,
@@ -47,14 +65,15 @@ export const AmsDatePickerInput = ({
       if (onError) {
         onError(e); // Return error.
       } else {
-        console.error('ams:', e); // Log error.
+        console.error('AmsDatePicker:', e); // Log error.
       }
     }
   };
 
-  // This function is used to handle the close action of the date selector.
-  const handleCloseDateSelector = () => {
-    // TODO.
+  // This function is used to handle the close action of the date selector or the blur action of input.
+  const handleEscape = () => {
+    // TODO: Blur the input when needed.
+    // TODO: Call back the onShouldCloseSelector callback with some conditions.
   };
 
   // This function should be called to determine if we should finish the input on blur.
@@ -65,7 +84,7 @@ export const AmsDatePickerInput = ({
     );
   };
 
-  // TODO: Make the input element style-less.
+  // This input element is style-less.
   return (
     <AmsDatePickerInputContainer
       className={`ams-date-picker-input ${className ?? ''}`}
@@ -79,6 +98,9 @@ export const AmsDatePickerInput = ({
         if (e.key === 'Enter') {
           onInputFinish(inputValue);
         }
+        if (e.key === 'Escape') {
+          handleEscape();
+        }
         if (onKeyPress) {
           onKeyPress(e);
         }
@@ -90,7 +112,7 @@ export const AmsDatePickerInput = ({
         }
       }}
       onBlur={(e) => {
-        // TODO: Determine if we should close the data selector.
+        // Determine if we should close the data selector.
         if (isValidOnBlur()) {
           onInputFinish(inputValue);
         }