import { DateTimePickerClassic } from 'datetime_picker_classic';

CalendarButton Component

Description

CalendarButton is a React component that displays a button with a calendar icon and label. On clicking the button, a dropdown panel opens, showing a CalendarPicker component for date selection. It supports customizable styles, icon colors, and disabling old dates. The component automatically closes the dropdown when the user clicks outside.

Features

Displays a button with customizable label and calendar icon color.

Opens a dropdown panel with a fully interactive CalendarPicker.

Supports disabling old dates via the disableOld prop.

Customizable dropdown size and styling via props.

Click outside auto-closes the dropdown.

Callback onDateTimeChange invoked when a date is selected from the calendar.

Usage Example

import React from 'react';
import { DateTimePickerClassic } from 'datetime_picker_classic';

function App() {
  return (
    <div style={{ marginLeft: '100px', marginTop: '100px' }}>
      <DateTimePickerClassic
        buttonLabel='Date Time Picker'
        iconColor='#FFA500'
        style={{ border: '1px solid #FFA500', color: '#FFA500' }}
        disableOld={true}
        onDateTimeChange={(e) => {
          // e example: { timestamp: 1764175860000 }
        }}
      />
    </div>
  );
}

export default App;

PROPS

| Prop | Type | Description | Default | | ---------------- | -------- | ---------------------------------------------------------- | --------------- | | buttonLabel | string | Text label on the button | 'Open Dropdown' | | iconColor | string | Color of the calendar icon on the button | '#000' | | onDateTimeChange | function | Callback triggered on date selection; receives date object | Required | | disableOld | boolean | Optionally disable selection of past dates in calendar | false | | style | object | Custom inline styles applied to the button | none |

License

MIT License