samsam-ahmadi/react-trip-date

It's a fully customizable Date/Range picker for ReactJS.

React-Trip-Date ·

A fully customizable Date/Range picker for your React applications.

• Theme (Compatible with your Material-UI theme ), Multiple Month, Auto Responsive
• Support Jalali & Gregorian
• Using Day.js (2KB immutable date and NO more need moment.js)

Demo

Online demo is also available! you can run demo on your local with:

• git clone https://github.com/samsam-ahmadi/react-trip-date.git
• cd react-trip-date
• yarn && yarn storybook
• Visit http://localhost:9009/

Getting started

Compatibility

Your project needs to use React 16 or later. If you use older version of React.

Installation

npm install react-trip-date

yarn add react-trip-date

User guide

APIs

For Date Picker and Range Picker.

special thanks to:

• @amiiiirhassan
• @mpourismaiel
• @salehbud

Contributors

Feel free to contribute.

License

The GNU GPLv3 License.

react-trip-date's Issues

[Feature]

Problem

• Localization
  Allow the calendar to set language
• No start of the week. Only format the week headings
• No option to set the format of Month year heading (Month - Year)

Solution

• Add props for months, weeks for desired language (defaults to English)
  --For instance in Finnish, I will just pass the array of Months and Weeks that could be one
  --Or have an array of months and years of common languages use
• Add props for start of the week (defaults to Sunday)
• Add props for month and year display format (set default to Month-Year)

Community Benefits

It will be use to apply their use-case.

[Feature] prop that doesnt allow users to choose more than 14days))

Problem

**Do you have a prop in Range Picker that doesn't allow users to choose more than for example - 3weeks. If not is it possible to create such prop? I noticed smt like that in Date picker Component - numberOfSelectableDays. **

Problem associated with leap year

Hello
As you have used dayjs library and jalaliday plugin, do you know how to fix the issue in jalaliday plugin?

This Issue
alibaba-aero/jalaliday#36

[BUG] `react-scripts` causing security audit errors

The current version of react-scripts (4.0.3) is causing security audit errors (npm audit)

Expected Behavior

No errors are shown from npm audit (due to this package)

Current Behavior

npm audit is outputting security errors. Here's an example of one (getting 7 from this package total)

ansi-html  <=0.0.7
Severity: high
Uncontrolled Resource Consumption in ansi-html - https://github.com/advisories/GHSA-whgm-jr23-g3j9
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/ansi-html
  @pmmmwh/react-refresh-webpack-plugin  <=0.5.0-rc.6
  Depends on vulnerable versions of ansi-html
  node_modules/react-trip-date/node_modules/@pmmmwh/react-refresh-webpack-plugin
    react-scripts  >=0.10.0-alpha.328cb32e
    Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
    Depends on vulnerable versions of @svgr/webpack
    Depends on vulnerable versions of optimize-css-assets-webpack-plugin
    Depends on vulnerable versions of react-dev-utils
    Depends on vulnerable versions of webpack
    Depends on vulnerable versions of webpack-dev-server
    node_modules/react-scripts
    node_modules/react-trip-date/node_modules/react-scripts
      react-trip-date  >=1.1.0
      Depends on vulnerable versions of react-scripts
      node_modules/react-trip-date
  webpack-dev-server  2.0.0-beta - 4.7.2
  Depends on vulnerable versions of ansi-html
  Depends on vulnerable versions of chokidar
  Depends on vulnerable versions of selfsigned
  Depends on vulnerable versions of yargs
  node_modules/react-trip-date/node_modules/webpack-dev-server

Possible Solutions

There are a few:

• The fastest solution is to make react-scripts a dev-dependency. This isn't perfect because react-scripts is meant to be a dependency due to included pollyfills facebook/create-react-app#2696

• Update react-scripts to v 5.0.0 . This is actually a huge pain facebook/create-react-app#11756 and there are no guarantees this issue won't happen in the future

• Really the best solution is to remove this dependency altogether. I'm actually not entirely sure why it's needed but this may take some work and project reorganization

Your Environment

• React Version: 17.0.2
• npm Version: 8.5.2

Additional Comments

None of the other packages in my react project currently are using react-scripts as a dependency
Also - I love this library 😄

[BUG] while numberOfSelectableDays=1, handleChange is not working

Hi, When I set numberOfSelectableDays=1, handleChange is not working.

handleChange = date => {
console.log(date)
}

no date will be recorded

[BUG] - numberOfMonths prop on RangePicker doesn't do anything.

Expected Behavior

numberOfMonths: number should display only the specified number of months

Current Behavior

The same number of months( about 6 or 7 ) depending on page width I think is being displayed.

Possible Solution

Your Environment

• React Version: ^16.13

Additional Comments

See the faulty behavior here: https://killthejs.com/react-trip-date/?path=/story/range-picker-component--all-props
No matter how you change that prop, the number of months stays the same.

[BUG] - Setting startOfWeek={1} on <RangePicker /> creates an extra empty row at the beginning of the month

Add props to change the name of the month[Feature]

Problem

I faced the problem when I was dealing with my german client and they wanted the feature where instead of showing January, February, it should be Januar, Februar, März so on. Although I could change the title of the week, not the month

Solution

A similar prop like titleOfWeek, there should be titleOfMonth and we can pass the array

Community Benefits

People who have different name of their month will be able to use this package as well

[BUG] Range picker has 2 icons when selecting a specific month

Range picker

Expected Behavior

should have 1 icon on each side

Current Behavior

when selecting a specific month, there are 2 icons instead on 1

Additional Comments

[BUG] Ios safari range dates

Ios safari to date not being selected on first click

Expected Behavior

when from date is selected, on selected to date should be selected

Current Behavior

to date is not being selected unless clicked twice only on IOS

https://gyazo.com/894f992226d0021d14480c50da65d3ea

Your Environment

• React Version: ^17.0.1
• Iphone 12 Pro Max ios 14.5
• Safari

[Feature] Header months are unknown

Problem

is there a way to know which month is selected in the header ?

[BUG] Range Picker Doesn't Highlights The Dates Between Selected Date Range

Expected Behavior

When user selects a start date from range picker and moves to select the end date. It should highlight the intermediate date nodes.

Current Behavior

Dates between the dates selected are not highlighted.

Possible Solution

Your Environment

React 16.9.0
Next 9,0.4

theme is not exported from react-trip-date

[BUG] RangePicker does not allow selecting of a range covering some disabled days

Expected Behavior

I wish to use the Range Picker to select a start day and end date. Check-ins and Check-outs must be Saturdays, so disabledDays is populated such that it includes all dates which are not Saturdays.

I expect to be able to select the range of my choice.

Current Behavior

Selecting the start date is fine, but when selecting the end date, the onChange event fires with a "to" value the same as "from" (i.e. it appears to be clamped to the first non-disabled day).

Possible Solution

The Range Picker shouldn't clamp the output to disabledDays and return the to value the user chose.

Your Environment

• React Version: 16.14

Additional Comments

Simple reproduction case:

<RangePicker
          numberOfMonths={1}
          initialMonthAndYear="2021-08"
          onChange={(dates) => window.console.log(dates)}
          disabledDays={['2021-08-01','2021-08-02','2021-08-03','2021-08-04','2021-08-05','2021-08-06','2021-08-08','2021-08-09','2021-08-10','2021-08-11','2021-08-12','2021-08-13','2021-08-15','2021-08-16','2021-08-17','2021-08-18','2021-08-19','2021-08-20','2021-08-22','2021-08-23','2021-08-24','2021-08-25','2021-08-26','2021-08-27','2021-08-29','2021-08-30','2021-08-31']}
        />

If you select, e.g. the 7th August, and then select 14th of August as the end date, the onChange event will return log Object { from: "2021-08-07", to: "2021-08-07" }, i.e. starting and ending on the 7th. I've done more extensive testing allowing a few days to be non-disabled after the start date and it does set the "to" value to be as long as possible up to the first non-disabled date.

I presume this is a valid use case for "disabledDays" (the meaning of them being "disabled" changes slightly after the start day has been selected - it can (as in this case) mean an invalid choice of end date, rather than something which cannot be spanned)

Thanks for the awesome component BTW :-)

[BUG]Wrong export index.ts

hi
export { default as DatePicker } from './calendar/date-picker';
export { default as RangePicker } from './calendar/date-picker'; // <------- must be export { default as RangePicker } from './calendar/range-picker'
...
becuase of this, RangePicker doesn't work.

Vanilla JS

Hi Samsam,
Is there any version of this library that does not have the ReactJS dependency? (Just use vanilla Js)

If not:
1- Do you have a plan to do this?
2- Do you have a vanilla date range picker that does not any dependency (like jquery or react and etc)? (another library)

Thanks.

[Feature] react 18 support

Hello @samsam-ahmadi, could you please add react 18 support?

If there are no issues at all, should be enough to add it to the peer dependency

current warnings:
warning " > [email protected]" has incorrect peer dependency "react@^17.0.1".
warning " > [email protected]" has incorrect peer dependency "react-dom@^17.0.1".
warning "react-trip-date > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".

[Feature] add min range

Problem

it's almost impossible to create a custom function that handles both start and end date on the range calendar

Solution

add min range prop to calendar or return selected from & to on the onChange prop

Community Benefits

be able to use calendar to set a minimum range of days

[BUG] mouse hover effect on range picker

Expected Behavior

on range date picker, on 1st onClick on date, the mouse hover effect should stay on the day we clicked before mouseLeave

Current Behavior

When I click on a day, a selection of days has a mouse hover effect

Possible Solution

no idea

Your Environment

Mac os 11.4 - Chrome
React 17.1
next 10.3

Additional Comments

https://gyazo.com/fc2916dd34f3dcd120ae1c9874764515

[BUG] Can't resolve 'jalaliday'

When the library version was updated from 1.12.1 to 1.13.0 the build is failed with the error

Expected Behavior

success build

Current Behavior

build is failed with the next error
Module not found: Error: Can't resolve 'jalaliday' in '/var/jenkins_home/src/Common/components/react-trip-date/libs'

Your Environment

• React Version: 18

Additional Comments

I've tried to do clean up installation removing yarn.lock and generate it again, but it doesn't work.
I don't see anything about jalaliday in the changelog, but I've noticed that the dependency was removed in 1.13.0