diff --git a/README.md b/README.md index 793f632..dfd16b8 100644 --- a/README.md +++ b/README.md @@ -1,136 +1,58 @@ -# rmc-date-picker ---- - -React Mobile DatePicker Component (web and react-native) - - -[![NPM version][npm-image]][npm-url] -![react-native](https://img.shields.io/badge/react--native-%3E%3D_0.30.0-green.svg) -![react](https://img.shields.io/badge/react-%3E%3D_15.2.0-green.svg) -[![build status][travis-image]][travis-url] -[![Codecov](https://img.shields.io/codecov/c/github/react-component/m-date-picker.svg?style=flat-square)](https://codecov.io/gh/react-component/m-date-picker) -[![gemnasium deps][gemnasium-image]][gemnasium-url] -[![node version][node-image]][node-url] -[![npm download][download-image]][download-url] - -[npm-image]: http://img.shields.io/npm/v/rmc-date-picker.svg?style=flat-square -[npm-url]: http://npmjs.org/package/rmc-date-picker -[travis-image]: https://img.shields.io/travis/react-component/m-date-picker.svg?style=flat-square -[travis-url]: https://travis-ci.org/react-component/m-date-picker -[gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-date-picker.svg?style=flat-square -[gemnasium-url]: https://gemnasium.com/react-component/m-date-picker -[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square -[node-url]: http://nodejs.org/download/ -[download-image]: https://img.shields.io/npm/dm/rmc-date-picker.svg?style=flat-square -[download-url]: https://npmjs.org/package/rmc-date-picker - -## Screenshots - -### web - - - -### ios - - - -### android - - - -## Usage - -see example +# rmc-date-picker-plus -## Development - -``` -npm i -npm start -``` - -## Example - -http://localhost:8000/examples/ - -online example: http://react-component.github.io/m-date-picker/ +--- -## react-native +支持用`sortCols`来调整年月日位置 -``` -npm run rn-init -npm run watch-tsc -react-native start -react-native run-ios -``` +Support using `sortCols` to adjust the position of the year, month, and day ## install -[![rmc-date-picker](https://nodei.co/npm/rmc-date-picker.png)](https://npmjs.org/package/rmc-date-picker) - +[![rmc-date-picker-plus](https://nodei.co/npm/rmc-date-picker-plus.png)](https://npmjs.org/package/rmc-date-picker-plus) ## API ### DatePicker props -| name | description | type | default | -|----------|----------------|----------|--------------| -|className(web) | additional css class of root dom node | String | '' | -|prefixCls(web) | prefix class | String | 'rmc-date-picker' | -|pickerPrefixCls(web) | picker prefix class | String | 'rmc-picker' | -|defaultDate | default selected date. | Date | | -|date | The currently selected date. | Date | | -|mode | The date picker mode. | String | 'date' enum('date', 'time', 'datetime', 'year', 'month') | -|minDate | min date | Date | `new Date(2000, 1, 1, 0, 0, 0)` | -|maxDate | max date | Date | `new Date(2030, 1, 1, 23, 59, 59)` | -|minHour | min Hour `[0, 23]`| Number | `0` | -|maxHour | max Hour `[0, 23]`| Number | `23` | -|minMinute | max Minute `[0, 59]`| Number | `0` | -|maxMinute | max Minute `[0, 59]`| Number| `59` | -|locale | the locale of area | Object | import from 'rmc-date-picker/lib/locale/en_US' | -|use12Hours | 12 hours display mode | Boolean | false | -|minuteStep | The amount of time, in minutes, between each minute item. | Number | 1 | -|onDateChange | Date change handler. | Function(date: Date) | '' | -|onValueChange | fire when picker change | (vals: any, index: number) => void | | -|formatMonth | Customize display value of months | (month:number, current:Date) => React.Node | | -|formatDay | Customize display value of days | (day:number, current:Date) => React.Node | | +| name | description | type | default | +| -------------------- | -------------------------------------------------------------------------------- | ------------------------------------------ | -------------------------------------------------------- | +| **sortCols(web)** | **用于调整年月日排列的顺序 Used to adjust the order of the year, month and day** | String | { year: 0, month: 1, day: 2} | +| className(web) | additional css class of root dom node | String | '' | +| prefixCls(web) | prefix class | String | 'rmc-date-picker' | +| pickerPrefixCls(web) | picker prefix class | String | 'rmc-picker' | +| defaultDate | default selected date. | Date | | +| date | The currently selected date. | Date | | +| mode | The date picker mode. | String | 'date' enum('date', 'time', 'datetime', 'year', 'month') | +| minDate | min date | Date | `new Date(2000, 1, 1, 0, 0, 0)` | +| maxDate | max date | Date | `new Date(2030, 1, 1, 23, 59, 59)` | +| minHour | min Hour `[0, 23]` | Number | `0` | +| maxHour | max Hour `[0, 23]` | Number | `23` | +| minMinute | max Minute `[0, 59]` | Number | `0` | +| maxMinute | max Minute `[0, 59]` | Number | `59` | +| locale | the locale of area | Object | import from 'rmc-date-picker/lib/locale/en_US' | +| use12Hours | 12 hours display mode | Boolean | false | +| minuteStep | The amount of time, in minutes, between each minute item. |  Number | 1 | +| onDateChange | Date change handler. | Function(date: Date) | '' | +| onValueChange | fire when picker change | (vals: any, index: number) => void | | +| formatMonth | Customize display value of months | (month:number, current:Date) => React.Node | | +| formatDay | Customize display value of days | (day:number, current:Date) => React.Node | | ### rmc-date-picker/lib/Popup props -| name | description | type | default | -|----------|----------------|----------|--------------| -|className(web) | additional css class of modal node | String | '' | -|style(web) | additional modal style | object | {} | -|popupTransitionName(web) | | String | | -|maskTransitionName(web) | | String | | -|prefixCls(web) | popup's prefix class | String | 'rmc-picker-popup' | -|styles(react-native) | PopupPicker's styles | StyleSheet.create | | -|datePicker | DatePicker element | React DatePicker element | | -|date | The currently selected date. | Date | | -|visible | whether pop picker is visible | Boolean | false | -|onChange | exec on ok | Function(date: Date) | | -|onVisibleChange | called when pop picker visible change | Function | | -|onDismiss | exec on dismiss | function | | -|okText | ok button text | string/React.ReactElement | 'Ok' | -|dismissText | dismiss button text | string/React.ReactElement | 'Dismiss' | -|title | Popup title | string/React.ReactElement | '' | - - -## Test Case - -``` -npm test -npm run chrome-test -``` - -## Coverage - -``` -npm run coverage -``` - -open coverage/ dir - -## License - -rmc-date-picker is released under the MIT license. +| name | description | type | default | +| ------------------------ | ------------------------------------- | ------------------------- | ------------------ | +| className(web) | additional css class of modal node | String | '' | +| style(web) | additional modal style | object | {} | +| popupTransitionName(web) | | String | | +| maskTransitionName(web) | | String | | +| prefixCls(web) | popup's prefix class | String | 'rmc-picker-popup' | +| styles(react-native) | PopupPicker's styles | StyleSheet.create | | +| datePicker | DatePicker element | React DatePicker element | | +| date | The currently selected date. | Date | | +| visible | whether pop picker is visible | Boolean | false | +| onChange | exec on ok | Function(date: Date) | | +| onVisibleChange | called when pop picker visible change | Function | | +| onDismiss | exec on dismiss | function | | +| okText | ok button text | string/React.ReactElement | 'Ok' | +| dismissText | dismiss button text | string/React.ReactElement | 'Dismiss' | +| title | Popup title | string/React.ReactElement | '' | diff --git a/package.json b/package.json index ad35107..392dfdf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "rmc-date-picker", - "version": "6.0.10", + "name": "rmc-date-picker-plus", + "version": "6.0.18", "description": "React Mobile DatePicker Component for web and react-native", "keywords": [ "react", @@ -8,13 +8,13 @@ "react-mobile-date-picker", "date-picker" ], - "homepage": "https://github.com/react-component/m-date-picker", + "homepage": "https://github.com/steveyu2/m-date-picker", "repository": { "type": "git", - "url": "https://github.com/react-component/m-date-picker.git" + "url": "https://github.com/steveyu2/m-date-picker.git" }, "bugs": { - "url": "https://github.com/react-component/m-date-picker/issues" + "url": "https://github.com/steveyu2/m-date-picker/issues" }, "files": [ "lib", @@ -81,4 +81,4 @@ "babel-runtime": "6.x", "rmc-picker": "~5.0.0" } -} +} \ No newline at end of file diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 2104a78..8f1a08e 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -36,9 +36,13 @@ class DatePicker extends React.Component { mode: DATE, disabled: false, minuteStep: 1, - onDateChange() { - }, + onDateChange() {}, use12Hours: false, + sortCols: { + year: 0, + month: 1, + day: 2, + }, }; state = { @@ -59,19 +63,19 @@ class DatePicker extends React.Component { getNewDate = (values, index) => { const value = parseInt(values[index], 10); const props = this.props; - const { mode } = props; + const { mode, sortCols } = props; let newValue = cloneDate(this.getDate()); if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) { switch (index) { - case 0: + case sortCols['year']: newValue.setFullYear(value); break; - case 1: + case sortCols['month']: // Note: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth // e.g. from 2017-03-31 to 2017-02-28 setMonth(newValue, value); break; - case 2: + case sortCols['day']: newValue.setDate(value); break; case 3: @@ -102,7 +106,7 @@ class DatePicker extends React.Component { } } return this.clipDate(newValue); - } + }; onValueChange = (values, index) => { const props = this.props; @@ -118,7 +122,7 @@ class DatePicker extends React.Component { if (props.onValueChange) { props.onValueChange(values, index); } - } + }; onScrollChange = (values, index) => { const props = this.props; @@ -126,7 +130,7 @@ class DatePicker extends React.Component { const newValue = this.getNewDate(values, index); props.onScrollChange(newValue, values, index); } - } + }; setHours(date, hour) { if (this.props.use12Hours) { @@ -252,7 +256,7 @@ class DatePicker extends React.Component { maxMonth = maxDateMonth; } for (let i = minMonth; i <= maxMonth; i++) { - const label = formatMonth ? formatMonth(i, date) : (i + 1 + locale.month + ''); + const label = formatMonth ? formatMonth(i, date) : i + 1 + locale.month + ''; months.push({ value: i + '', label, @@ -274,17 +278,13 @@ class DatePicker extends React.Component { maxDay = maxDateDay; } for (let i = minDay; i <= maxDay; i++) { - const label = formatDay ? formatDay(i, date) : (i + locale.day + ''); + const label = formatDay ? formatDay(i, date) : i + locale.day + ''; days.push({ value: i + '', label, }); } - return [ - yearCol, - monthCol, - { key: 'day', props: { children: days } }, - ]; + return [yearCol, monthCol, { key: 'day', props: { children: days } }]; } getDisplayHour(rawHour) { @@ -343,7 +343,7 @@ class DatePicker extends React.Component { } const hours: any[] = []; - if (minHour === 0 && maxHour === 0 || minHour !== 0 && maxHour !== 0) { + if ((minHour === 0 && maxHour === 0) || (minHour !== 0 && maxHour !== 0)) { minHour = this.getDisplayHour(minHour); } else if (minHour === 0 && use12Hours) { minHour = 1; @@ -374,10 +374,18 @@ class DatePicker extends React.Component { const cols = [ { key: 'hours', props: { children: hours } }, { key: 'minutes', props: { children: minutes } }, - ].concat(use12Hours ? [{ - key: 'ampm', - props: { children: [{ value: '0', label: locale.am }, { value: '1', label: locale.pm }] }, - }] : []); + ].concat( + use12Hours + ? [ + { + key: 'ampm', + props: { + children: [{ value: '0', label: locale.am }, { value: '1', label: locale.pm }], + }, + }, + ] + : [] + ); return { cols, selMinute }; } @@ -407,10 +415,10 @@ class DatePicker extends React.Component { const minMinutes = minDate.getMinutes(); const hour = date.getHours(); const minutes = date.getMinutes(); - if (hour < minHour || hour === minHour && minutes < minMinutes) { + if (hour < minHour || (hour === minHour && minutes < minMinutes)) { return cloneDate(minDate); } - if (hour > maxHour || hour === maxHour && minutes > maxMinutes) { + if (hour > maxHour || (hour === maxHour && minutes > maxMinutes)) { return cloneDate(maxDate); } } @@ -463,24 +471,46 @@ class DatePicker extends React.Component { render() { const { value, cols } = this.getValueCols(); const { - disabled, pickerPrefixCls, prefixCls, rootNativeProps, className, style, itemStyle, + disabled, + pickerPrefixCls, + prefixCls, + rootNativeProps, + className, + style, + itemStyle, + sortCols, } = this.props; const multiStyle = { flexDirection: 'row', alignItems: 'center', ...style, }; + + let formatCols = [...cols]; + let formatValue = [...value]; + + if (sortCols) { + const [year, month, day] = formatCols; + formatCols[sortCols.year || 0] = year; + formatCols[sortCols.month || 0] = month; + formatCols[sortCols.day || 0] = day; + const [year_v, month_v, day_v] = formatValue; + formatValue[sortCols.year || 0] = year_v; + formatValue[sortCols.month || 0] = month_v; + formatValue[sortCols.day || 0] = day_v; + } + return ( - {cols.map(p => ( + {formatCols.map((p) => ( { prefixCls={pickerPrefixCls} itemStyle={itemStyle} > - {p.props.children.map(item => ( + {p.props.children.map((item) => ( {item.label} diff --git a/src/IDatePickerProps.tsx b/src/IDatePickerProps.tsx index 12723be..7e7e36e 100644 --- a/src/IDatePickerProps.tsx +++ b/src/IDatePickerProps.tsx @@ -11,6 +11,11 @@ interface IDatePickerProps { disabled?: boolean; locale?: any; minuteStep?: number; + sortCols: { + year: number; + month: number; + day: number; + }; formatMonth?: (month: number, date?: any) => any; formatDay?: (day: number, date?: any) => any; onDateChange?: (date: any) => void;