fix bug

src/components/QRScannerBorder.js

+import React, { Component } from 'react';
+import
+{
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  Animated,
+  Easing,
+  Text,
+  Image,
+} from 'react-native';
+
+/**
+ * 扫描界面遮罩
+ * 单独写一个类，方便拷贝使用
+ */
+class QRScannerBorder extends Component {
+  static defaultProps = {
+    maskColor: '#0000004D',
+    cornerColor: '#22ff00',
+    borderColor: '#000000',
+    rectHeight: 200,
+    rectWidth: 200,
+    borderWidth: 0,
+    cornerBorderWidth: 4,
+    cornerBorderLength: 20,
+    isLoading: false,
+    cornerOffsetSize: 0,
+    isCornerOffset: false,
+    bottomMenuHeight: 0,
+    scanBarAnimateTime: 2500,
+    scanBarColor: '#22ff00',
+    scanBarImage: null,
+    scanBarHeight: 1.5,
+    scanBarMargin: 6,
+    hintText: '将二维码/条码放入框内，即可自动扫描',
+    hintTextStyle: { color: '#fff', fontSize: 14, backgroundColor: 'transparent' },
+    hintTextPosition: 130,
+    isShowScanBar: true,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.getBackgroundColor = this.getBackgroundColor.bind(this);
+    this.getRectSize = this.getRectSize.bind(this);
+    this.getCornerSize = this.getCornerSize.bind(this);
+    this.renderLoadingIndicator = this.renderLoadingIndicator.bind(this);
+
+    this.state = {
+      topWidth: 0,
+      topHeight: 0,
+      leftWidth: 0,
+      animatedValue: new Animated.Value(0),
+    };
+  }
+  componentDidMount() {
+    this.scannerLineMove();
+  }
+
+  // 获取背景颜色
+  getBackgroundColor() {
+    return ({
+      backgroundColor: this.props.maskColor,
+    });
+  }
+
+  // 获取扫描框背景大小
+  getRectSize() {
+    return ({
+      height: this.props.rectHeight,
+      width: this.props.rectWidth,
+    });
+  }
+
+  // 获取扫描框边框大小
+  getBorderSize() {
+    if (this.props.isCornerOffset) {
+      return ({
+        height: this.props.rectHeight - this.props.cornerOffsetSize * 2,
+        width: this.props.rectWidth - this.props.cornerOffsetSize * 2,
+      });
+    } else {
+      return ({
+        height: this.props.rectHeight,
+        width: this.props.rectWidth,
+      });
+    }
+  }
+
+  // 获取扫描框转角的颜色
+  getCornerColor() {
+    return ({
+      borderColor: this.props.cornerColor,
+    });
+  }
+
+  // 获取扫描框转角的大小
+  getCornerSize() {
+    return ({
+      height: this.props.cornerBorderLength,
+      width: this.props.cornerBorderLength,
+    });
+  }
+
+  // 获取扫描框大小
+  getBorderWidth() {
+    return ({
+      borderWidth: this.props.borderWidth,
+    });
+  }
+
+  // 获取扫描框颜色
+  getBorderColor() {
+    return ({
+      borderColor: this.props.borderColor,
+    });
+  }
+  // 获取顶部遮罩高度
+  getTopMaskHeight() {
+    if (this.props.isCornerOffset) {
+      return this.state.topHeight + this.props.rectHeight - this.props.cornerOffsetSize;
+    } else {
+      return this.state.topHeight + this.props.rectHeight;
+    }
+  }
+  // 获取底部遮罩高度
+  getBottomMaskHeight() {
+    if (this.props.isCornerOffset) {
+      return this.props.rectHeight + this.state.topHeight - this.props.cornerOffsetSize;
+    } else {
+      return this.state.topHeight + this.props.rectHeight;
+    }
+  }
+  // 渲染加载动画
+
+  // 获取左右两边遮罩高度
+  getSideMaskHeight() {
+    if (this.props.isCornerOffset) {
+      return this.props.rectHeight - this.props.cornerOffsetSize * 2;
+    } else {
+      return this.props.rectHeight;
+    }
+  }
+
+  // 获取左右两边遮罩宽度
+  getSideMaskWidth() {
+    if (this.props.isCornerOffset) {
+      return this.state.leftWidth + this.props.cornerOffsetSize;
+    } else {
+      return this.state.leftWidth;
+    }
+  }
+
+  getBottomMenuHeight() {
+    return ({
+      bottom: this.props.bottomMenuHeight,
+    });
+  }
+
+  getScanBarMargin() {
+    return ({
+      marginRight: this.props.scanBarMargin,
+      marginLeft: this.props.scanBarMargin,
+    });
+  }
+
+  getScanImageWidth() {
+    return this.props.rectWidth - this.props.scanBarMargin * 2;
+  }
+  // 测量整个扫描组件的大小
+  measureTotalSize(e) {
+    const totalSize = e.layout;
+    this.setState({
+      topWidth: totalSize.width,
+    });
+  }
+  // 测量扫描框的位置
+  measureRectPosition(e) {
+    const rectSize = e.layout;
+    this.setState({
+      topHeight: rectSize.y,
+      leftWidth: rectSize.x,
+    });
+  }
+
+  scannerLineMove() {
+    this.state.animatedValue.setValue(0); // 重置Rotate动画值为0
+    Animated.timing(this.state.animatedValue, {
+      toValue: this.props.rectHeight,
+      duration: this.props.scanBarAnimateTime,
+      easing: Easing.linear,
+    }).start(() => this.scannerLineMove());
+  }
+  // 绘制扫描线
+  renderScanBar() {
+    if (!this.props.isShowScanBar) return;
+    if (this.props.scanBarImage) {
+      return (
+        <Image
+          style={{ resizeMode: 'contain', width: this.getScanImageWidth() }}
+          source={this.props.scanBarImage}
+        />
+      );
+    } else {
+      return (
+        <View style={[this.getScanBarMargin(), {
+          backgroundColor: this.props.scanBarColor,
+          height: this.props.scanBarHeight,
+        }]}
+        />
+      );
+    }
+  }
+  renderLoadingIndicator() {
+    if (!this.props.isLoading) {
+      return null;
+    }
+
+    return (
+      <ActivityIndicator
+        animating={this.props.isLoading}
+        color={this.props.color}
+        size="large"
+      />
+    );
+  }
+  render() {
+    const animatedStyle = {
+      transform: [
+        { translateY: this.state.animatedValue },
+      ],
+    };
+
+    return (
+      <View
+        onLayout={({ nativeEvent: e }) => this.measureTotalSize(e)}
+        style={[styles.container, this.getBottomMenuHeight()]}
+      >
+        <View
+          style={[styles.viewfinder, this.getRectSize()]}
+          onLayout={({ nativeEvent: e }) => this.measureRectPosition(e)}
+        >
+          {/* 扫描框边线 */}
+          <View style={[
+            this.getBorderSize(),
+            this.getBorderColor(),
+            this.getBorderWidth(),
+          ]}
+          >
+
+            <Animated.View
+              style={[
+                animatedStyle,
+              ]}
+            >
+              {this.renderScanBar()}
+            </Animated.View>
+          </View>
+
+          {/* 扫描框转角-左上角 */}
+          <View style={[
+            this.getCornerColor(),
+            this.getCornerSize(),
+            styles.topLeftCorner,
+            {
+              borderLeftWidth: this.props.cornerBorderWidth,
+              borderTopWidth: this.props.cornerBorderWidth,
+            },
+          ]}
+          />
+
+          {/* 扫描框转角-右上角 */}
+          <View style={[
+            this.getCornerColor(),
+            this.getCornerSize(),
+            styles.topRightCorner,
+            {
+              borderRightWidth: this.props.cornerBorderWidth,
+              borderTopWidth: this.props.cornerBorderWidth,
+            },
+          ]}
+          />
+
+          {/* 加载动画 */}
+          {this.renderLoadingIndicator()}
+
+          {/* 扫描框转角-左下角 */}
+          <View style={[
+            this.getCornerColor(),
+            this.getCornerSize(),
+            styles.bottomLeftCorner,
+            {
+              borderLeftWidth: this.props.cornerBorderWidth,
+              borderBottomWidth: this.props.cornerBorderWidth,
+            },
+          ]}
+          />
+
+          {/* 扫描框转角-右下角 */}
+          <View style={[
+            this.getCornerColor(),
+            this.getCornerSize(),
+            styles.bottomRightCorner,
+            {
+              borderRightWidth: this.props.cornerBorderWidth,
+              borderBottomWidth: this.props.cornerBorderWidth,
+            },
+          ]}
+          />
+        </View>
+
+        <View style={[
+          this.getBackgroundColor(),
+          styles.topMask,
+          {
+            bottom: this.getTopMaskHeight(),
+            width: this.state.topWidth,
+          },
+        ]}
+        />
+
+        <View style={[
+          this.getBackgroundColor(),
+          styles.leftMask,
+          {
+            height: this.getSideMaskHeight(),
+            width: this.getSideMaskWidth(),
+          },
+        ]}
+        />
+
+        <View style={[
+          this.getBackgroundColor(),
+          styles.rightMask,
+          {
+            height: this.getSideMaskHeight(),
+            width: this.getSideMaskWidth(),
+          }]}
+        />
+
+        <View style={[
+          this.getBackgroundColor(),
+          styles.bottomMask,
+          {
+            top: this.getBottomMaskHeight(),
+            width: this.state.topWidth,
+          }]}
+        />
+
+        <View style={{ position: 'absolute', bottom: this.props.hintTextPosition }}>
+          <Text style={this.props.hintTextStyle}>{this.props.hintText}</Text>
+        </View>
+
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  buttonsContainer: {
+    position: 'absolute',
+    height: 100,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+  },
+  viewfinder: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  topLeftCorner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  topRightCorner: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+  bottomLeftCorner: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  bottomRightCorner: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  },
+  topMask: {
+    position: 'absolute',
+    top: 0,
+  },
+  leftMask: {
+    position: 'absolute',
+    left: 0,
+  },
+  rightMask: {
+    position: 'absolute',
+    right: 0,
+  },
+  bottomMask: {
+    position: 'absolute',
+    bottom: 0,
+  },
+});
+export default QRScannerBorder;
+

src/components/QRScannerViewComponent.js

+import React, { Component } from 'react';
+import Camera from 'react-native-camera';
+import
+{
+  StyleSheet,
+  View,
+} from 'react-native';
+import QRScannerBorder from './QRScannerBorder';
+/**
+ * 扫描界面
+ */
+class QRScannerViewComponent extends Component {
+  static defaultProps = {
+    maskColor: '#0000004D',
+    cornerColor: '#22ff00',
+    borderColor: '#000000',
+    rectHeight: 200,
+    rectWidth: 200,
+    borderWidth: 0,
+    cornerBorderWidth: 4,
+    cornerBorderLength: 20,
+    isLoading: false,
+    cornerOffsetSize: 0,
+    isCornerOffset: false,
+    bottomMenuHeight: 0,
+    scanBarAnimateTime: 2500,
+    scanBarColor: '#22ff00',
+    scanBarImage: null,
+    scanBarHeight: 1.5,
+    scanBarMargin: 6,
+    hintText: '将二维码/条码放入框内，即可自动扫描',
+    hintTextStyle: { color: '#fff', fontSize: 14, backgroundColor: 'transparent' },
+    hintTextPosition: 130,
+    isShowScanBar: true,
+  };
+
+  constructor(props) {
+    super(props);
+    // 通过这句代码屏蔽 YellowBox
+    console.disableYellowBox = true;
+  }
+
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <Camera
+          onBarCodeRead={this.props.onScanResultReceived}
+          style={{ flex: 1 }}
+        >
+          {/* 绘制顶部标题栏组件 */}
+          {this.props.renderTopBarView()}
+
+          {/* 绘制扫描遮罩 */}
+          <QRScannerBorder
+            maskColor={this.props.maskColor}
+            cornerColor={this.props.cornerColor}
+            borderColor={this.props.borderColor}
+            rectHeight={this.props.rectHeight}
+            rectWidth={this.props.rectWidth}
+            borderWidth={this.props.borderWidth}
+            cornerBorderWidth={this.props.cornerBorderWidth}
+            cornerBorderLength={this.props.cornerBorderLength}
+            isLoading={this.props.isLoading}
+            cornerOffsetSize={this.props.cornerOffsetSize}
+            isCornerOffset={this.props.isCornerOffset}
+            bottomMenuHeight={this.props.bottomMenuHeight}
+            scanBarAnimateTime={this.props.scanBarAnimateTime}
+            scanBarColor={this.props.scanBarColor}
+            scanBarHeight={this.props.scanBarHeight}
+            scanBarMargin={this.props.scanBarMargin}
+            hintText={this.props.hintText}
+            hintTextStyle={this.props.hintTextStyle}
+            scanBarImage={this.props.scanBarImage}
+            hintTextPosition={this.props.hintTextPosition}
+            isShowScanBar={this.props.isShowScanBar}
+          />
+
+          {/* 绘制底部操作栏 */}
+          <View style={[styles.buttonsContainer, this.props.bottomMenuStyle]}>
+            {this.props.renderBottomMenuView()}
+          </View>
+
+        </Camera>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  buttonsContainer: {
+    position: 'absolute',
+    height: 100,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+  },
+  viewfinder: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  topLeftCorner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  topRightCorner: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+  bottomLeftCorner: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+  },
+  bottomRightCorner: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+  },
+  topMask: {
+    position: 'absolute',
+    top: 0,
+  },
+  leftMask: {
+    position: 'absolute',
+    left: 0,
+  },
+  rightMask: {
+    position: 'absolute',
+    right: 0,
+  },
+  bottomMask: {
+    position: 'absolute',
+    bottom: 0,
+  },
+});
+export default QRScannerViewComponent;
+

src/components/cameraComponent.js

-import React, { Component } from 'react';
+import React from 'react';
 import {
-  StyleSheet,
-  Text,
   View,
+  Image,
+  StatusBar,
+  StyleSheet,
+  TouchableOpacity,
 } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
 import Camera from 'react-native-camera';
 
-class CameraComponent extends Component {
-  takePicture() {
-    const options = {};
-    //options.location = ...
-    this.camera.capture({ metadata: options })
-      .then((data) => console.log(data))
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginTop: 50,
+  },
+  preview: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  overlay: {
+    position: 'absolute',
+    padding: 16,
+    right: 0,
+    left: 0,
+    alignItems: 'center',
+  },
+  topOverlay: {
+    top: 0,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  bottomOverlay: {
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  captureButton: {
+    padding: 15,
+    backgroundColor: 'white',
+    borderRadius: 40,
+  },
+  typeButton: {
+    padding: 5,
+  },
+});
+
+class CameraComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.camera = null;
+    this.state = {
+      camera: {
+        aspect: Camera.constants.Aspect.fill,
+        captureTarget: Camera.constants.CaptureTarget.cameraRoll,
+        type: Camera.constants.Type.back,
+        orientation: Camera.constants.Orientation.auto,
+      },
+      isRecording: false,
+    };
+    this.switchCam = this.switchCam.bind(this);
+    this.recording = this.recording.bind(this);
+  }
+  get typeIcon() {
+    let icon;
+    const { back, front } = Camera.constants.Type;
+    if (this.state.camera.type === back) {
+      Icon.getImageSource('camera_front', 20, 'white').then((source) => { console.info(source); icon = source.uri; });
+      console.info(icon);
+      // icon = require('./assets/ic_camera_rear_white.png');
+    } else if (this.state.camera.type === front) {
+      Icon.getImageSource('camera_rear', 20, 'white').then((source) => { console.info(source); icon = source.uri; });
+      // icon = require('./assets/ic_camera_front_white.png');
+      console.info(icon);
+    }
+
+    return icon;
+  }
+
+  get camButton() {
+    let img;
+    if (!this.state.isRecording) {
+      Icon.getImageSource('videocam', 36, 'white').then((source) => { console.info(source); img = source.uri; });
+      // img = require('./assets/ic_videocam_36pt.png');
+      console.info(img);
+    } else {
+      // img = require('./assets/ic_stop_36pt.png');
+      Icon.getImageSource('stop', 36, 'white').then((source) => { console.info(source); img = source.uri; });
+      console.info(img);
+    }
+    return img;
+  }
+  switchCam() {
+    let newType;
+    const { back, front } = Camera.constants.Type;
+
+    if (this.state.camera.type === back) {
+      newType = front;
+    } else if (this.state.camera.type === front) {
+      newType = back;
+    }
+
+    this.setState({
+      camera: {
+        ...this.state.camera,
+        type: newType,
+      },
+    });
+  }
+
+  recording() {
+    console.log(!this.state.isRecording);
+    if (!this.state.isRecording) {
+      if (this.camera) {
+        this.camera.capture({ mode: Camera.constants.CaptureMode.video })
+          .then(data => console.log(data))
           .catch(err => console.error(err));
+        this.setState({ isRecording: true });
+      }
+      console.log('recording');
+    } else {
+      if (this.camera) {
+        this.camera.stopCapture();
+        this.setState({ isRecording: false });
+      }
+      console.log('stopped ');
+    }
   }
+
   render() {
     return (
       <View style={styles.container}>
+        <StatusBar animated hidden={false} />
         <Camera
           ref={(cam) => {
             this.camera = cam;
           }}
           style={styles.preview}
-          aspect={Camera.constants.Aspect.fill}
-          barCodeTypes={['pdf417', 'code128']}
-          onBarCodeRead={evt => console.log(evt)}
-        >
-          <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
-        </Camera>
+          aspect={this.state.camera.aspect}
+          captureTarget={this.state.camera.captureTarget}
+          type={this.state.camera.type}
+          defaultTouchToFocus
+          mirrorImage={false}
+        />
+        <View style={[styles.overlay, styles.topOverlay]}>
+          <TouchableOpacity style={styles.typeButton} onPress={this.switchCam}>
+            <Image source={this.typeIcon} />
+          </TouchableOpacity>
+        </View>
+        <View style={[styles.overlay, styles.bottomOverlay]}>
+          <TouchableOpacity style={styles.captureButton} onPress={this.recording}>
+            <Image source={this.camButton} />
+          </TouchableOpacity>
+        </View>
       </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  preview: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  capture: {
-    flex: 0,
-    backgroundColor: '#fff',
-    borderRadius: 5,
-    color: '#000',
-    padding: 10,
-    margin: 40,
-  },
-});
 export default CameraComponent;
+

src/models/peopleInfo/peopleInfo.js

@@ -158,12 +158,14 @@ export default {
         detailData: payload,
       };
     },
-    setdetailData(state, { payload: { peopleName, idcard, birthDay, people } }) {
+    setdetailData(state, { payload: { peopleName, idcard, birthDay, people, sex, addr } }) {
       const detailData = {
         xingMing: peopleName,
         identityCard: idcard,
         birthday: birthDay,
         minZu: people,
+        xingBie: sex,
+        huJiDiZhi: addr,
       };
       return { ...state, detailData };
     },

src/routes/main/common/QRScannerScreen.js

+import React, { Component } from 'react';
+import { Text } from 'react-native';
+import QRScannerViewComponent from '../../../components/QRScannerViewComponent';
+
+class QRScannerScreen extends Component {
+  barcodeReceived= (e) => {
+    console.info(`Type: ${e.type}Data: ${e.data}`);
+  }
+  renderTitleBar= () => {
+    return (
+      <Text
+        style={{ color: 'white', textAlignVertical: 'center', textAlign: 'center', font: 20, padding: 12 }}
+      >这里添加标题
+      </Text>
+    );
+  }
+
+  renderMenu =() => {
+    return (
+      <Text
+        style={{ color: 'white', textAlignVertical: 'center', textAlign: 'center', font: 20, padding: 12 }}
+      >这里添加底部菜单
+      </Text>
+    );
+  }
+  render() {
+    return (
+      <QRScannerViewComponent
+        onScanResultReceived={this.barcodeReceived}
+        renderTopBarView={this.renderTitleBar}
+        renderBottomMenuView={this.renderMenu}
+      />
+    );
+  }
+}
+export default QRScannerScreen;

src/routes/main/dangshireninfo/DSRInfoDetailScreen.js

@@ -8,7 +8,6 @@ import { List, InputItem, Toast, WhiteSpace, WingBlank } from 'antd-mobile';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { connect } from 'react-redux';
 import { createAction } from '../../../utils';
-import CameraComponent from '../../../components/cameraComponent';
 
 @connect(({ DSRInfoDetail }) => ({ DSRInfoDetail }))
 class DSRInfoDetailScreen extends React.Component {
@@ -17,7 +16,8 @@ class DSRInfoDetailScreen extends React.Component {
     this.props.dispatch(createAction('DSRInfoDetail/getDSRInfoDetail')(id));
   }
   onEdit =() => {
-    this.props.dispatch(createAction('DSRInfoDetail/setEnable')(true));
+    // this.props.dispatch(createAction('DSRInfoDetail/setEnable')(true));
+    this.props.navigation.navigate('CameraPhoto');
   };
   onSubmit = () => {
     this.props.form.validateFields({ force: true }, (error, value) => {

src/routes/main/index.js

@@ -8,6 +8,8 @@ import peopleInfoErJiScreen from './peopleInfo/index';
 import DSRErJiScreen from './dangshireninfo/index';
 import quanshuInfoErJiScreen from './quanshuInfo/index';
 import TabBarComponent from '../../components/tabBarComponent';
+import QRScannerScreen from './common/QRScannerScreen';
+import CameraComponent from '../../components/cameraComponent';
 
 const Content = TabNavigator({
   FWInfo: {
@@ -91,6 +93,12 @@ const MainWindow = StackNavigator(
     personCenter: {
       screen: userInfoPageScreen,
     },
+    QRScan: {
+      screen: QRScannerScreen,
+    },
+    CameraPhoto: {
+      screen: CameraComponent,
+    },
   },
   {
     headerMode: 'none',

src/utils/config.js

@@ -30,8 +30,8 @@ const config = {
   productId: 'manager-app-sz',
   footerText: '上海铂蓝信息科技有限公司',
   contextPath: '',
-  apiContextPath: 'http://14.21.68.149:9089/test',
-  // apiContextPath: 'http://192.168.1.22:8080/bm',
+  // apiContextPath: 'http://14.21.68.149:9089/test',
+  apiContextPath: 'http://192.168.1.22:8080/bm',
   defaultDateFormat,
   defaultTimeFormat,
   defaultDateTimeFormat,