kush-agra / react-horizontal-datepicker Goto Github PK

View Code? Open in Web Editor NEW

30.0 1.0 34.0 3.56 MB

React Horizontal Date Picker

License: MIT License

HTML 1.29% JavaScript 81.64% CSS 17.07%

react-horizontal-datepicker's Introduction

react-horizontal-datepicker

V2 with new logic and completely removing dependency on react-waypoint as well as leaner code which now uses css-modules

A simple and lightweight easily style-able Side scrolling datepicker, built with ❤️

Bundle size of 469 Bytes Minified + Gzipped

Installation

Run yarn add react-horizontal-datepicker or Run npm i react-horizontal-datepicker

Usage

Import:

import DatePicker from "react-horizontal-datepicker";

and simply use the component as:

<DatePicker />

example at the end

Available Props are

Prop	Type	Default	Description
getSelectedDay	Function		Function to get the selected Day
endDate	Number	90	Number of days to render from current date
selectDate	Date		prop to send selected date manually or from another calendar component
color	String	'rgb(54, 105, 238)'	Set the primary color can be any color format in string
labelFormat	String	'MMMM yyyy'	Month label format - uses date-fns format types
marked	Object		Marking targeted date with text below (Optional)

Example:

https://codesandbox.io/s/vigilant-newton-gn0g7

function App() {

    const selectedDay = (val) =>{
        console.log(val)
    };

  return (
      <DatePicker getSelectedDay={selectedDay}
                  endDate={100}
                  selectDate={new Date("2020-04-30")}
                  labelFormat={"MMMM"}
                  color={"#374e8c"}          
/>
  );
}

Using marked dates

Example:

function App() {

    const selectedDay = (val) =>{
        console.log(val)
    };

  return (
      <DatePicker getSelectedDay={selectedDay}
                  endDate={100}
                  selectDate={new Date("2020-04-30")}
                  labelFormat={"MMMM"}
                  color={"#374e8c"}
                  marked={[
                      {
                          date: new Date(2021, 9, 3),
                          marked: true,
                          style: {
                              color: "#ff0000",
                              padding: "2px",
                              fontSize: 12,
                          },
                          text: "1x",
                      },
                      {
                          date: new Date(2021, 9, 4),
                          marked: true,
                          text: "5x"
                      },
                  ]}
/>
  );
}

Todo

use react window for efficienc

react-horizontal-datepicker's People

Contributors

Stargazers

Watchers

react-horizontal-datepicker's Issues

Days of the month not shown.

Hey,

The days of the month are not shown if the following conditions are met:

You specify an endDate which is relatively small. E.G. <DatePicker className="justify-content-center" endDate={15} getSelectedDay={(daySelected) => dispatch({ type: 'appointment_date', payload: moment(daySelected) })} color="rgb(94,163,136)" />
You are towards the end of the month. Today is the 20th of January. (Thus the endDate should be around the 4th of February)

I did a bit of debugging and found out that differenceInMonths (which is used in the code) calculates the difference in full months. Thus in our case, the difference will be zero since it is not a full month difference. This will only let the code try to render the days for the month of January and not February (bug number 1).

After that, the code is supposed to render the days but it takes the start date of 19 and the end date of 4 instead of the end date of the current month. it does the following check startDate < endDate to render the days, which obviously fails. (bug number 2).

I apologise if I misunderstood something.

Next JS issue: CSS Modules Imported by a Dependency

Thanks for this module but NextJS is complaining whiles compiling with this error below

CSS Modules Imported by a Dependency

Why This Error Occurred
One of your dependencies (node_modules) imports a CSS Modules file.

This normally happens when a package's source files are accidentally consumed, instead of the built package.

Possible Ways to Fix It
Reach out to the maintainer and ask for them to publish a compiled version of their dependency.

Compiled dependencies do not have references to CSS Module files, or any other files that require bundler-specific integrations.

The dependency should also provide instructions about what CSS needs to be imported by you, in your application.

How do I configure it to select previous dates not next dates?

Hi, I tried to use your library for my admin dashboard. However, I am unable to configure it to show dates of previous 30 days from today, but no date in the future.
Providing negative value to endDate prop didn't work. So I tried to copy the code and modify it on my own, but could not do so. If I somehow try to change the startDate to anything previous to the current date, it renders nothing. Please help.

Not Working With Ionic

Hi Team,

Any one possible to check ?

We couldn't use this in Ionic Hybrid app
node_modules/react-horizontal-datepicker/dist/DatePicker.js' implicitly has an 'any' type.
[react-scripts] Try npm install @types/react-horizontal-datepicker if it exists or add a new declaration (.d.ts) file containing declare module 'react-horizontal-datepicker';

Unable to install Dependency

I was trying to add horizontal date-picker in my recent project and i came across this awesome npm-package , but iwhen i tried installing this in my project i m unable to o it ... the error says unable to resolve dependency tree
]

How to position the current date in center ?

I wan't to position the current date in the center and align right and left like sample image ?

Weekly calender
< Sun Mon Today Wed thu fri sat >

Unable to install for React 17+

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.12.0" from [email protected]
npm ERR! node_modules/react-horizontal-datepicker
npm ERR!   react-horizontal-datepicker@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/jaison/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jaison/.npm/_logs/2022-04-05T08_55_49_422Z-debug-0.log

Disable dates and set max months

Can we have a prop with disabled dates?

Also another prop to set the number of years or months.

I do not think is ideal for a user to scroll throughout the year.

Module build failed : Style Loader Invalid Options

Hi,
I have installed horizontal date picker with command
npm install react-horizontal-datepicker --save
followed the sample example from ReadMe

and when I run the project getting the following issue

Can you help me, please
Please find my dependencies in package.json

Thanks.

Not working with typescript

重复的 React

in application using "react hooks " , run errors .
refer react as dependency（not peer dependency）

Left arrow is not working.

Hi bro,
the left arrow on this date picker is not working, and the right one is working fine.
Can you please check this out, I'm using this library in my project and its going to be live soon. Please fix this out.
Thanks.

Update for marked feature

You are merged this package, can you publish to latest version on npm and update dist package?

I mean,

"publish:npm": "rm -rf dist && mkdir dist && mkdir dist/components && mkdir dist/global && babel src/components -d dist/components --copy-files && babel src/global -d dist/global --copy-files",

Thank you,

When a date is selected via selectDate, any change in state resets the newly chosen Date

Error import package using yarn (typescript)

Tried to import the package using yarn by using the documentation step and I got an error. It says:
"Could not find a declaration file for module 'react-horizontal-datepicker'. '/Users/macbook/Documents/qbit-projects/spoonful-fe/spoonful-cms/node_modules/react-horizontal-datepicker/dist/DatePicker.js' implicitly has an 'any' type."

Tried yarn add @types/react-horizontal-datepicker, but get this error :
"An unexpected error occurred: "https://registry.yarnpkg.com/@types%2freact-horizontal-datepicker: Not found"

how to i custom on week changed !! it not props

plz..!

kush-agra / react-horizontal-datepicker Goto Github PK

react-horizontal-datepicker's Introduction

react-horizontal-datepicker

V2 with new logic and completely removing dependency on react-waypoint as well as leaner code which now uses css-modules

Installation

Usage

Available Props are

Example:

Using marked dates

Todo

react-horizontal-datepicker's People

Contributors

Stargazers

Watchers

Forkers

react-horizontal-datepicker's Issues

Recommend Projects

Recommend Topics

Recommend Org