Remove moment (#31)

* remove moment.js

* up HISTORY.md

* use constant var

* upgrade rmc-picker

* add test, remove unused code

* fix setMonth

* add use12Hours support

* fix use12Hours, ref ant-design/ant-design-mobile#1578

* improve HISTORY

.travis.yml

@@ -16,16 +16,16 @@ before_install:
       echo "Only docs were updated, stopping build process."
       exit
     fi
+    npm install npm@3.x -g
     phantomjs --version
 script:
 - |
     if [ "$TEST_TYPE" = test ]; then
-      npm test
+      npm test && bash <(curl -s https://codecov.io/bash) -cF rn
     else
       npm run $TEST_TYPE
     fi
 env:
   matrix:
   - TEST_TYPE=lint
-  - TEST_TYPE=test
-  - TEST_TYPE=coverage
+  - TEST_TYPE=test

HISTORY.md

@@ -1,6 +1,11 @@
 # History
 ----
 
+## 6.x
+
+- Remove moment.js and change date type from Moment to Date.
+- Add use12Hours prop.
+
 ## 5.2.0 / 2016-12-17
 
 - support formatMonth/formatDay

README.md

@@ -8,7 +8,7 @@ React Mobile DatePicker Component (web and react-native)
 ![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]
-[![Test coverage][coveralls-image]][coveralls-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]
@@ -17,8 +17,6 @@ React Mobile DatePicker Component (web and react-native)
 [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
-[coveralls-image]: https://img.shields.io/coveralls/react-component/m-date-picker.svg?style=flat-square
-[coveralls-url]: https://coveralls.io/r/react-component/m-date-picker?branch=master
 [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
@@ -87,16 +85,17 @@ react-native run-ios
 |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. | moment | |
-|date | The currently selected date. | moment |  |
+|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 | moment | 2000-1-1 |
-|maxDate | max date | moment | 2030-1-1 |
+|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' |
-|onDateChange | Date change handler. | Function(date: moment) | '' |
+|onDateChange | Date change handler. | Function(date: Date) | '' |
 |minuteStep | The amount of time, in minutes, between each minute item. | Number | 1 |
-|formatMonth | Customize display value of months | (month:number, current:moment) => React.Node | |
-|formatDay | Customize display value of days | (day:number, current:moment) => React.Node | |
+|formatMonth | Customize display value of months | (month:number, current:Date) => React.Node | |
+|formatDay | Customize display value of days | (day:number, current:Date) => React.Node | |
+|use12Hours | 12 hours display mode | Boolean | false |
 
 ### rmc-date-picker/lib/Popup props
 
@@ -109,9 +108,9 @@ react-native run-ios
 |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. | moment |  |
+|date | The currently selected date. | Date |  |
 |visible | whether pop picker is visible | Boolean | false |
-|onChange | exec on ok | Function(date: moment) |  |
+|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' |

examples/popup.tsx

@@ -7,32 +7,9 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PopPicker from '../src/Popup';
 import DatePicker from '../src/DatePicker';
-
-import moment from 'moment';
 import zhCn from '../src/locale/zh_CN';
 import enUs from '../src/locale/en_US';
-import 'moment/locale/zh-cn';
-import 'moment/locale/en-gb';
-
-const cn = location.search.indexOf('cn') !== -1;
-
-const minDate = moment([2015, 8, 1, 0, 0, 0]);
-const maxDate = moment([2018, 1, 1, 22, 0, 0]);
-const now = moment();
-
-if (cn) {
-  minDate.locale('zh-cn').utcOffset(8);
-  maxDate.locale('zh-cn').utcOffset(8);
-  now.locale('zh-cn').utcOffset(8);
-} else {
-  minDate.locale('en-gb').utcOffset(0);
-  maxDate.locale('en-gb').utcOffset(0);
-  now.locale('en-gb').utcOffset(0);
-}
-
-function format(date) {
-  return date.format('YYYY-MM-DD HH:mm');
-}
+import { cn, format, minDate, maxDate, now } from './utils';
 
 class Demo extends React.Component<any, any> {
   static defaultProps = {

examples/react-native/picker.tsx

@@ -3,32 +3,9 @@
 import DatePicker from '../../src/DatePicker';
 import { View, Text } from 'react-native';
 import * as React from 'react';
-
-import moment from 'moment';
 import zhCn from '../../src/locale/zh_CN';
 import enUs from '../../src/locale/en_US';
-import 'moment/locale/zh-cn';
-import 'moment/locale/en-gb';
-
-const cn = false;
-
-const minDate = moment([2015, 8, 1, 0, 0, 0]);
-const maxDate = moment([2018, 1, 1, 22, 0, 0]);
-const now = moment();
-
-if (cn) {
-  minDate.locale('zh-cn').utcOffset(8);
-  maxDate.locale('zh-cn').utcOffset(8);
-  now.locale('zh-cn').utcOffset(8);
-} else {
-  minDate.locale('en-gb').utcOffset(0);
-  maxDate.locale('en-gb').utcOffset(0);
-  now.locale('en-gb').utcOffset(0);
-}
-
-function format(date) {
-  return date.format('YYYY-MM-DD HH:mm');
-}
+import { cn, format, minDate, maxDate, now } from '../utils';
 
 export class PickerDemo extends React.Component<any, any> {
   static defaultProps = {

examples/react-native/popup.tsx

@@ -5,31 +5,9 @@ import * as React from 'react';
 import PopPicker from '../../src/Popup';
 import DatePicker from '../../src/DatePicker';
 import PopupStyles from '../../src/PopupStyles';
-import moment from 'moment';
 import zhCn from '../../src/locale/zh_CN';
 import enUs from '../../src/locale/en_US';
-import 'moment/locale/zh-cn';
-import 'moment/locale/en-gb';
-
-const cn = true;
-
-const minDate = moment([2015, 8, 1, 0, 0, 0]);
-const maxDate = moment([2018, 1, 1, 22, 0, 0]);
-const now = moment();
-
-if (cn) {
-  minDate.locale('zh-cn').utcOffset(8);
-  maxDate.locale('zh-cn').utcOffset(8);
-  now.locale('zh-cn').utcOffset(8);
-} else {
-  minDate.locale('en-gb').utcOffset(0);
-  maxDate.locale('en-gb').utcOffset(0);
-  now.locale('en-gb').utcOffset(0);
-}
-
-function format(date) {
-  return date.format('YYYY-MM-DD HH:mm');
-}
+import { cn, format, minDate, maxDate, now } from '../utils';
 
 const styles = StyleSheet.create({
   button: {

examples/simple.tsx

@@ -5,31 +5,9 @@ import 'rmc-date-picker/assets/index.less';
 import DatePicker from '../src/index';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import moment from 'moment';
 import zhCn from '../src/locale/zh_CN';
 import enUs from '../src/locale/en_US';
-import 'moment/locale/zh-cn';
-import 'moment/locale/en-gb';
-
-const cn = location.search.indexOf('cn') !== -1;
-
-const minDate = moment([2015, 8, 15, 0, 0, 0]);
-const maxDate = moment([2018, 1, 1, 23, 59, 59]);
-const now = moment();
-
-if (cn) {
-  // minDate.locale('zh-cn').utcOffset(8);
-  // maxDate.locale('zh-cn').utcOffset(8);
-  now.locale('zh-cn').utcOffset(8);
-} else {
-  // minDate.locale('en-gb').utcOffset(0);
-  // maxDate.locale('en-gb').utcOffset(0);
-  now.locale('en-gb').utcOffset(0);
-}
-
-function format(date) {
-  return date.format('YYYY-MM-DD HH:mm');
-}
+import { cn, format, minDate, maxDate, now } from './utils';
 
 class Demo extends React.Component<any, any> {
   static defaultProps = {
@@ -39,7 +17,7 @@ class Demo extends React.Component<any, any> {
   constructor(props) {
     super(props);
     this.state = {
-      date: null,
+      date: new Date(2017, 2, 31, 15, 1, 1),
       mode: 'datetime',
     };
   }
@@ -82,6 +60,7 @@ class Demo extends React.Component<any, any> {
           maxDate={maxDate}
           minDate={minDate}
           onDateChange={this.onDateChange}
+          use12Hours
         />
       </div>
     </div>);

examples/time.tsx

@@ -5,36 +5,12 @@ import 'rmc-date-picker/assets/index.less';
 import DatePicker from '../src/index';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
-import moment from 'moment';
 import zhCn from '../src/locale/zh_CN';
 import enUs from '../src/locale/en_US';
-import 'moment/locale/zh-cn';
-import 'moment/locale/en-gb';
-
-const cn = location.search.indexOf('cn') !== -1;
+import { cn, format, minDate, maxDate, now } from './utils';
 
-const minDate = moment();
-const maxDate = moment();
-const now = moment();
-
-if (cn) {
-  minDate.locale('zh-cn').utcOffset(8);
-  maxDate.locale('zh-cn').utcOffset(8);
-  now.locale('zh-cn').utcOffset(8);
-} else {
-  minDate.locale('en-gb').utcOffset(0);
-  maxDate.locale('en-gb').utcOffset(0);
-  now.locale('en-gb').utcOffset(0);
-}
-
-minDate.hour(10).minute(30);
-maxDate.hour(22).minute(49);
-now.hour(15).minute(49);
-
-function format(date) {
-  return date.format('YYYY-MM-DD HH:mm');
-}
+now.setHours(15);
+now.setMinutes(49);
 
 class Demo extends React.Component<any, any> {
   static defaultProps = {

examples/utils.tsx

@@ -0,0 +1,19 @@
+
+export const minDate = new Date(2015, 8, 15, 10, 30, 0);
+export const maxDate = new Date(2018, 1, 1, 23, 49, 59);
+export let now = new Date();
+
+export const cn = typeof location !== 'undefined' ? location.search.indexOf('cn') !== -1 : false;
+if (cn) {
+  now = new Date();
+} else {
+  now = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
+}
+
+export function format(date) {
+  let mday = date.getDate();
+  let month = date.getMonth() + 1;
+  month = month < 10 ? `0${month}` : month;
+  mday = mday < 10 ? `0${mday}` : mday;
+  return `${date.getFullYear()}-${month}-${mday} ${date.getHours()}:${date.getMinutes()}`;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rmc-date-picker",
-  "version": "5.4.1",
+  "version": "6.0.0-alpha.0",
   "description": "React Mobile DatePicker Component for web and react-native",
   "keywords": [
     "react",
@@ -21,7 +21,7 @@
     "es",
     "assets/*.css"
   ],
-  "licenses": "MIT",
+  "license": "MIT",
   "main": "./lib/index",
   "module": "./es/index",
   "config": {
@@ -36,40 +36,41 @@
     "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint --no-js-lint",
     "test": "jest",
-    "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls"
+    "coverage": "jest --coverage"
   },
   "jest": {
+    "moduleFileExtensions": ["tsx", "js"],
     "collectCoverageFrom": [
-      "lib/*"
+      "src/**/*"
     ],
     "transform": {
       "\\.tsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js",
       "\\.jsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js"
     }
   },
   "devDependencies": {
-    "coveralls": "^2.11.15",
+    "enzyme": "^2.6.0",
+    "enzyme-to-json": "^1.4.5",
     "jest": "^20.0.0",
     "@types/jest": "^19.2.4",
     "@types/react": "~0.14.41",
     "@types/react-dom": "~0.14.18",
     "@types/react-native": "~0.29.36",
     "fastclick": "^1.0.6",
-    "jquery": "^2.1.4",
     "pre-commit": "1.x",
     "rc-tools": "6.x",
-    "react": "15.5.x",
-    "react-dom": "15.5.x",
+    "react": "^15.5.0",
+    "react-dom": "^15.5.0",
     "react-native": "0.41.x",
-    "react-native-index-page": "~0.2.0"
+    "react-native-index-page": "~0.2.0",
+    "react-test-renderer": "^15.5.0"
   },
   "typings": "./lib/index.d.ts",
   "pre-commit": [
     "lint"
   ],
   "dependencies": {
     "babel-runtime": "6.x",
-    "moment": "2.x",
-    "rmc-picker": "^3.8.0"
+    "rmc-picker": "^4.0.1"
   }
 }