This is an updated fork of @marenaud/react-timeline-range-slider
npm install @mblancodev/react-ts-timeline-range-picker
or
yarn add @mblancodev/react-ts-timeline-range-picker
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;
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"
[...]
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>
);
};
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 :)
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 |
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 |
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 |
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.
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.
If you need help setting up the package or would like to recommend some future updates you can email me at: manblanco20@gmail.com
- 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.