한 번에 Calendar에 표시할 Month 개수에 대한 옵션

Moment.js dependency will be change due to bundle size issue

Describe the bug
When i open datepicker and if i click on backdrop without selecting any date then it fills today's date in input but it doesn't fire handleChange. Either both should be done or none(this would be the right one since i didn't select any date). It's creating problem in form validation where date is auto filled but it's value is still null|undefined.

To Reproduce
Steps to reproduce the behavior:
https://codesandbox.io/s/react-datepicker-forked-okr9d?file=/src/index.js
0. Clear date input

1. Focus date input again
2. Click outside without selecting any date
3. It fills date input with current date but doesn't fire handleChange

Expected behavior
When i click outside without selecting any date, It should not fill input to today's date.

Desktop (please complete the following information):

• OS: ubuntu
• Browser chrome
• Version 86.0.4240.183

Given that the behavior of the control is effectively a modal, you should add the appropriate ARIA-* attributes for modal elements and behaviors.

• add rollup
• rollup typescript configuration

I would like to have a range with the same start and end dates in the RangeDatePicker.
But clicking on the same day did not change anything.

You can satisfy my requirements by changing the following in your code:

public handleDateChange = (actions: PickerAction) => (date: moment.Moment) => {
...
if (!start) {
      startDate = date;
    } else {
      if (end) {
        startDate = date;
        endDate = undefined;
      } else {
//      Original
//      if (isDayAfter(date, start)) { 
         if (!isDayBefore(date, start)) {
          endDate = date;
        } else {
          startDate = date;
        }
      }
    }
...
}

• storybook version update
• relate storybook addon version update

Is not initialdate an option to work with the range date picker?
My input is still empty.

state = {
        startDate: moment().subtract(7, 'days'),
        endDate: moment(),
    }


                <RangeDatePicker
                locale={"ko"}
                initialStartDate={startDate.toDate()}
                initialEndDate={endDate.toDate()}
                onChange={this.handleDateChange}/>

Is your feature request related to a problem? Please describe.
Describe alternatives you've considered
I wouldn't like to have to duplicate all the app.scss code to just delete the Lato font import, or if I have light/dark themes in the site, having to either import the complete app.scss under different selectors or duplicate the rules related to colors (which would lead to having to keep a look on styles updates if you update the component)

Describe the solution you'd like
If app.scss is split in 2 files: non theming related and theme related, you could have multiple themes with less css output, and without needing to duplicate the stylesheet (leading to easier upgrades later on). The default font family could be set in the default scss file like calendar.scss, but not in the modular files, to avoid downloading a font you might not want to use.

I'm not sure if this is a bug or a feature request but I am having trouble formatting a datetime input.

Is your feature request related to a problem? Please describe.
Basically I need the time part of a datetime formatted in 24 hour format, and not AM/PM. I have updated the dateFormat parameter to include my desired format but the input shows the date formatted with that plus also the time repeated using the AM/PM format afterwards. This sandbox illustrates the problem, https://codesandbox.io/s/l4oq8z505q

Describe the solution you'd like
I think if the date format includes a time element then the time should not be displayed again. Either that or there needs to be separate timeFormat prop for the time picker. Likewise really there should probably be a calendarFormat or monthFormat prop for the calendar component since the default of 2019.03 is a strange and rarely used format in the UK and probably elsewhere. Neither the time or month formats appear to be
affected by changing the locale.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
There are few props missing that would make this library nice to use & configure:

• be able to customise the icon between inputs as well the icon for prev and next month (in RangeDatePicker)
• be able to prevent 10px padding on inputs, currently it's set via style={{}} which is impossible to override from outside
• be able to have custom formatting for calendar header date (at the moment it's set as YYYY.MM, which isn't perfect for all of the cases)

Describe the solution you'd like
I've prepared a PR with all those changes above along with type declaration adjustments & some good renames.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Github Pages를 통한 Document Site를 생성

It would be helpful if data range picker has open prop as state.

Describe the bug
In Russia DataFormat="DD.MM.YYYY", but use: import "dayjs/locale/ru"; and by specifying in the settings RangeDatePicker locale="ru", DataFormat="YYYY.MM.DD". If specify dateFormat="DD.MM.YYYY" , that format turn "MM.DD.YYYY".

Describe the bug
When Datepicker is wrapped in <form>, navigating month fires submit event. this should not happen. apply type="button" property.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/react-datepicker-forked-97z69
2. open any datepicker, and try to navigate to next or prev. month
3. It will refresh the page

Expected behavior
It should not refresh the page when wrapped inside <form> tag

Desktop (please complete the following information):

• OS: ubuntu
• Browser: chrome

Additional context
Just apply type="button" property to those navigating arrows, or to wherever there are buttons.

• Calendar 내부에 CalendarContainer를 포함하는 구조로 변경 및 컴포넌트 명칭 변경
• prevIcon, nextIcon을 옵션값으로 설정 (첫번째 캘린더에 prev, 마지막 캘린더에 next)
• 보이는 Calendar Component 의 month가 동시에 컨트롤되도록 변경

Is your feature request related to a problem? Please describe.
Currently, the week starts from Sunday to Saturday in the calendar.
It would be better to have an option to set the first day of the week.

Describe the solution you'd like
We can have a prop to define the first day.

Thanks!

Any word if/when there will be an update for React 17?

• change all raw date type to dayjs.Dayjs

DateUtility is depends on lodash
remove lodash dependency for reduce bundle size

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Using RangeDatePicker in combination with props clear, the event fire doesn't call the method onChange . I am using this library and it is great but is very necessary for me to have that feature.
A props *onClear should be great, which is called when handleInputClear (inside the RangeDatePicker) is fired

• string type locale props change to string or dayjs locale interface

현재 Day만 선택가능한 구조를 개편

• Header 클릭시 Year -> Month -> Day 순차적으로 선택하도록 변경

I will not say this is a bug/issue. I just want to confirm the feature.

I am not sure whether we have customization provided in time picker to select AM/ PM time?

If yes, then how I can use it?

fix codeclimate code smell issue.

• reduce render function code line
• refactor TimeUtil, DatePicker

Describe the bug
The datepicker appears to be impossible to use with keyboard which makes it totally inaccessible.

To Reproduce
Steps to reproduce the behavior:

1. Try to tab into the component
2. Click on a date and attempt to navigate to another day or control with tabs and arrow keys

Expected behavior
In order for people who can only use keyboard or assisted devices to use the component it must not be reliant on mouse events only.

Desktop (please complete the following information):

• OS: macOS Mojave
• Browser Chrome
• Version 73.x

Jest, Enzyme을 통한 단위 테스트 코드 작성 및 Travis CI 연동

Describe the bug
Selecting a month beyond March chooses the wrong month

To Reproduce
Steps to reproduce the behavior:

1. Go to example codepen from readme
2. Click on 'Simple Date picker' area
3. Click (e.g.) 2020.05 to choose new month
4. Click e.g. June, note that date selected is 2020.04

Mapping appears to be:

Jan => Jan
Feb => Feb
Mar => Mar
Apr => Feb
May => Mar
Jun => Apr
July => Mar
Aug => Apr
Sep => May
Oct => Apr
Nov => May
Dec => Jun

Expected behaviour
I expect to select the month I click on.

Screenshots
n/a

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 81.0.4044.138 (Official Build) (64-bit)

Describe the bug
I am trying to use datepicker with includeTime option inside a form. When i try switch between date and time tabs, the component is triggering the submit event.

To Reproduce
Steps to reproduce the behavior:

1. Access CodeSandbox link [https://codesandbox.io/s/react-datepicker-gknwu?file=/src/index.js]
2. Switch from date tab to time tab

Desktop (please complete the following information):

• OS: Windows
• Browser: Google Chrome

Is your feature request related to a problem? Please describe.
It appears selecting a date range requires the user to select a start date, and then click again to select an end date.

Describe the solution you'd like
A nicer user experience would be to keep the popup open until both the start and end dates have been selected.

Describe alternatives you've considered
Check out something like the Google date picker for flights.google.com. The user is able to choose both dates as needed (and in this example the popup actually includes a "done" button).

Additional context
I think it should probably be up to the developer to decide if the popup closes automatically or not in all states. So more configurable options is best. For example. keeping the popup open until the user decides to close it could be an option as well (like a Done button as exemplified via Google Flights mention above)

The demo shows the input prop for readOnly - which doesn't work - it lets you change the date

MS Edge
Chrome
Firefox
MSIE

With a RangeDatePicker, writing a formatted date into the Input Fields will update the internal state of the component, but will not notify listeners via the onChange prop, making it impossible to change the observed date range without clicking into the Calendar widget.

This should easily be fixed by calling onChange in handleInputBlur or handleInputChange.

• eslint 설정(airbnb-base)
• prettier 연동

Describe the bug
If a locale does specify a differen first day of the week than sunday, the calendar is showing wrong date/weekday combinations.

To Reproduce
Steps to reproduce the behavior:

1. use a locale that sets a different weekday than sunday as first day of the week, eg. en-GB.
2. look at the calendar and check if date and weekday match

Expected behavior
The grid of days should be shifted, such that eg. mondays are in the first column.

Screenshots

Desktop (please complete the following information):

• OS: Linux & Windows
• Browser Chrome & Firefox
• Version any

Smartphone (please complete the following information):

• Device: Android
• OS: any
• Browser stock & firefox
• Version any

Additional context
I introduced this bug with #46 . I'll try and fix it as soon as I have time.

• storybook component prop type not load