⚠⚠️⚠️⚠⚠️⚠️️⚠⚠️⚠️️️

We have added custom functionality to the 2.7.* tags as we currently do not support Ant v5 and Ant v4 references rc-picker ~2.7.0 in the package.json. The functionality includes:

• If start and end date and end date changes to be before start date, set start date to end date and keep focus in end date
  • rc-picker issue: (react-component#444)
  • Fork PR: #10

In order to use this repository in our app we had to do two things:

1. Include the lib/ and es/ build files by updating .gitignore
2. Use the overrides functionality in our own app's package.json.

   {
     "dependencies": {
       "rc-picker": "github:wattch/picker#v2.7.1" // INSERT CORRECT TAG
     },
     "overrides": {
       "rc-picker": "$rc-picker"
     }
   }

Maintaining:

In order to keep the fork in sync (even though no development from rc-picker is being added to <3.* tags), we keep all of our code within the wattch-master branch. This is the default branch on the repository and correctly says it is out of sync with the fork's master.

To make changes/add features:

1. Checkout wattch-master
2. Create a PR with the changes and include the build files from npm run build && npm run compile
3. After PR merges we need to:
   • Bump the version in package.json
   • Push a new tag/create a new tag and a new release
     • The best way so far to do this is to create a new release in the Github UI and create a new tag with the release.

⚠⚠️⚠️⚠⚠️⚠️️⚠⚠️⚠️️️

https://react-component.github.io/picker/

import Picker from 'rc-picker';
import 'rc-picker/assets/index.css';
import { render } from 'react-dom';

render(<Picker />, mountNode);

| Property | Type | Default | Description | | --- | --- | --- | --- | --- | | prefixCls | String | rc-picker | prefixCls of this component | | className | String | '' | additional css class of root dom | | style | React.CSSProperties | | additional style of root dom node | | locale | Object | import from 'rc-picker/lib/locale/en_US' | rc-picker locale | | value | moment | | current value like input's value | | defaultValue | moment | | defaultValue like input's defaultValue | | defaultPickerValue | moment | | Set default display picker view date | | separator | String | '~' | set separator between inputs | | picker | time | date | week | month | year | | control which kind of panel | | placeholder | [String, String] | | placeholder of date input | | showTime | Boolean | Object | showTime options | to provide an additional time selection | | showTime.defaultValue | [moment, moment] | | to set default time of selected date | | use12Hours | Boolean | false | 12 hours display mode | | disabledTime | Function(date: moment, type:'start'|'end'):Object | | | to specify the time that cannot be selected | | ranges | { String | [range: string]: moment[] } | { [range: string]: () => moment[] } | | preseted ranges for quick selection | | format | String | String[] | depends on whether you set timePicker and your locale | use to format/parse date(without time) value to/from input. When an array is provided, all values are used for parsing and first value for display | | allowEmpty | [Boolean, Boolean] | | allow range picker clearing text | | selectable | [Boolean, Boolean] | | whether to selected picker | | disabled | Boolean | false | whether the range picker is disabled | | onChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the selected time is changing | | onCalendarChange | Function(value:[moment], formatString: [string, string], info: { range:'start'|'end' }) | | a callback function, can be executed when the start time or the end time of the range is changing | | direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. | | order | Boolean | true | (TimeRangePicker only) false to disable auto order |

npm install
npm start

rc-picker is released under the MIT license.