Cosmo Picker

Cosmo Picker is a lightweight and highly customizable date picker designed for React applications.

New in 1.5.3 🥳

Custom Placeholder

You can now provide a custom placeholder text for the input field using the placeholder prop.

Example:

<CosmoPicker
  value={date}
  onChange={setDate}
  placeholder="Select your preferred date"
/>

Disable Date Input

Users can disable the date input using the disable prop.

Example:

<CosmoPicker value={date} onChange={setDate} disable={true} />

Installation

You can install the package via npm:

npm install cosmo-picker

You can also use yarn:

yarn add cosmo-picker

To use Cosmo Date Picker, make sure you have React and ReactDOM installed in your project. These are listed as peer dependencies, so you’ll need to install them separately if they are not already part of your project.

Below is a simple example of how to integrate Cosmo Date Picker into a React application.

import { useState } from 'react';
import { CosmoPicker } from 'cosmo-picker';

function App () {

  const [date, setDate] = useState('')

  return (
    <div>
      <CosmoPicker
        value={date}
        onChange={setDate}
      />
    </div>
  )
}

export default App

Configuration

The most basic usage of CosmoPicker is as follows:

<CosmoPicker value={date} onChange={setDate}/>

You need to provide a date value and an onChange function to handle updates. CosmoPicker operates on string-based values, so the date should be managed as a string in your state.

Props

| Property | Type | Default Value | Description | | ---------------------------- | -------- | ------------- | ------------------------------------------------------------------------------ | | value | string | '' | The current date value in string format. | | onChange | function | undefined | Callback function triggered when the date value changes. | | placeholder | string | "date" | The placeholder text displayed in the input field. | | disable | boolean | false | Disables the date input when set to true. | | icon | boolean | false | Displays an icon at the end of the input field when set to true. | | iconColor | string | black | Sets the color of calendar icon in the calendar. | | startYear | number | undefined | Defines the first selectable year in the calendar. | | endYear | number | undefined | Defines the last selectable year in the calendar. | | dayBorderRadius | string | '5px' | Specifies the border-radius of each day cell in the calendar view. | | inputWidth | string | '28rem' | Sets the width of the input field, allowing flexible customization. | | inputFontSize | string | '1rem' | Specifies the font size for the text displayed inside the input field. | | inputFontWeight | string | '400' | Defines the font weight for the text displayed inside the input field. | | inputBackgroundColor | string | 'white' | Sets the background color of the input field. | | inputTextColor | string | 'black' | Specifies the text color inside the input field. | | placeholderColor | string | '#9ca3af' | Sets the color of the placeholder text in the input field. | | calendarBackgroundColor | string | 'white' | Defines the background color of the calendar. | | calendarFontWeight | string | '600' | Specifies the font weight for text displayed in the calendar. | | yearBackgroundColor | string | '#f3f4f6' | Sets the background color for the year selection area. | | calendarTextColor | string | 'black' | Specifies the text color in the calendar. | | dayBackgroundColor | string | '#f3f4f6' | Sets the background color for individual day cells in the calendar. | | dayHoverColor | string | '#d1d5db' | Defines the hover color for individual day cells. | | yearHoverColor | string | '#d1d5db' | Sets the hover color for the year selection. | | selectedDayBackgroundColor | string | 'black' | Defines the background color for the selected day. | | selectedDayTextColor | string | 'white' | Specifies the text color for the selected day. | | arrowColor | string | 'black' | Sets the color of navigation arrows in the calendar. | | arrowHoverColor | string | '#e5e7eb' | Defines the hover color for navigation arrows. | | scrollBarColor | string | '#bbbbbb' | Sets the color of the scroll bar within the calendar. | | zIndex | number | 100 | Sets the z-index of the date picker to control its stacking order on the page. |

LICENSE

Copyright (c) 2024 Emirhan Körhan and individual contributors. Licensed under the MIT license, see LICENSE for the full license.