From 88e8b6876669a761cb6b01975466579b1b87e9cf Mon Sep 17 00:00:00 2001 From: rainie Date: Fri, 26 Oct 2018 12:24:50 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9A=20=20[document]=20edit=20readme=20?= =?UTF-8?q?document.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/caption.png | Bin 0 -> 19269 bytes README.md | 190 +++++++++++++++++++++++++++++++++++++++----- lib/index.js | 1 + stories/index.css | 4 + stories/index.js | 55 ++++++++++--- 5 files changed, 219 insertions(+), 31 deletions(-) create mode 100644 .github/caption.png create mode 100644 stories/index.css diff --git a/.github/caption.png b/.github/caption.png new file mode 100644 index 0000000000000000000000000000000000000000..2e83717427f9e71dced56859d14cb9cd887b0ea4 GIT binary patch literal 19269 zcmeFZcQoAJ|1PQpL6iuhixde#l;}(Z5m6?3qKqVZkKRX%2%>$os3U3+MDHzv=wC~B?D|51O(3rR21cPJPEh`$O4R®Ia38Yg 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 -set dateFormat for `['hh', 'mm', 'ss']` to configure hour, minute and second. +set `dateConfig` to configure hour, minute and second. + +```javascript +{ + 'hour': { + format: 'hh', + caption: 'Hour', + step: 1, + }, + 'minute': { + format: 'mm', + caption: 'Min', + step: 1, + }, + 'second': { + format: 'hh', + caption: 'Sec', + step: 1, + }, +} +```
@@ -54,31 +109,80 @@ set dateFormat for `['hh', 'mm', 'ss']` to configure hour, minute and second. customize the content mapping shown in the month. -```js +```javascript + const monthMap = { - '01': 'Jan', - '02': 'Feb', - '03': 'Mar', - '04': 'Apr', - '05': 'May', - '06': 'Jun', - '07': 'Jul', - '08': 'Aug', - '09': 'Sep', + '1': 'Jan', + '2': 'Feb', + '3': 'Mar', + '4': 'Apr', + '5': 'May', + '6': 'Jun', + '7': 'Jul', + '8': 'Aug', + '9': 'Sep', '10': 'Oct', '11': 'Nov', '12': 'Dec', }; +const dateConfig = { + 'year': { + format: 'YYYY', + caption: 'Year', + step: 1, + }, + 'month': { + format: value => monthMap[value.getMonth() + 1], + caption: 'Mon', + step: 1, + }, + 'date': { + format: 'DD', + caption: 'Day', + step: 1, + }, +}; + monthMap[month]], 'DD']} + dateConfig={dateConfig} /> ``` - +
+set `showCaption` to display date captions, matches the dateConfig property's caption. + +```javascript +const dateConfig = { + 'hour': { + format: 'hh', + caption: 'Hour', + step: 1, + }, + 'minute': { + format: 'mm', + caption: 'Min', + step: 1, + }, + 'second': { + format: 'hh', + caption: 'Sec', + step: 1, + }, +} + + +``` + +
+ +
## Getting Started @@ -93,7 +197,7 @@ Using [npm](https://www.npmjs.com/): The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc. -```js +```javascript // Using an ES6 transpiler like Babel import React from 'react'; import ReactDOM from 'react-dom'; @@ -104,7 +208,7 @@ import DatePicker from 'react-mobile-datepicker'; ### Usage Example -```js +```javascript class App extends React.Component { state = { time: new Date(), @@ -154,9 +258,11 @@ ReactDOM.render(, document.getElementById('react-box')); | isPopup | Boolean | true | whether as popup add a overlay | | isOpen | Boolean | false | whether to open datepicker | | theme | String | default | theme of datepicker, include 'default', 'dark', 'ios', 'android', 'android-dark' | -| dateFormat | Array | ['YYYY', 'M', 'D'] | according to year, month, day, hour, minute, second format specified display text. E.g ['YYYY年', 'MM月', 'DD日']| -| dateSteps | Array | [1, 1, 1] | set step for each time unit | -|showFormat | String | 'YYYY/MM/DD' | customize the format of the display title | +| ~~dateFormat~~(deprecated, use `dateConfig` instead) | Array | ['YYYY', 'M', 'D'] | according to year, month, day, hour, minute, second format specified display text. E.g ['YYYY年', 'MM月', 'DD日']| +| ~~dateSteps~~(deprecated), use `dateConfig` instead | Array | [1, 1, 1] | set step for each time unit | +| dateConfig | Object | [See `DateConfig` format for details](#dateconfig) | configure date unit information | +|~~showFormat~~(deprecated, use `headerFormat` instead) | String | 'YYYY/MM/DD' | customize the format of the display title | +|headerFormat | String | 'YYYY/MM/DD' | customize the format of the display title | | value | Date | new Date() | date value | | min | Date | new Date(1970, 0, 1) | minimum date | | max | Date | new Date(2050, 0, 1) | maximum date | @@ -167,6 +273,52 @@ ReactDOM.render(, document.getElementById('react-box')); | onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter | | onCancel | Function | () => {} | the callback function after click button of cancel | + +## DateConfig + +all default date configuration information, as follows + +- format: date unit display format +- caption: date unit caption +- step: date unit change interval + +```javascript +{ + 'year': { + format: 'YYYY', + caption: 'Year', + step: 1, + }, + 'month': { + format: 'M', + caption: 'Mon', + step: 1, + }, + 'date': { + format: 'D', + caption: 'Day', + step: 1, + }, + 'hour': { + format: 'hh', + caption: 'Hour', + step: 1, + }, + 'minute': { + format: 'mm', + caption: 'Min', + step: 1, + }, + 'second': { + format: 'hh', + caption: 'Sec', + step: 1, + }, +} + +``` + + ## Changelog * [Changelog](CHANGELOG.md) diff --git a/lib/index.js b/lib/index.js index b67cba2..38729e3 100644 --- a/lib/index.js +++ b/lib/index.js @@ -41,6 +41,7 @@ function ModalDatePicker({ isPopup, ...props }: ModalDatePickerProps) { ); } +ModalDatePicker.displayName = 'MobileDatePicker'; ModalDatePicker.defaultProps = defaultProps; export default ModalDatePicker; diff --git a/stories/index.css b/stories/index.css new file mode 100644 index 0000000..97f4af1 --- /dev/null +++ b/stories/index.css @@ -0,0 +1,4 @@ +.datepicker { + width: 375px; + position: relative; +} \ No newline at end of file diff --git a/stories/index.js b/stories/index.js index 27aa361..d374c2e 100644 --- a/stories/index.js +++ b/stories/index.js @@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react'; // import { linkTo } from '@storybook/addon-links'; import DatePicker from '../lib/index.js'; +import './index.css'; const props = { value: new Date(), @@ -12,17 +13,9 @@ const props = { theme: 'android' }; -const wrapStyle = { - width: 375, - height: 294, - position: 'relative', -}; - const getComponent = (options) => { return ( -
- -
+ ); }; @@ -34,11 +27,49 @@ storiesOf('Theme', module) .addWithInfo('android', () => getComponent({theme: 'android'})) .addWithInfo('android-dark', () => getComponent({theme: 'android-dark'})) -storiesOf('dateFormat', module) + + const dateConfigMap = { + 'year': { + format: 'YYYY', + caption: '年', + step: 1, + }, + 'month': { + format: 'M', + caption: '月', + step: 1, + }, + 'date': { + format: 'D', + caption: '日', + step: 1, + }, + 'hour': { + format: 'hh', + caption: '时', + step: 1, + }, + 'minute': { + format: 'mm', + caption: '分', + step: 1, + }, + 'second': { + format: 'hh', + caption: '秒', + step: 1, + }, +}; + +storiesOf('dateConfig', module) .addWithInfo('YYYY,MM,DD', () => getComponent()) - .addWithInfo('YYYY,MM,DD hh:mm', () => getComponent({dateFormat: ['YYYY', 'MM', 'DD', 'hh', 'mm'], showFormat: 'YYYY/MM/DD hh:mm'})) - .addWithInfo('hh:mm:ss', () => getComponent({dateFormat: ['hh', 'mm', 'ss'], showFormat: 'hh:mm:ss'})) + .addWithInfo('YYYY,MM,DD hh:mm', () => getComponent({dateConfig: dateConfigMap, showFormat: 'YYYY/MM/DD hh:mm'})) + .addWithInfo('hh:mm:ss', () => getComponent({dateConfig: ['hour', 'minute', 'second'], showFormat: 'hh:mm:ss'})) storiesOf('dateLimit', module) .addWithInfo('min', () => getComponent({ min: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000) })) .addWithInfo('max', () => getComponent({ max: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000) })) + +storiesOf('dateCaption', module) + .addWithInfo('default caption', () => getComponent({dateConfig: ['year', 'month', 'date', 'hour', 'minute', 'second'], showCaption: true})) + .addWithInfo('custom caption', () => getComponent({dateConfig: dateConfigMap, showCaption: true})) \ No newline at end of file