diff --git a/README.md b/README.md index 793f632..dc90216 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ # 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) @@ -51,9 +51,9 @@ npm start ## Example -http://localhost:8000/examples/ + -online example: http://react-component.github.io/m-date-picker/ +online example: ## react-native @@ -68,7 +68,6 @@ react-native run-ios [![rmc-date-picker](https://nodei.co/npm/rmc-date-picker.png)](https://npmjs.org/package/rmc-date-picker) - ## API ### DatePicker props @@ -94,6 +93,7 @@ react-native run-ios |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 | | +|format | Customize year、month、day sequence | string:[] | ['year','month','date'] | ### rmc-date-picker/lib/Popup props @@ -115,7 +115,6 @@ react-native run-ios |dismissText | dismiss button text | string/React.ReactElement | 'Dismiss' | |title | Popup title | string/React.ReactElement | '' | - ## Test Case ``` diff --git a/examples/popup.tsx b/examples/popup.tsx index c220118..fa3bad5 100644 --- a/examples/popup.tsx +++ b/examples/popup.tsx @@ -50,6 +50,7 @@ class Demo extends React.Component { defaultDate={now} mode={props.mode} locale={props.locale} + format={['month', 'day', 'year']} /> ); return (
diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 2104a78..e38afaa 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -62,16 +62,24 @@ class DatePicker extends React.Component { const { mode } = props; let newValue = cloneDate(this.getDate()); if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) { - switch (index) { + let type = index; + const formatArray = this.getFormatArray(); + if ( formatArray.length >= 1 && (index + 1 <= formatArray.length)) { + type = formatArray[index]; + } + switch (type) { case 0: + case 'year': newValue.setFullYear(value); break; case 1: + case '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 'day': newValue.setDate(value); break; case 3: @@ -260,7 +268,15 @@ class DatePicker extends React.Component { } const monthCol = { key: 'month', props: { children: months } }; if (mode === MONTH) { - return [yearCol, monthCol]; + const formatArray = this.getFormatArray(); + const dateSequence = formatArray.map((item) => { + if (item === 'year') { + return yearCol; + } else if (item === 'month') { + return monthCol; + } + }); + return dateSequence; } const days: any[] = []; @@ -280,11 +296,17 @@ class DatePicker extends React.Component { label, }); } - return [ - yearCol, - monthCol, - { key: 'day', props: { children: days } }, - ]; + const formatArray = this.getFormatArray(); + const dateSequence = formatArray.map((item) => { + if (item === 'year') { + return yearCol; + } else if (item === 'month') { + return monthCol; + } else if (item === 'day') { + return { key: 'day', props: { children: days } }; + } + }); + return dateSequence; } getDisplayHour(rawHour) { @@ -422,24 +444,23 @@ class DatePicker extends React.Component { const date = this.getDate(); let cols: any[] = []; let value: any[] = []; - if (mode === YEAR) { return { cols: this.getDateData(), - value: [date.getFullYear() + ''], + value: this.formatValue(), }; } if (mode === MONTH) { return { cols: this.getDateData(), - value: [date.getFullYear() + '', date.getMonth() + ''], + value: this.formatValue(), }; } if (mode === DATETIME || mode === DATE) { cols = this.getDateData(); - value = [date.getFullYear() + '', date.getMonth() + '', date.getDate() + '']; + value = this.formatValue(); } if (mode === DATETIME || mode === TIME) { @@ -460,6 +481,38 @@ class DatePicker extends React.Component { }; } + getFormatArray = () => { + const props = this.props; + const { mode, format = [] } = props; + let formatArray = format; + if (mode === DATETIME || mode === DATE) { + formatArray = formatArray.length === 3 ? formatArray : ['year', 'month', 'day']; + } else if (mode === MONTH) { + formatArray = formatArray.length === 2 ? formatArray : ['year', 'month']; + formatArray = formatArray.filter((item) => { + return item !== 'day'; + }); + } else if (mode === YEAR) { + formatArray = ['year']; + } + return formatArray; + } + + formatValue = () => { + const formatArray = this.getFormatArray(); + const date = this.getDate(); + const values = formatArray.map((item) => { + if (item === 'year') { + return date.getFullYear() + ''; + } else if (item === 'month') { + return date.getMonth() + ''; + } else if (item === 'day') { + return date.getDate() + ''; + } + }); + return values; + } + render() { const { value, cols } = this.getValueCols(); const { diff --git a/src/IDatePickerProps.tsx b/src/IDatePickerProps.tsx index 12723be..8485d3c 100644 --- a/src/IDatePickerProps.tsx +++ b/src/IDatePickerProps.tsx @@ -25,6 +25,7 @@ interface IDatePickerProps { pickerPrefixCls?: string; className?: string; use12Hours?: boolean; + format?: string[]; } export default IDatePickerProps;