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: [email protected]

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.