From 41077aac63e62fa39bf06edc78405fe5e1109225 Mon Sep 17 00:00:00 2001
From: Amit Yathirajadasan <ayathirajadasan@newrelic.com>
Date: Mon, 18 Dec 2023 14:55:18 -0800
Subject: [PATCH] feat: date time picker

---
 CHANGELOG.md                                |  1 +
 README.md                                   |  3 +++
 src/components/date-time-picker/README.md   | 28 +++++++++++++++++++++
 src/components/date-time-picker/index.js    | 28 +++++++++++++++++++++
 src/components/date-time-picker/styles.scss |  5 ++++
 src/components/index.js                     |  1 +
 6 files changed, 66 insertions(+)
 create mode 100644 src/components/date-time-picker/README.md
 create mode 100644 src/components/date-time-picker/index.js
 create mode 100644 src/components/date-time-picker/styles.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ecd2617..90957e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - TimePicker component by [@amit-y](https://github.com/amit-y)
+- DateTimePicker component by [@amit-y](https://github.com/amit-y)
 
 ## [1.17.0] - 2023-12-14
 
diff --git a/README.md b/README.md
index 6cf82ac..2667947 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,9 @@ Component that displays a calendar to select a date
 ### [TimePicker](src/components/time-picker)
 Component to select time values
 
+### [DateTimePicker](src/components/date-time-picker)
+Component to select date/time
+
 ## Utilities
 
 ### [timeRangeToNrql](src/utils/time-range-to-nrql/)
diff --git a/src/components/date-time-picker/README.md b/src/components/date-time-picker/README.md
new file mode 100644
index 0000000..77cc594
--- /dev/null
+++ b/src/components/date-time-picker/README.md
@@ -0,0 +1,28 @@
+# DateTimePicker
+
+The `DateTimePicker` component is used to select a date/time value.
+
+## Usage
+
+To use the component, simply import and use:
+
+```jsx
+import React, { useState } from 'react';
+import { DateTimePicker } from '@newrelic/nr-labs-components';
+
+function MyComponent() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  return (
+    <div>
+      <DateTimePicker date={selectedDate} onChange={setSelectedDate} />
+    </div>
+  );
+}
+```
+### Props
+
+- date (date): The default date 
+- onChange (function): A function that is called when the user selects a date
+- validFrom (date): only allow date/times starting from the provided value
+- validTill (date): only allow date/times ending till the provided value
diff --git a/src/components/date-time-picker/index.js b/src/components/date-time-picker/index.js
new file mode 100644
index 0000000..7003735
--- /dev/null
+++ b/src/components/date-time-picker/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import DatePicker from '../date-picker';
+import TimePicker from '../time-picker';
+
+import styles from './styles.scss';
+
+const DateTimePicker = ({ datetime, validFrom, validTill, onChange }) => (
+  <div className={styles['date-time-picker']}>
+    <DatePicker date={datetime} onChange={onChange} validFrom={validFrom} />
+    <TimePicker
+      time={datetime}
+      validFrom={validFrom}
+      validTill={validTill}
+      onChange={onChange}
+    />
+  </div>
+);
+
+DateTimePicker.propTypes = {
+  datetime: PropTypes.instanceOf(Date),
+  validFrom: PropTypes.instanceOf(Date),
+  validTill: PropTypes.instanceOf(Date),
+  onChange: PropTypes.func,
+};
+
+export default DateTimePicker;
diff --git a/src/components/date-time-picker/styles.scss b/src/components/date-time-picker/styles.scss
new file mode 100644
index 0000000..87447cc
--- /dev/null
+++ b/src/components/date-time-picker/styles.scss
@@ -0,0 +1,5 @@
+.date-time-picker {
+  display: grid;
+  grid-template-columns: 96px 76px;
+  gap: 4px;
+ }
diff --git a/src/components/index.js b/src/components/index.js
index a1fc90a..891d6a8 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -10,3 +10,4 @@ export { default as ProgressBar } from './progress-bar';
 export { default as FilterBar } from './filter-bar';
 export { default as DatePicker } from './date-picker';
 export { default as TimePicker } from './time-picker';
+export { default as DateTimePicker } from './date-time-picker';