react-ts-timeline-range-picker

This is an updated fork of @marenaud/react-timeline-range-slider

Installation

npm install @mblancodev/react-ts-timeline-range-picker

or

yarn add @mblancodev/react-ts-timeline-range-picker

Usage

Basic Example

import React from 'react';
import { startOfDay, endOfDay } from 'date-fns'
import { TimelineRangePicker } from '@mblancodev/react-ts-timeline-range-picker';

function App() {
  return (
    <div>
      <TimelineRangePicker
        value={[]}
        onChange={() => {}}
        timelineInterval={[startOfDay(new Date()), endOfDay(new Date())]} />
    </div>
  );
}

export default App;

Importing default styles

import React from 'react';
import { addDays } from 'date-fns'
import { TimelineRangePicker } from '@mblancodev/react-ts-timeline-range-picker';
import "@mblancodev/react-ts-timeline-range-picker/assets/main.css"

[...]

Advance example

import { DateValuesType } from "@mblancodev/react-ts-timeline-range-picker/dist/src/types";
import { TimelineRangePicker } from "@mblancodev/react-ts-timeline-range-picker";
import "@mblancodev/react-ts-timeline-range-picker/dist/assets/main.css";
import { startOfDay, endOfDay, addHours } from "date-fns";
import { DateTime } from "luxon";
import { useState } from "react";

export const RangeTestPage = () => {
  const now = new Date();

  const [value, setValue] = useState<DateValuesType>([
    addHours(now, 2).getTime(),
    addHours(now, 4).getTime(),
  ]);

  function handleChange(values: DateValuesType) {
    setValue(values);
  }

  const [start, end] = value.map((t) =>
    DateTime.fromJSDate(new Date(t)).toFormat("HH:mm")
  );

  return (
    <div className="container my-12 p-4">
      <p className="px-8 translate-x-24">
        Selected: {DateTime.fromJSDate(now).toFormat("LLL dd")} at {start} - {end}
      </p>
      <TimelineRangePicker
        step={30}
        value={value}
        disabledIntervals={[
          {
            start: addHours(startOfDay(now), 2),
            end: addHours(startOfDay(now), 3),
          },
        ]}
        onChange={handleChange}
        timelineInterval={[startOfDay(now), endOfDay(now)]}
      />
    </div>
  );
};

Expectations for the future

I intent to add the following features in the near future:

• Drag. For moving the whole range value without afectting only the start of end values

I'm open to suggestions since I only needed this component for a very specific use :)

API Reference

TimelineRangePicker(props) - Required

Parameter	Type	Description
timelineInterval	[Date, Date]	[date start, date end] for the timeline range
value	DateValuesType	Component controlled value
onChange	(value: DateValuesType) => void	onChange value handler

TimelineRangePicker(props) - Optional

Parameter	Type	Description
step	number	Defaults to 10
ticksCount	number	Ticks labels to show
mode	number	[Long description]
disabledIntervals	Array<{ start: Date; end: Date }>	Disabled slots inside the range
weekStartsOn	Day	Defaults to 0. Sunday to Saturday in numbers. Count starts at 0 just like in date-fns
onUpdateCallback	(p: { error: boolean; time: readonly Date[] }) => void	Functions like an onInput change event

Types

Type	Description
Date	new Date()
DateValuesType	number[]
ticksCount	number - Defaults to 48
mode	number
disabledIntervals	Array<{ start: Date; end: Date }>
weekStartsOn	Day - Defaults to 0
onUpdateCallback	(p: { error: boolean; time: readonly Date[] }) => void

Contributing

I'm open to contributions, I'm new when it comes to developing pkgs so I do expect pull requests for errors that I've not seem yet.

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

Specify the license. For example, if your package is licensed under the MIT license, you could add:

MIT License

Copyright (c) 2023 Manuel Blanco.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software.

Support

If you need help setting up the package or would like to recommend some future updates you can email me at: manblanco20@gmail.com

Changelog

• 0.0.1: Basic functionality. Display range dates, change values and non-update callback on errors if a disabledIntervals prop is given and value falls under those disabled slots.