opuscapita/react-dates

React date(range) inputs/pickers

React Datepicker, DateInput, DateRangeInput

OpusCapita React Components (date inputs/pickers)

This project uses react-day-picker

Implemented components

• DateInput
• DateRangeInput
• DatePicker

Demo and documentation

Online demo and components reference available here: https://opuscapita.github.io/react-dates

Demo powered by react-showroom

Installation

npm install --save @opuscapita/react-dates

Date format

• dd - day
• MM - month
• yy - year

Any separators except these allowed: 1, a, A, *, #

Contributors

	Alexey Sergeev
	Kirill Volkovich

License

Licensed under the Apache License, Version 2.0. See LICENSE for the full license text.

react-dates's Issues

DateInputField doesn't support dates with no leading zero

DateInputField component doesn't support dates that have values without leading zero.

For example in Finland the date format is D.M.YYYY

Date examples:
1.12.2017
31.3.2017

react-maskedinput must be changed to something else to achieve this kind of masks.

Draw date input calendar with non-form tag

As we might want to use date input inside <form></form> tag, it is really not a good idea to draw calendar using form, because it can cause problems if embedded forms.

After onBlur fired clear DateInput in case incorrect date was entered manually

Use case:

• User enter invalid date manually
• Focus out of the date input
• invalid user input is left inside the input

TODO:

• in case value is invalid - clear the the input before onBlur is fired

Due to latest change in [email protected], there is some error in react-dates

ERROR in /var/tmp/base/~/@opuscapita/react-dates/lib/DateVariants/DateVariants.react.js
Module not found: Error: Can't resolve '@opuscapita/react-autocompletes/lib/VerticalList' in '/var/tmp/base/node_modules/@opuscapita/react-dates/lib/DateVariants'

react-dates also require an update it seems. Can you please look into this

Show calendar week in date picker

See how it is done in bootstrap-datepicker, just click "Calendar weeks" checkbox and open date picker:

Add 'onFocus' & 'onBlur' event support

As we need to collaborate with other components we might need some more common react-input api event.
For the first touch lets add 'onFocus' & 'onBlur' as the most used ones.

Datepicker isn't close at pressing Today

In case selection some date on date picker or date range, date populated and it automatically closed
But at pressing 'Today' date populated but datepicket still diasplyed

Arrows in Date Select for navigating by months are partially cut in IE

Meta-Info	Value
ExtProjectId	???
Original Estimation	???h
Remaining Estimation	???h

Arrows in Date Select for navigating by months are partially cut from right side in IE:

'Today' button is not translated

Steps to reproduce:

• open react-dates demp page
• by default, locale of the first date input is de-DE
• open datepicker => Today button is not translated.

Webpack is configured to build library named 'MarkdownInput' which seems to be wrong

See https://github.com/OpusCapita/react-dates/blob/master/config/webpack.config.js#L73

No other options for locale

This is the best datepicker i've found, but i just can't use it if i can't translate it into my native language...
It would be great to import a json file and send it to a prop in any date picker component so it uses it as a base. something like
{months:["Janeiro", "Fevereiro", ...], week_days:["Domingo", "Segunda", ...]}

Under IE 11 selection date range isn't possible

Possibility to pass custom placeholder to DateInput

Please add possibility to pass placeholder to DateInput, different from 'date format'.
Example:

<DateInput
   placeholder={placeholder}
   {...otherProps}
/>

cannot open `DateRangeInput`'s popover

here is my code. DateRangeInput's popover not working, but DateInput is ok.

version: beta13

import React from 'react';
import { DateRangeInput } from '@opuscapita/react-dates';

export default class extends React.PureComponent {
  constructor(options) {
    super(options);

    this.state = { value: [] };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({ value });
  }

  render() {
    return (
      <DateRangeInput
        onChange={value => this.setState({ value })}
        value={this.state.value}
      />
    );
  }
}

Restrict enter invalid value for DateInput and DateRangeInput

Meta-Info	Value
ExtProjectId	JCCMMN-01
Original Estimation	3h
Remaining Estimation	0h

DateRangePicker shows dropdown with predefined periods sticked to left side

Meta-Info	Value
ExtProjectId	JCPIM-01.3
Original Estimation	10h
Remaining Estimation	10h

Original issue: https://github.com/OpusCapita/minsk-core-externals/issues/316

How to reproduce

• visit https://opuscapita.github.io/react-dates//branches/master/index.html?currentComponentName=DateRangeInput&showSidebar=false
• on the bottom (enabled) input click rightmost button with down-facing arrow.

Expected behavior

Dropdown appears under the button you've just clicked, sticked to the right side of input

What actually happens

Dropdown appears on the left side instead.

Add possibility to define disabled days

Meta-Info	Value
ExtProjectId	JCPROC-01
Original Estimation	10h
Remaining Estimation	10h

Add the same possibilities as it is available in react-day-picker disabledDays. This possibility should be available in the following components:

• DateInput
• DateRangeInput

Doesn't work with React-0.14.8

It doesn't work when I try include this module in js-react-attribute

Components don't work properly inside modal dialog

Meta-Info	Value
ExtProjectId	JCPROC-01
Original Estimation	1h
Remaining Estimation	1h

Add 'nb' locale as fallback for 'no' locale

DateInput from react-dates doesn't work under Norsk language ('no' language tag).

TypeError: Cannot read property 'firstDayOfWeek' of null

MomentJS not supported Norsk['no'] language, but are supported 'nb' & 'nn'. We can add this language but not clear what formats and translations should be.

Click outside of "DayPicker" popup of "DatePicker" doesn't close it

Start week from sunday for "en" locale

Meta-Info	Value
ExtProjectId	JCPIM-01.3
Original Estimation	2h
Remaining Estimation	2h

When user selects the date from the calendar, user can't move to the next field with tabulator.

If I add the date manually, like 02/21/2018, tabulator works.

DateInput showToLeft prop is reversed

What's expected: if showToLeft === true the datepicker popup should appear on the left side.

What's actually happening: Popup aligned to right if showToLeft === true and aligned left if showToLeft === false.

Date range: impossible to enter value by keyboard

In Invoice application used concept to fillout all fields by keyboard without using mouse.
For this compnent this aproach isn't work.

DateRangeInput picker extend outside mobile area

Hi there. I've been investigating use of your date pickers and noticed that on mobile screens the dual datepickers for range extend outside the screen. Is there any way to alter this behaviour? Maybe put one under the other or somesuch? I couldn't see any ability to tweak the pickers from DateInputRange.

Thanks

DateInput calendar displayed incorrectly in the bottom and top of screen

Meta-Info	Value
ExtProjectId	JCPROC-01
Original Estimation	???h
Remaining Estimation	???h

In DateInput is located in the bottom of screen and calendar opened then calendar is hidden and scrolling to see the full calendar is impossible.

TypeError after updating to [email protected]

portal.js:159 Uncaught TypeError: Cannot read property 'contains' of null
    at Portal.handleOutsideMouseClick (portal.js:159)

How to reproduce:

• Open demo page: https://opuscapita.github.io/react-dates
• Open browser developer tools console
• Open demo page sidebar
• Click 3-4 times on different components in the list

Consider usage of "dayjs" instead of "momentjs"

Meta-Info	Value
ExtProjectId	JCCMMN-01
Original Estimation	8h
Remaining Estimation	0h

https://github.com/xx45/dayjs

Skip some tests after drop React v 0.14.x

Search sections with skip here: https://github.com/OpusCapita/react-dates/pull/40/files

It should be fixed.

Waiting for any enzyme updates:

enzymejs/enzyme#252
enzymejs/enzyme#1150

Placeholder color under IE/Edge

Meta-Info	Value
ExtProjectId	JCPROC-01
Original Estimation	1h
Remaining Estimation	1h

Placeholder color is different for IE/Edge browsers. In firefox its color is #aaa, but in IE it is black. Please, check https://opuscapita.github.io/react-dates//branches/master/index.html?currentComponentName=DateInput under IE/Edge and Firefox/Chrome/etc.

Probably can be fixed by

:-ms-input-placeholder, ::-ms-input-placeholder {
  color: #aaa !important;
}

Procurement ticket: https://support.jcatalog.com/browse/PROC-6832
Original issue: https://github.com/OpusCapita/minsk-core-externals/issues/356

Create CODEOWNERS file

Drop React v. 0.14.x support, use v. "^15.6.2 || ^16.2.0" as peer dependency

As real dev dependency for test/demo purposes please, use, React v. 15.6.2 or higher.
After the changes increment a major number in module version.

Incorrect drop down popup from the selected field

Meta-Info	Value
ExtProjectId	JCPROC-01
Original Estimation	4h
Remaining Estimation	???h

Test to reproduce:

• Open React Dates demo page with max width 100%
• Focused on the date input field and scrolled down. As the result see below picture

Original issue: https://github.com/OpusCapita/minsk-core-externals/issues/292

Add CI support

Fix ability to clear date input with 'x' in case disabled=true

Step to reproduce (test in showroom)

<DateInput
  value={_scope.state.value}
  dateFormat="dd/MM/yyyy"
  locale="de-DE"
  onChange={_scope.handleChange.bind(_scope)}
  disabled={true}
/>

try pressing 'x' => input is cleared

Can't reset DateRangeInput value if not entered completely

Press reset button (cross at the left of DateRangeInput) doesn't work if value not entered completely

12.05.2015 - --.--.---- - OK
12.05.2015 - 30.05.2018 - OK
12.05.2015 - 30.05.2--- - Doesn't work

Needless wrappers for inputs lead to excessive horizontal margin

Needless type=text in wrapper div.

<div class="opuscapita_date-range-input form-control">
  <div class="opuscapita_date-range-input__input-field-container form-control">
    <div class="opuscapita_date-input-field form-control opuscapita_date-range-input__input-field opuscapita_date-range-input__left-input-field" type="text">
      <input type="text" value="" placeholder="DD/MM/YYYY" tabindex="0"/>
    </div>
    <div class="opuscapita_date-range-input__dash">―</div>
    <div class="opuscapita_date-input-field form-control opuscapita_date-range-input__input-field opuscapita_date-range-input__right-input-field" type="text">
        <input type="text" value="" placeholder="DD/MM/YYYY" tabindex="0"/>
    </div>
    <div class="opuscapita_input-addon-button opuscapita_date-range-input__reset-btn" tabindex="-1">✕</div>
  </div>
    <button type="button" class="btn btn-default opuscapita_date-range-input__variants-btn" tabindex="-1">
      <span class="caret"></span>
    </button>
</div>

DateInput doesn't position popup properly inside Showroom wrapped component

How to reproduce: visit this link and try to pick a date in any of 2 bottom left DateInput pickers.

What is expected: date picker pops up right on top of input field.

What is actually happening: popup appears much higher that expected.

Confirmed in Chrome & Firefox.

It is impossible to choose 1 day only

Test steps:
1.1 Enter first date in datepicker and try to select the same date for the end of period.
Actusl result: All dates have been removed from datepicker.

Bundle size is too big

Meta-Info	Value
ExtProjectId	JCPROC-01
Original Estimation	???h
Remaining Estimation	???h

It cause momentjs usage.
We can move it to peerDependencies or replace by something else.

Change property name 'date' to 'value'

To be consistent to react component naming convention that supports onChange and value properties, please change date property name to value.

This is not just a cosmetic change - libraries like redux-form us react-common notation to inject it's own specific props to declared inputs.

It is impossible to select only date "To", or 'From'

Meta-Info	Value
ExtProjectId	JCPROC-01
Original Estimation	???h
Remaining Estimation	???h

Test steps:

1. Click on the second date in datepicker
2. Select any date
   Actual result: First date has been selected

DateInput DOM events: onBlur fires before onChange

How to reproduce:

<DateInput value={null} dateFormat="dd/MM/yyyy" onChange={() => console.log('onChange')} onBlur = {() => console.log('onBlur')} disabled={false} showToLeft={false} showToTop={true} />

Check some date and look at browser console log.

Expected behavior: onChange should fire before onBlur.

What's actually happening: onBlur fires first. It breaks a consumer's logic if it depends on idiomatic behavior.

Demo page fails in IE 11

'Promise' is undefined

It is impossible to change only one date in datepicker (start or end of period)

Test steps:

1. Select first and second date for period.
2. Click on the first or second date and try to change it
   Actual result: First date is always changed and it is necessary to enter period from very begin again. The first and the second date.

Not works with NextJs

./node_modules/react-day-picker/lib/style.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@opuscapita/react-dates/lib/index.js

In some cases "disabled" property not working properly

DateInput and DateRangeInput with disabled={true} shows date picker on click.

Incorrect time from react-dates component

Meta-Info	Value
ExtProjectId	JCPROC-01
Original Estimation	4h
Remaining Estimation	0h

Source issue: https://github.com/OpusCapita/minsk-core-externals/issues/140