Date Picker Component

Date Picker component that can be used to select date input from the user.

Props

Property	Type	Description
placeholder	string	The placeholder text displayed in the input field
value	Date	The value of the input field, as a Date object
onChange	(event: ChangeEvent`<HTMLInputElement>`) => void	The event handler for when the value of the input field changes
className	string	The CSS class name(s) applied to the input field
name	string	The name of the input field
disabled	boolean	Whether the input field is disabled or not
min	date	sets the minimum date
max	date	sets the maximum date

Usage

Here's an example of how to use the Date Picker component:

Functional Component

App.tsx

import React from 'react';
import './App.css';
import { DatePicker } from 'gbs-fwk-buildingBlock';
 
function App() {
  const [date, setDate] = useState();
  handleDateChange = (event) => {
    setDate(event.target.value);
  };
 
  return (
    <div className="App">
      <DatePicker
        placeholder="Date"
        onChange={this.handleDateChange}
        value={date}
      />
    </div>
  );
}
 
export default App;

Class Component

App.tsx

import React from 'react';
import './App.css';
import { DatePicker } from 'gbs-fwk-buildingblock';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: undefined,
    };
  }
 
  handleDateChange = (event) => {
    this.setState({ date: event.target.value });
  };
 
  render() {
    return (
      <div className="App">
        <DatePicker placeholder="Date" onChange={this.handleDateChange} />
      </div>
    );
  }
}
 
export default App;

Custom Button Dialog Box