From c15ae0cc6688c3249e3f782535d3aba278c44413 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B2=B3=E7=94=9F=E6=B9=96?= Date: Wed, 1 Jul 2020 19:40:42 +0800 Subject: [PATCH 1/4] feat: support self define date format such as: DD-MM-YYYY, MM-DD-YYYY and so on --- examples/popup.tsx | 6 ++- src/DatePicker.tsx | 80 ++++++++++++++++++++++++++++++++++------ src/IDatePickerProps.tsx | 1 + 3 files changed, 73 insertions(+), 14 deletions(-) diff --git a/examples/popup.tsx b/examples/popup.tsx index c220118..f106a07 100644 --- a/examples/popup.tsx +++ b/examples/popup.tsx @@ -13,8 +13,9 @@ import { cn, format, minDate, maxDate, now } from './utils'; class Demo extends React.Component { static defaultProps = { - mode: 'datetime', - locale: cn ? zhCn : enUs, + mode: 'year', + // locale: cn ? zhCn : enUs, + locale: zhCn }; constructor(props) { @@ -50,6 +51,7 @@ class Demo extends React.Component { defaultDate={now} mode={props.mode} locale={props.locale} + format={['day', 'month', ]} /> ); return (
diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 2104a78..7d3f3c1 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:any = 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: @@ -220,7 +228,7 @@ class DatePicker extends React.Component { } getDateData() { - const { locale, formatMonth, formatDay, mode } = this.props; + const { locale, formatMonth, formatDay, mode, format } = this.props; const date = this.getDate(); const selYear = date.getFullYear(); const selMonth = date.getMonth(); @@ -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,41 @@ class DatePicker extends React.Component { }; } + getFormatArray = () => { + const props = this.props; + const { mode, format = [] } = props; + let defaultFormat:string[] = []; + let formatArray = format || defaultFormat; + if(mode === DATETIME || mode === DATE) { + defaultFormat = ['year', 'month', 'day']; + formatArray = formatArray.length === 3 ? formatArray : defaultFormat; + } else if (mode === MONTH) { + defaultFormat = ['year', 'month']; + formatArray = formatArray.length === 2 ? formatArray : ['year', 'month']; + formatArray = format.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..e26dfe8 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; From ec784b671e2505270079f56d5f1c765bd3279322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B2=B3=E7=94=9F=E6=B9=96?= Date: Wed, 1 Jul 2020 19:41:07 +0800 Subject: [PATCH 2/4] feat: update example file and format code --- examples/popup.tsx | 5 ++--- src/DatePicker.tsx | 14 +++++++------- src/IDatePickerProps.tsx | 2 +- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/examples/popup.tsx b/examples/popup.tsx index f106a07..170fd52 100644 --- a/examples/popup.tsx +++ b/examples/popup.tsx @@ -14,8 +14,7 @@ import { cn, format, minDate, maxDate, now } from './utils'; class Demo extends React.Component { static defaultProps = { mode: 'year', - // locale: cn ? zhCn : enUs, - locale: zhCn + locale: cn ? zhCn : enUs, }; constructor(props) { @@ -51,7 +50,7 @@ class Demo extends React.Component { defaultDate={now} mode={props.mode} locale={props.locale} - format={['day', 'month', ]} + format={['year', 'month', 'day']} /> ); return (
diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 7d3f3c1..82b45af 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -62,10 +62,10 @@ class DatePicker extends React.Component { const { mode } = props; let newValue = cloneDate(this.getDate()); if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) { - let type:any = index; + let type = index; const formatArray = this.getFormatArray(); - if( formatArray.length >= 1 && (index + 1 <= formatArray.length)) { - type = formatArray[index] + if ( formatArray.length >= 1 && (index + 1 <= formatArray.length)) { + type = formatArray[index]; } switch (type) { case 0: @@ -484,9 +484,9 @@ class DatePicker extends React.Component { getFormatArray = () => { const props = this.props; const { mode, format = [] } = props; - let defaultFormat:string[] = []; + let defaultFormat: string[] = []; let formatArray = format || defaultFormat; - if(mode === DATETIME || mode === DATE) { + if (mode === DATETIME || mode === DATE) { defaultFormat = ['year', 'month', 'day']; formatArray = formatArray.length === 3 ? formatArray : defaultFormat; } else if (mode === MONTH) { @@ -494,8 +494,8 @@ class DatePicker extends React.Component { formatArray = formatArray.length === 2 ? formatArray : ['year', 'month']; formatArray = format.filter((item) => { return item !== 'day'; - }) - } else if(mode === YEAR) { + }); + } else if (mode === YEAR) { formatArray = ['year']; } return formatArray; diff --git a/src/IDatePickerProps.tsx b/src/IDatePickerProps.tsx index e26dfe8..8485d3c 100644 --- a/src/IDatePickerProps.tsx +++ b/src/IDatePickerProps.tsx @@ -25,7 +25,7 @@ interface IDatePickerProps { pickerPrefixCls?: string; className?: string; use12Hours?: boolean; - format?: string[] + format?: string[]; } export default IDatePickerProps; From 34102b8940f1adc1a55e5054c43f2ceab57ff0b3 Mon Sep 17 00:00:00 2001 From: Qinjiu Date: Wed, 1 Jul 2020 20:25:38 +0800 Subject: [PATCH 3/4] feat: optimize code --- examples/popup.tsx | 4 ++-- src/DatePicker.tsx | 11 ++++------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/examples/popup.tsx b/examples/popup.tsx index 170fd52..fa3bad5 100644 --- a/examples/popup.tsx +++ b/examples/popup.tsx @@ -13,7 +13,7 @@ import { cn, format, minDate, maxDate, now } from './utils'; class Demo extends React.Component { static defaultProps = { - mode: 'year', + mode: 'datetime', locale: cn ? zhCn : enUs, }; @@ -50,7 +50,7 @@ class Demo extends React.Component { defaultDate={now} mode={props.mode} locale={props.locale} - format={['year', 'month', 'day']} + format={['month', 'day', 'year']} /> ); return (
diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 82b45af..e38afaa 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -228,7 +228,7 @@ class DatePicker extends React.Component { } getDateData() { - const { locale, formatMonth, formatDay, mode, format } = this.props; + const { locale, formatMonth, formatDay, mode } = this.props; const date = this.getDate(); const selYear = date.getFullYear(); const selMonth = date.getMonth(); @@ -484,15 +484,12 @@ class DatePicker extends React.Component { getFormatArray = () => { const props = this.props; const { mode, format = [] } = props; - let defaultFormat: string[] = []; - let formatArray = format || defaultFormat; + let formatArray = format; if (mode === DATETIME || mode === DATE) { - defaultFormat = ['year', 'month', 'day']; - formatArray = formatArray.length === 3 ? formatArray : defaultFormat; + formatArray = formatArray.length === 3 ? formatArray : ['year', 'month', 'day']; } else if (mode === MONTH) { - defaultFormat = ['year', 'month']; formatArray = formatArray.length === 2 ? formatArray : ['year', 'month']; - formatArray = format.filter((item) => { + formatArray = formatArray.filter((item) => { return item !== 'day'; }); } else if (mode === YEAR) { From 03dbaef93b0dea7573f696fa89789af19c9d1ede Mon Sep 17 00:00:00 2001 From: Qinjiu Date: Wed, 1 Jul 2020 20:34:40 +0800 Subject: [PATCH 4/4] feat: update readme document --- README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) 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 ```