From b931d514b7e02892b0afed003a6a6462ba2dd181 Mon Sep 17 00:00:00 2001 From: jianghongwei Date: Wed, 6 Sep 2017 20:08:07 +0800 Subject: [PATCH 1/8] features: add single date picker --- src/DatePicker.tsx | 133 ++++++++++++++++++++++++++++++++++++++------- 1 file changed, 113 insertions(+), 20 deletions(-) diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 3c19f40..078a3b3 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -8,6 +8,15 @@ function getDaysInMonth(date) { return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); } +function getDaysWithYearAndMonth(year, month) { + return new Date(year, month + 1, 0).getDate(); +} + +function increaseDay(date) { + return new Date(date.getTime() + ONE_DAY) +} + + function pad(n) { return n < 10 ? `0${n}` : n + ''; } @@ -24,8 +33,10 @@ function setMonth(date, month) { const smallPickerItem = { fontSize: 20, }; - +// mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH +// const MIXDATETIME = 'mixdatetime'; const DATETIME = 'datetime'; +const SINGLEDATETIME = 'singledatetime'; const DATE = 'date'; const TIME = 'time'; const MONTH = 'month'; @@ -61,11 +72,40 @@ class DatePicker extends React.Component { } onValueChange = (values, index) => { - const value = parseInt(values[index], 10); const props = this.props; - const { mode } = props; + const {mode} = props; let newValue = cloneDate(this.getDate()); - if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) { + + const value = parseInt(values[index], 10); + + if (mode === SINGLEDATETIME) { + + switch (index) { + case 0: + const mixValue = values[0].split('-'); + const year = parseInt(mixValue[0], 10) + const month = parseInt(mixValue[1], 10) + const day = parseInt(mixValue[2], 10) + + newValue.setFullYear(year); + setMonth(newValue, month); + newValue.setDate(day); + break; + case 1: + this.setHours(newValue, value); + break; + case 2: + newValue.setMinutes(value); + break; + case 3: + this.setAmPm(newValue, value); + break; + default: + break; + } + + } else if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) { + switch (index) { case 0: newValue.setFullYear(value); @@ -91,6 +131,7 @@ class DatePicker extends React.Component { break; } } else { + switch (index) { case 0: this.setHours(newValue, value); @@ -105,6 +146,8 @@ class DatePicker extends React.Component { break; } } + + newValue = this.clipDate(newValue); if (!('date' in props)) { this.setState({ @@ -211,7 +254,7 @@ class DatePicker extends React.Component { } getDateData() { - const { locale, formatMonth, formatDay, mode } = this.props; + const {locale, formatMonth, formatDay, mode} = this.props; const date = this.getDate(); const selYear = date.getFullYear(); const selMonth = date.getMonth(); @@ -228,9 +271,9 @@ class DatePicker extends React.Component { label: i + locale.year + '', }); } - const yearCol = { key: 'year', props: { children: years } }; + const yearCol = {key: 'year', props: {children: years}}; if (mode === YEAR) { - return [ yearCol ]; + return [yearCol]; } const months: any[] = []; @@ -249,7 +292,7 @@ class DatePicker extends React.Component { label, }); } - const monthCol = { key: 'month', props: { children: months } }; + const monthCol = {key: 'month', props: {children: months}}; if (mode === MONTH) { return [yearCol, monthCol]; } @@ -274,10 +317,48 @@ class DatePicker extends React.Component { return [ yearCol, monthCol, - { key: 'day', props: { children: days } }, + {key: 'day', props: {children: days}}, ]; } + getDayData = () => { + const {formatSingleDate, locale, formatMonth, formatDay,minDate,maxDate} = this.props; + const singleDate = []; + const date = this.getDate(); + + for (let d = minDate; d <= maxDate; d = increaseDay(d)) { + const year = d.getFullYear(); + const month = d.getMonth(); + const day = d.getDate(); + + const yValue = year + ''; + const yLabel = year + locale.year + '' + const mValue = month + ''; + const mLabel = formatMonth ? formatMonth(month, date) : (month + 1 + locale.month + '') + const dValue = day + ''; + const dLabel = formatDay ? formatDay(day, date) : (day + locale.day + ''); + + const value = `${yValue}-${mValue}-${dValue}`; + const label = formatSingleDate ? + formatSingleDate(yLabel, mLabel, dLabel, date) : + `${yLabel}${mLabel}${dLabel}`; + + singleDate.push({ + value: value, + label: label, + }) + } + + return [ + { + key: 'mix', + props: { + children: singleDate, + } + } + ] + } + getDisplayHour(rawHour) { // 12 hour am (midnight 00:00) -> 12 hour pm (noon 12:00) -> 12 hour am (midnight 00:00) if (this.props.use12Hours) { @@ -297,7 +378,7 @@ class DatePicker extends React.Component { let maxHour = 23; let minMinute = 0; let maxMinute = 59; - const { mode, locale, minuteStep, use12Hours } = this.props; + const {mode, locale, minuteStep, use12Hours} = this.props; const date = this.getDate(); const minDateMinute = this.getMinMinute(); const maxDateMinute = this.getMaxMinute(); @@ -342,7 +423,7 @@ class DatePicker extends React.Component { minHour = this.getDisplayHour(minHour); } else if (minHour === 0 && use12Hours) { minHour = 1; - hours.push({ value: '0', label: locale.hour ? '12' + locale.hour : '12' }); + hours.push({value: '0', label: locale.hour ? '12' + locale.hour : '12'}); } maxHour = this.getDisplayHour(maxHour); for (let i = minHour; i <= maxHour; i++) { @@ -360,11 +441,11 @@ class DatePicker extends React.Component { }); } return [ - { key: 'hours', props: { children: hours } }, - { key: 'minutes', props: { children: minutes } }, + {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 }]}, + props: {children: [{value: '0', label: locale.am}, {value: '1', label: locale.pm}]}, }] : []); } @@ -373,7 +454,7 @@ class DatePicker extends React.Component { } clipDate(date) { - const { mode } = this.props; + const {mode} = this.props; const minDate = this.getMinDate(); const maxDate = this.getMaxDate(); if (mode === DATETIME) { @@ -409,7 +490,7 @@ class DatePicker extends React.Component { } getValueCols() { - const { mode, use12Hours } = this.props; + const {mode, use12Hours} = this.props; const date = this.getDate(); let cols: any[] = []; let value: any[] = []; @@ -428,12 +509,20 @@ class DatePicker extends React.Component { }; } + + if (mode === SINGLEDATETIME) { + cols = this.getDayData(); + value = [`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`]; + } + + if (mode === DATETIME || mode === DATE) { cols = this.getDateData(); value = [date.getFullYear() + '', date.getMonth() + '', date.getDate() + '']; } - if (mode === DATETIME || mode === TIME) { + + if (mode === SINGLEDATETIME || mode === DATETIME || mode === TIME) { cols = cols.concat(this.getTimeData()); const hour = date.getHours(); let dtValue = [hour + '', date.getMinutes() + '']; @@ -444,6 +533,8 @@ class DatePicker extends React.Component { } value = value.concat(dtValue); } + + return { value, cols, @@ -451,8 +542,10 @@ class DatePicker extends React.Component { } render() { - const { value, cols } = this.getValueCols(); - const { mode, disabled, pickerPrefixCls, prefixCls, rootNativeProps, className, style } = this.props; + const {value, cols} = this.getValueCols(); + + + const {mode, disabled, pickerPrefixCls, prefixCls, rootNativeProps, className, style} = this.props; const multiStyle = { flexDirection: 'row', alignItems: 'center', @@ -469,7 +562,7 @@ class DatePicker extends React.Component { > {cols.map(p => ( Date: Wed, 6 Sep 2017 20:19:00 +0800 Subject: [PATCH 2/8] delete log --- src/DatePicker.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 078a3b3..6e061d3 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -8,10 +8,6 @@ function getDaysInMonth(date) { return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); } -function getDaysWithYearAndMonth(year, month) { - return new Date(year, month + 1, 0).getDate(); -} - function increaseDay(date) { return new Date(date.getTime() + ONE_DAY) } @@ -33,10 +29,9 @@ function setMonth(date, month) { const smallPickerItem = { fontSize: 20, }; -// mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH -// const MIXDATETIME = 'mixdatetime'; + const DATETIME = 'datetime'; -const SINGLEDATETIME = 'singledatetime'; +const SINGLEDATE_TIME = 'singledate_time'; const DATE = 'date'; const TIME = 'time'; const MONTH = 'month'; @@ -78,7 +73,7 @@ class DatePicker extends React.Component { const value = parseInt(values[index], 10); - if (mode === SINGLEDATETIME) { + if (mode === SINGLEDATE_TIME) { switch (index) { case 0: @@ -510,7 +505,7 @@ class DatePicker extends React.Component { } - if (mode === SINGLEDATETIME) { + if (mode === SINGLEDATE_TIME) { cols = this.getDayData(); value = [`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`]; } @@ -522,7 +517,7 @@ class DatePicker extends React.Component { } - if (mode === SINGLEDATETIME || mode === DATETIME || mode === TIME) { + if (mode === SINGLEDATE_TIME || mode === DATETIME || mode === TIME) { cols = cols.concat(this.getTimeData()); const hour = date.getHours(); let dtValue = [hour + '', date.getMinutes() + '']; From 78a0b113ece14245445360aa0c4507677002462a Mon Sep 17 00:00:00 2001 From: jianghongwei Date: Thu, 7 Sep 2017 13:21:42 +0800 Subject: [PATCH 3/8] fixed: the defaultDate is not between the minDate and maxDate --- src/DatePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 3c19f40..b469798 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -154,7 +154,7 @@ class DatePicker extends React.Component { } getDate() { - return this.state.date || this.getDefaultMinDate(); + return this.clipDate(this.state.date || this.getDefaultMinDate()); } // used by rmc-picker/lib/PopupMixin.js From 4cc21ec9c0e4a844e74dfa5392f3cb41ab5a0429 Mon Sep 17 00:00:00 2001 From: jianghongwei Date: Thu, 7 Sep 2017 14:03:51 +0800 Subject: [PATCH 4/8] add README and change mode name --- README.md | 2 +- src/DatePicker.tsx | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 234fef2..e828e8c 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ react-native run-ios |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') | +|mode | The date picker mode. | String | 'date' enum('date', 'time', 'datetime', 'year', 'month', 'recenttime') | |minDate | min date | Date | 2000-1-1 | |maxDate | max date | Date | 2030-1-1 | |locale | the locale of area | Object | import from 'rmc-date-picker/lib/locale/en_US' | diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index f0db3ee..7aea6b3 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -31,7 +31,7 @@ const smallPickerItem = { }; const DATETIME = 'datetime'; -const SINGLEDATE_TIME = 'singledate_time'; +const RECENT_TIME = 'recenttime'; const DATE = 'date'; const TIME = 'time'; const MONTH = 'month'; @@ -73,7 +73,7 @@ class DatePicker extends React.Component { const value = parseInt(values[index], 10); - if (mode === SINGLEDATE_TIME) { + if (mode === RECENT_TIME) { switch (index) { case 0: @@ -316,10 +316,12 @@ class DatePicker extends React.Component { ]; } - getDayData = () => { - const {formatSingleDate, locale, formatMonth, formatDay,minDate,maxDate} = this.props; + getRecentDateData = () => { + const {formatSingleDate, locale, formatMonth, formatDay,} = this.props; const singleDate = []; const date = this.getDate(); + const minDate = this.getMinDate() + const maxDate= this.getMaxDate(); for (let d = minDate; d <= maxDate; d = increaseDay(d)) { const year = d.getFullYear(); @@ -380,7 +382,7 @@ class DatePicker extends React.Component { const minDateHour = this.getMinHour(); const maxDateHour = this.getMaxHour(); const hour = date.getHours(); - if (mode === DATETIME) { + if (mode === DATETIME || mode === RECENT_TIME) { const year = date.getFullYear(); const month = date.getMonth(); const day = date.getDate(); @@ -452,7 +454,7 @@ class DatePicker extends React.Component { const {mode} = this.props; const minDate = this.getMinDate(); const maxDate = this.getMaxDate(); - if (mode === DATETIME) { + if (mode === DATETIME || mode === RECENT_TIME) { if (date < minDate) { return cloneDate(minDate); } @@ -505,7 +507,7 @@ class DatePicker extends React.Component { } - if (mode === SINGLEDATE_TIME) { + if (mode === RECENT_TIME) { cols = this.getDayData(); value = [`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`]; } @@ -517,7 +519,7 @@ class DatePicker extends React.Component { } - if (mode === SINGLEDATE_TIME || mode === DATETIME || mode === TIME) { + if (mode === RECENT_TIME || mode === DATETIME || mode === TIME) { cols = cols.concat(this.getTimeData()); const hour = date.getHours(); let dtValue = [hour + '', date.getMinutes() + '']; From 7a4d66e281793e1ac5a86e914dab1ce0920aaa85 Mon Sep 17 00:00:00 2001 From: jianghongwei Date: Thu, 7 Sep 2017 14:18:08 +0800 Subject: [PATCH 5/8] readme:add formatRecentDate --- README.md | 2 ++ src/DatePicker.tsx | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index e828e8c..c4e9a77 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,8 @@ 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 | | +|formatRecentDate | only use in `recenttime` mode. Customize display value of recent date | (year: number, month: number, day:number, current:Date) => React.Node | | + ### rmc-date-picker/lib/Popup props diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 7aea6b3..71b656b 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -317,7 +317,7 @@ class DatePicker extends React.Component { } getRecentDateData = () => { - const {formatSingleDate, locale, formatMonth, formatDay,} = this.props; + const {formatRecentDate, locale, formatMonth, formatDay,} = this.props; const singleDate = []; const date = this.getDate(); const minDate = this.getMinDate() @@ -336,8 +336,8 @@ class DatePicker extends React.Component { const dLabel = formatDay ? formatDay(day, date) : (day + locale.day + ''); const value = `${yValue}-${mValue}-${dValue}`; - const label = formatSingleDate ? - formatSingleDate(yLabel, mLabel, dLabel, date) : + const label = formatRecentDate ? + formatRecentDate(yLabel, mLabel, dLabel, date) : `${yLabel}${mLabel}${dLabel}`; singleDate.push({ From 48cc392739f56460a328015d8b659cb51e4d3728 Mon Sep 17 00:00:00 2001 From: jianghongwei Date: Fri, 8 Sep 2017 11:35:01 +0800 Subject: [PATCH 6/8] fixed lint error --- src/DatePicker.tsx | 50 +++++++++++++++++----------------------- src/IDatePickerProps.tsx | 1 + 2 files changed, 22 insertions(+), 29 deletions(-) diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 71b656b..ca2ad30 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -9,10 +9,9 @@ function getDaysInMonth(date) { } function increaseDay(date) { - return new Date(date.getTime() + ONE_DAY) + return new Date(date.getTime() + ONE_DAY); } - function pad(n) { return n < 10 ? `0${n}` : n + ''; } @@ -78,9 +77,9 @@ class DatePicker extends React.Component { switch (index) { case 0: const mixValue = values[0].split('-'); - const year = parseInt(mixValue[0], 10) - const month = parseInt(mixValue[1], 10) - const day = parseInt(mixValue[2], 10) + const year = parseInt(mixValue[0], 10); + const month = parseInt(mixValue[1], 10); + const day = parseInt(mixValue[2], 10); newValue.setFullYear(year); setMonth(newValue, month); @@ -142,7 +141,6 @@ class DatePicker extends React.Component { } } - newValue = this.clipDate(newValue); if (!('date' in props)) { this.setState({ @@ -316,12 +314,12 @@ class DatePicker extends React.Component { ]; } - getRecentDateData = () => { - const {formatRecentDate, locale, formatMonth, formatDay,} = this.props; - const singleDate = []; + getRecentDateData() { + const { formatRecentDate, locale, formatMonth, formatDay } = this.props; + const recent: any[] = []; const date = this.getDate(); - const minDate = this.getMinDate() - const maxDate= this.getMaxDate(); + const minDate = this.getMinDate(); + const maxDate = this.getMaxDate(); for (let d = minDate; d <= maxDate; d = increaseDay(d)) { const year = d.getFullYear(); @@ -329,31 +327,31 @@ class DatePicker extends React.Component { const day = d.getDate(); const yValue = year + ''; - const yLabel = year + locale.year + '' + const yLabel = year + locale.year + ''; const mValue = month + ''; - const mLabel = formatMonth ? formatMonth(month, date) : (month + 1 + locale.month + '') + const mLabel = formatMonth ? formatMonth(month, date) : (month + 1 + locale.month + ''); const dValue = day + ''; const dLabel = formatDay ? formatDay(day, date) : (day + locale.day + ''); const value = `${yValue}-${mValue}-${dValue}`; const label = formatRecentDate ? - formatRecentDate(yLabel, mLabel, dLabel, date) : + formatRecentDate(year, month, day, date) : `${yLabel}${mLabel}${dLabel}`; - singleDate.push({ - value: value, - label: label, - }) + recent.push({ + value, + label, + }); } return [ { key: 'mix', props: { - children: singleDate, - } - } - ] + children: recent, + }, + }, + ]; } getDisplayHour(rawHour) { @@ -506,19 +504,16 @@ class DatePicker extends React.Component { }; } - if (mode === RECENT_TIME) { - cols = this.getDayData(); + cols = this.getRecentDateData(); value = [`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`]; } - if (mode === DATETIME || mode === DATE) { cols = this.getDateData(); value = [date.getFullYear() + '', date.getMonth() + '', date.getDate() + '']; } - if (mode === RECENT_TIME || mode === DATETIME || mode === TIME) { cols = cols.concat(this.getTimeData()); const hour = date.getHours(); @@ -531,7 +526,6 @@ class DatePicker extends React.Component { value = value.concat(dtValue); } - return { value, cols, @@ -540,8 +534,6 @@ class DatePicker extends React.Component { render() { const {value, cols} = this.getValueCols(); - - const {mode, disabled, pickerPrefixCls, prefixCls, rootNativeProps, className, style} = this.props; const multiStyle = { flexDirection: 'row', diff --git a/src/IDatePickerProps.tsx b/src/IDatePickerProps.tsx index 017f458..df0fdcf 100644 --- a/src/IDatePickerProps.tsx +++ b/src/IDatePickerProps.tsx @@ -9,6 +9,7 @@ interface IDatePickerProps { minuteStep?: number; formatMonth?: (month: number, date?: any) => any; formatDay?: (day: number, date?: any) => any; + formatRecentDate?: (year: number, month: number, day: number, date?: any) => any; onDateChange?: (date: any) => void; onValueChange?: (vals: any, index: number) => void; style?: any; From 9e365aabe8706324dccb21a889ea39d783342d21 Mon Sep 17 00:00:00 2001 From: jianghongwei Date: Fri, 8 Sep 2017 13:13:48 +0800 Subject: [PATCH 7/8] add a example of recentTime --- examples/recentTime.html | 1 + examples/recentTime.tsx | 101 +++++++++++++++++++++++++++++++++++++++ src/DatePicker.tsx | 2 +- 3 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 examples/recentTime.html create mode 100644 examples/recentTime.tsx diff --git a/examples/recentTime.html b/examples/recentTime.html new file mode 100644 index 0000000..b3a4252 --- /dev/null +++ b/examples/recentTime.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/recentTime.tsx b/examples/recentTime.tsx new file mode 100644 index 0000000..6403884 --- /dev/null +++ b/examples/recentTime.tsx @@ -0,0 +1,101 @@ +/* tslint:disable:no-console */ + +import 'rmc-picker/assets/index.css'; +import 'rmc-date-picker/assets/index.less'; +import DatePicker from '../src/index'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import enUS from '../src/locale/en_US'; +import zhCn from '../src/locale/zh_CN'; +import { cn, format, now } from './utils'; + +const maxDate = new Date(2017, 10, 1, 23, 49, 59); +const ONE_DAY = 24 * 60 * 60 * 1000; + +class Demo extends React.Component { + static defaultProps = { + locale: cn ? zhCn : enUS , + }; + + constructor(props) { + super(props); + this.state = { + date: now, + mode: 'recentTime', + }; + } + + onDateChange = (date) => { + console.log('onChange', format(date)); + this.setState({ + date, + }); + } + + onValueChange = (values, index) => { + console.log(values, index); + } + + changeMode = (e) => { + this.setState({ + mode: e.target.value, + }); + } + + formatRecentDate = (year, month, day) => { + + const gap = this.getTimeGap(year, month, day); + + if ( gap === 0 ) { + return '今天'; + } else if (gap === 1) { + return '明天'; + } else if (gap === 2) { + return '后天'; + } else { + return `${month + 1}月${day}日`; + } + } + + getTimeGap = (year, month, day) => { + const displayTime = new Date(year, month, day).getTime(); + const today = now.getTime(); + + return Math.ceil((displayTime - today) / ONE_DAY); + } + + render() { + const props = this.props; + const { date, mode } = this.state; + + return (
+

date picker

+ + + +
+ {date && format(date) || format(now)} + +
+
); + } +} + +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index ca2ad30..46a370d 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -30,7 +30,7 @@ const smallPickerItem = { }; const DATETIME = 'datetime'; -const RECENT_TIME = 'recenttime'; +const RECENT_TIME = 'recentTime'; const DATE = 'date'; const TIME = 'time'; const MONTH = 'month'; From 20d69a03c5775082b44bc096f4af6da8d8bd4162 Mon Sep 17 00:00:00 2001 From: jianghongwei Date: Fri, 15 Sep 2017 11:34:10 +0800 Subject: [PATCH 8/8] Only change the smallest part --- src/DatePicker.tsx | 37 +++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx index 46a370d..b75b072 100644 --- a/src/DatePicker.tsx +++ b/src/DatePicker.tsx @@ -67,7 +67,7 @@ class DatePicker extends React.Component { onValueChange = (values, index) => { const props = this.props; - const {mode} = props; + const { mode } = props; let newValue = cloneDate(this.getDate()); const value = parseInt(values[index], 10); @@ -125,7 +125,6 @@ class DatePicker extends React.Component { break; } } else { - switch (index) { case 0: this.setHours(newValue, value); @@ -140,7 +139,6 @@ class DatePicker extends React.Component { break; } } - newValue = this.clipDate(newValue); if (!('date' in props)) { this.setState({ @@ -247,7 +245,7 @@ class DatePicker extends React.Component { } getDateData() { - const {locale, formatMonth, formatDay, mode} = this.props; + const { locale, formatMonth, formatDay, mode } = this.props; const date = this.getDate(); const selYear = date.getFullYear(); const selMonth = date.getMonth(); @@ -264,9 +262,9 @@ class DatePicker extends React.Component { label: i + locale.year + '', }); } - const yearCol = {key: 'year', props: {children: years}}; + const yearCol = { key: 'year', props: { children: years } }; if (mode === YEAR) { - return [yearCol]; + return [ yearCol ]; } const months: any[] = []; @@ -285,7 +283,7 @@ class DatePicker extends React.Component { label, }); } - const monthCol = {key: 'month', props: {children: months}}; + const monthCol = { key: 'month', props: { children: months } }; if (mode === MONTH) { return [yearCol, monthCol]; } @@ -310,12 +308,12 @@ class DatePicker extends React.Component { return [ yearCol, monthCol, - {key: 'day', props: {children: days}}, + { key: 'day', props: { children: days } }, ]; } getRecentDateData() { - const { formatRecentDate, locale, formatMonth, formatDay } = this.props; + const {formatRecentDate, locale, formatMonth, formatDay} = this.props; const recent: any[] = []; const date = this.getDate(); const minDate = this.getMinDate(); @@ -373,7 +371,7 @@ class DatePicker extends React.Component { let maxHour = 23; let minMinute = 0; let maxMinute = 59; - const {mode, locale, minuteStep, use12Hours} = this.props; + const { mode, locale, minuteStep, use12Hours } = this.props; const date = this.getDate(); const minDateMinute = this.getMinMinute(); const maxDateMinute = this.getMaxMinute(); @@ -418,7 +416,7 @@ class DatePicker extends React.Component { minHour = this.getDisplayHour(minHour); } else if (minHour === 0 && use12Hours) { minHour = 1; - hours.push({value: '0', label: locale.hour ? '12' + locale.hour : '12'}); + hours.push({ value: '0', label: locale.hour ? '12' + locale.hour : '12' }); } maxHour = this.getDisplayHour(maxHour); for (let i = minHour; i <= maxHour; i++) { @@ -436,11 +434,11 @@ class DatePicker extends React.Component { }); } return [ - {key: 'hours', props: {children: hours}}, - {key: 'minutes', props: {children: minutes}}, + { 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}]}, + props: { children: [{ value: '0', label: locale.am }, { value: '1', label: locale.pm }]}, }] : []); } @@ -449,7 +447,7 @@ class DatePicker extends React.Component { } clipDate(date) { - const {mode} = this.props; + const { mode } = this.props; const minDate = this.getMinDate(); const maxDate = this.getMaxDate(); if (mode === DATETIME || mode === RECENT_TIME) { @@ -485,7 +483,7 @@ class DatePicker extends React.Component { } getValueCols() { - const {mode, use12Hours} = this.props; + const { mode, use12Hours } = this.props; const date = this.getDate(); let cols: any[] = []; let value: any[] = []; @@ -525,7 +523,6 @@ class DatePicker extends React.Component { } value = value.concat(dtValue); } - return { value, cols, @@ -533,8 +530,8 @@ class DatePicker extends React.Component { } render() { - const {value, cols} = this.getValueCols(); - const {mode, disabled, pickerPrefixCls, prefixCls, rootNativeProps, className, style} = this.props; + const { value, cols } = this.getValueCols(); + const { mode, disabled, pickerPrefixCls, prefixCls, rootNativeProps, className, style } = this.props; const multiStyle = { flexDirection: 'row', alignItems: 'center', @@ -551,7 +548,7 @@ class DatePicker extends React.Component { > {cols.map(p => (