Merge pull request #86 from newrelic/date-time-picker

feat: date time picker

CHANGELOG.md

@@ -7,11 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- TimePicker component by [@amit-y](https://github.com/amit-y)
+
 ## [1.19.0] - 2023-12-18
 
 ### Added
 
-- TimePicker component by [@amit-y](https://github.com/amit-y)
+- DateTimePicker component by [@amit-y](https://github.com/amit-y)
 
 ## [1.18.0] - 2023-12-18
 

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/)

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

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;

src/components/date-time-picker/styles.scss

@@ -0,0 +1,5 @@
+.date-time-picker {
+ display: grid;
+ grid-template-columns: 96px 76px;
+ gap: 4px;
+ }

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';