Shadcn-time-range-picker NPM

TimeRangePicker

A flexible and customizable time range picker component built with React and shadcn/ui. This component allows users to select a start and end time from a list of predefined time options, with extensive customization options.

Features

Select start and end times from a predefined list.
Optional automatic sorting of start and end times.
Customizable initial start and end times.
Adjustable time step for generating time options.
Optional Apply button with full customization support.
Flexible layout options (row or column).
Customizable labels and placeholders for start and end time selects.
Built with shadcn/ui components for a consistent and elegant UI.
TypeScript support for improved type safety and developer experience.
Improved button customization with full support for shadcn/ui Button props.

Installation

You can install the TimeRangePicker package via npm:

npm install shadcn-time-range-picker

GitHub Repository

https://github.com/fatihcaliss/shadcn-time-range-picker

Usage

Here's a simple example of how to use the TimeRangePicker component in your React application:

import React from "react";
import TimeRangePicker from "shadcn-time-range-picker";

const App = () => {
  const handleTimeRangeChange = (timeRange: string) => {
    console.log(`Selected time range: ${timeRange}`);
  };

  return (
    <div>
      <h1>Select a Time Range</h1>
      <TimeRangePicker
        initialStartTime="08:00"
        initialEndTime="17:00"
        onTimeRangeChange={handleTimeRangeChange}
        sort={true}
        showApplyButton={true}
        layout="row"
        startTimeLabel="Work Start"
        endTimeLabel="Work End"
        step={15}
        buttonProps={{
          variant: "outline",
          className: "font-semibold",
        }}
      />
    </div>
  );
};

export default App;

Props

The TimeRangePicker component accepts the following props:

Prop	Type	Default	Description
initialStartTime	string	"00:00"	The initial start time.
initialEndTime	string	"23:30"	The initial end time.
onTimeRangeChange	(timeRange: string) => void	undefined	Callback function that gets called when the time range changes.
sort	boolean	false	If true, automatically sorts the start and end times.
showApplyButton	boolean	true	If true, shows the Apply button.
layout	'row' \| 'column'	'row'	Layout of the component (row or column).
startTimeLabel	string	"Start Time"	Label for the start time select.
endTimeLabel	string	"End Time"	Label for the end time select.
startTimePlaceholder	string	"Select start time"	Placeholder for the start time select.
endTimePlaceholder	string	"Select end time"	Placeholder for the end time select.
step	number	30	Time step in minutes for generating time options.
applyButtonText	string	"Apply"	Button text
buttonProps	ButtonProps	undefined	Props to customize the Apply button (shadcn/ui Button props)
labelClassName	string	undefined	CSS class(es) to apply to the label elements

Example Usage

Basic Usage

<TimeRangePicker
  initialStartTime="08:00"
  initialEndTime="17:00"
  onTimeRangeChange={(timeRange) => console.log(timeRange)}
  sort={true}
/>

Advanced Usage with Customizations

<TimeRangePicker
  initialStartTime="09:00"
  initialEndTime="18:00"
  onTimeRangeChange={(timeRange) => console.log(timeRange)}
  sort={true}
  showApplyButton={true}
  layout="column"
  startTimeLabel="Shift Start"
  endTimeLabel="Shift End"
  startTimePlaceholder="Select shift start"
  endTimePlaceholder="Select shift end"
  step={15}
  labelClassName="text-primary font-bold"
  buttonProps={{
    variant: "secondary",
    size: "sm",
    className: "font-bold text-primary",
  }}
/>

Button Customization

The buttonProps prop allows full customization of the Apply button using shadcn/ui Button component props. This includes setting the variant, size, and adding custom classes. For example:

<TimeRangePicker
  // ... other props
  buttonProps={{
    variant: "outline",
    size: "sm",
    className: "font-semibold text-primary hover:bg-primary/10",
  }}
/>

Responsive Design

The TimeRangePicker component is designed to be responsive. When the layout prop is set to "row", it will automatically switch to a column layout on smaller screens for better mobile user experience.