Giter Club home page Giter Club logo

react-dropdown-date's People

Contributors

alse avatar omasback avatar romainbou avatar satyendra-singh-talentica avatar ssxv avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

cap-collectif omasback nona-creative vaelvictus jeromemmiranda rsharkin johnnyspomer abhishekhan ziahm myminifactory scriptmatico moonjoungyoung chinchillo joskid tania-goncalves ferjgm98 tbilous alvaromashiro quotawoosung rodrigolimads squaretwo priscillahuff91 alfabolt piouc hirobreak minhnhut0602 dannyclifford alexkostin-coder devlex1308 youshaext rahilkencor apujol09 ibjjf-dev lvnam96 zentake-cloud javatechex karen-velasquez awongh

react-dropdown-date's Issues

Infinite year dropdown

Is it possible to add infinite scrolling for the year drop down?

The drop down list can still begin at the default value followed by the start date, but as the user continues to scroll up/down, new years will be added to the list by increasing the end year.

Having a constant end year may make the drop down list very large.

Why is month value a 0 based array?

What is the point of having a 0 based index for the month field? Shouldn't it be the month number that it corresponds with?

<MonthPicker classes={'datePicker'} {...rest} defaultValue={'Month'} // default is 1900 start={1} // default is ASCENDING reverse // default is false value={value} // mandatory onChange={month => onChange(month)} required={true} />

For some reason in the react developer tools I see:
<option key='0' value{0} className={null}>1</option>
Then rendered in html :
<option value="0">1</option>

Invariant Violation: Text strings must be rendered within a <Text> component.

I just installed and tried to use it in react native 0.59, as:

<MonthPicker
                        defaultValue={'select month'}
                        year={'2019'}
                        // default is false
                        required={true}
                        // default is false
                        disabled={true}
                        // mandatory
                        value={'1'}
                        // mandatory
                        onChange={(month) => {
                          this.setState({ month })
                          console.log(month)
                        }}
                        id={'month'}
                        name={'month'}
                        classes={'classes'}
                        optionClasses={'option classes'}
                      />

but I got error:

Invariant Violation: Text strings must be rendered within a <Text> component.

This error is located at:
    in option (created by MonthPicker)
    in select (created by MonthPicker)
    in MonthPicker (at NewPaymentMethod.js:354)
    in RCTView (at View.js:45)
    in View (at NewPaymentMethod.js:353)
    in RCTView (at View.js:45)
    in View (at NewPaymentMethod.js:352)
    in RCTView (at View.js:45)
    in View (at NewPaymentMethod.js:350)
    in RCTView (at View.js:45)
    in View (at ScrollView.js:976)
    in RCTScrollView (at ScrollView.js:1115)
    in ScrollView (at NewPaymentMethod.js:319)
    in RCTView (at View.js:45)
    in View (at NewPaymentMethod.js:318)
    in Formik (at NewPaymentMethod.js:192)
    in RCTView (at View.js:45)
    in View (at KeyboardAvoidingView.js:200)
    in KeyboardAvoidingView (at NewPaymentMethod.js:186)
    in NewPaymentMethodScreen (at withSetNavState.js:26)
    in _class (created by Context.Consumer)
    in Connect(_class) (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:886)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:93)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:80)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:971)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:383)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:379)
    in PanGestureHandler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at withResetOnTab.js:53)
    in _class (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:37)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:26)
    in ResourceSavingScene (at createBottomTabNavigator.js:121)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at createBottomTabNavigator.js:111)
    in RCTView (at View.js:45)
    in View (at createBottomTabNavigator.js:110)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (at createNavigator.js:61)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:888)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.tsx:886)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:93)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:80)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:971)
    in RCTView (at View.js:45)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:383)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:379)
    in PanGestureHandler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at View.js:45)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:429)
    in NavigationContainer (at RootScreen.js:164)
    in RCTView (at View.js:45)
    in View (at RootScreen.js:183)
    in RootScreen (created by Context.Consumer)
    in Connect(RootScreen) (at withPermissionsCheckConsumer.js:12)
    in PermissionsConsumer (at withPermissionsCheckProvider.js:12)
    in PermissionsProvider (created by Context.Consumer)
    in Connect(PermissionsProvider) (at App.js:32)
    in PersistGate (at App.js:30)
    in Provider (at App.js:29)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)
createTextInstance
    d195e8cf-3331-42df-ad5d-2bf60716c49a:23515:9
completeWork
    d195e8cf-3331-42df-ad5d-2bf60716c49a:30645:46
completeUnitOfWork
    d195e8cf-3331-42df-ad5d-2bf60716c49a:32762:32
performUnitOfWork
    d195e8cf-3331-42df-ad5d-2bf60716c49a:32925:18
workLoop
    d195e8cf-3331-42df-ad5d-2bf60716c49a:32935:30
renderRoot
    d195e8cf-3331-42df-ad5d-2bf60716c49a:33001:13
performWorkOnRoot
    d195e8cf-3331-42df-ad5d-2bf60716c49a:33739:13
performWork
    d195e8cf-3331-42df-ad5d-2bf60716c49a:33666:13
performSyncWork
    d195e8cf-3331-42df-ad5d-2bf60716c49a:33642:9

endDate incorrectly evaluated if endDate is same year as startDate,

When attempting to set an endDate with the same year as the startDate, the library has the unexpected behavior of displaying every month of the year. Example: if start date is 2021-02-01, and endDate is 2021-07-07, the drop down for month displays every month from February to December (expected behavior would just be displaying Feb - July). A quick fix would be to change the DropdownDate.prototype.generateMonthOptions function (line 320 in index.js) to include this at the top of the if else statements:

        if (selectedYear === startYear && selectedYear === endYear) {
            for (var i = startMonth; i <= endMonth; i++) {
                months.push({
                    value: i,
                    month: monthByNumber[i]
                });
            }
        }

I'm fairly new to this, so I'm not sure how to create a PR the appropriate way. If someone is willing to help me with this is would be much appreciated. Thanks!

How to properly set default value with DropdownDate?

I don't want to separate into year/month/date components. I want to use DropdownDate. Here's my code:

<DropdownDate
                    startDate={subYears(startOfToday(), 99)}
                    endDate={subYears(startOfToday(), 13)}
                    onMonthChange={this.onMonthChange}
                    onDayChange={this.onDayChange}    
                    onYearChange={this.onYearChange}  
                    onDateChange={this.onDateChange}  
                    names={{year: 'year', month: 'month', day: 'day'}}
                    defaultValues={{year, month, day}}
                    options={{yearReverse: true, monthShort: true, monthCaps: false}}
                  />

What happens: if the date is 1997-04-05, I convert month to say Apr and day to be 5. I supply them in defaultValues but it makes a new entry at the top of the select, named Apr, rather than just selecting Apr from the list.

image

DatePicker with combined functionality - dropdowns height on mobile?

Hi!

I want to be able to control the height of the dropdown when on a mobile. Currently it takes up the full width and height of the viewport. I have tried to do it using CSS as follows:

maxHeight: '70vh',
overflow: 'scroll',
},

to no avail. How do I reduce the height on scroll when on a mobile? Thanks

Input displaying one day off

When selecting a date, the value is being returned correctly but it displays as one day off. This is probably because when the date objects are built they accept a string that doesn't account for time zones.

Update componentWillMount

Hi man, currently we are in react 16 and componentWillMount is deprecated, should be changed to UNSAFE_componentWillMount or adapt it to new lifecycle.

unable to install in react js

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@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/react-dropdown-date
npm ERR! react-dropdown-date@"*" 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!
npm ERR! For a full report see:
npm ERR! C:\Users\Admin\AppData\Local\npm-cache_logs\2023-12-07T07_23_04_573Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Local\npm-cache_logs\2023-12-07T07_23_04_573Z-debug-0.log

Don't override Date in the example

This tripped me up for a second. I was trying to use js native Date in my code but it had been reassigned to the component class because i copied the example code. Maybe assign the import to DropdownDate or something else

Focus a dropdown dynamically

How do I add refs to the picker? I want to focus it using useRef whenever it doesn't pass my validations. Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.