yylib-quick-mobile/dist/yylib/date-picker/YYDatePicker.js

yylib-quick-mobile

import React, {Component} from 'react';
import {DatePicker, List} from 'antd-mobile';
const Item = List.Item;
import YYIcon from '../icon/YYIcon';
import {isFunction} from '../../utils/FunctionUtil';
import classnames from 'classnames';
import './YYDatePicker.less'

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const utcOffset = new Date(now.getTime() - (now.getTimezoneOffset() * 60000));
// console.log(now, utcOffset, now.toISOString(), utcOffset.toISOString());

class YYDatePicker extends Component {
    componentWillReceiveProps(nextprops) {
        if (nextprops.value !== this.props.value) {
            let dateValue = new Date(nextprops.value);
            let fields = {};
            fields[this.props.field] = {
                dirty: true,
                errors: undefined,
                name: this.props.field,
                touched: true,
                validating: true,
                value: dateValue
            }
            this.props.form.setFields(fields);
        }
    }

    _clearDate = () => {
        //设值到fieldStore
        let fields = {};
        fields[this.props.field] = {
            dirty: true,
            errors: undefined,
            name: this.props.field,
            touched: true,
            validating: true,
            value: null
        }
        this.props.form.setFields(fields);
    }
    onValueChange = (vals, index) => {
        if (isFunction(this.props.onValueChange)) this.props.onValueChange(vals, index);
    }
    onChange = (date) => {
        //设值到fieldStore
        let fields = {};
        fields[this.props.field] = {
            dirty: true,
            errors: undefined,
            name: this.props.field,
            touched: true,
            validating: true,
            value: date
        }
        this.props.form.setFields(fields);
        if (isFunction(this.props.onChange)) this.props.onChange(date);
    }
    onDismiss = () => {
        if (isFunction(this.props.onDismiss)) this.props.onDismiss();
    }
    onOk = (val) => {
        if (isFunction(this.props.onOk)) this.props.onOk(val);
    }
    validateCallBack = (rule, value, callback) => {
        if (isFunction(this.props.validateCallBack)) {
            // console.log('1')
            this.props.validateCallBack(rule, value, callback);
            callback();
        } else {
            callback();
        }
    }

    render() {
        let {getFieldProps} = this.props.form;
        // format 没有特殊性不额外定义，定义产生mode切换的问题
        let {
            mode, value, use12Hours, minuteStep, disabled,minDate, maxDate,wrap,
            label, arrow, extra, field, required, trigger,showIcon,icon,iconColor,visible, ...restProps
        } = this.props;
        let wrapClz = classnames('yy-date-picker', this.props.className);
			  let itemWrapClz = classnames('yy-date-picker-item',(!visible&&'hidden'), this.props.className);
        let requiredMsg = '必填项' + label + '未填写';
        value = value?value.replace(/\-/g,'/'):null;
        var _fieldValue =  isFunction(getFieldProps) ? getFieldProps(field, {
            initialValue: (typeof (value)==='string'?new Date(value):value),
            rules: [
                {required, message: requiredMsg},
                {validator: this.validateCallBack},
            ],
            trigger: trigger,
            valuePropName: 'value',
        }) : null
        if (_fieldValue.value && typeof (_fieldValue.value) === 'string') {
            _fieldValue.value = new Date(_fieldValue.value);
        }
        return (
            <DatePicker
                {...restProps}
                className={wrapClz}
                {..._fieldValue}
                mode={mode}
                minDate={typeof (minDate)==='string'?new Date(minDate):minDate}
                maxDate={typeof (maxDate)==='string'?new Date(maxDate):maxDate}
                use12Hours={use12Hours}
                minuteStep={minuteStep}
                disabled={disabled}
                extra={disabled?" ":extra}
                title={<a style={{color: '#108ee9'}} onClick={this._clearDate}>清除</a>}
                onValueChange={this.onValueChange}
                onChange={this.onChange}
                onDismiss={this.onDismiss}
                onOk={this.onOk}
            >
                <List.Item className={itemWrapClz} arrow={disabled?null:arrow} wrap={wrap}>
                {showIcon && <YYIcon type={icon} color={iconColor} style={{float:'left',paddingRight:'8px'}} size="xs"/>}
                  {required?<span className='yy-label-required'>{label}</span>:label}
                </List.Item>
            </DatePicker>
        )

    };
}
;

YYDatePicker.defaultProps = {
    mode: 'date',//日期date,时间time,日期+时间datetime,年year,月month
    value: null,
    use12Hours: false,
    minuteStep: 1,//分钟数递增步长设置
    disabled: false,
    label: '日期',
    extra: '请选择',
    arrow: 'horizontal',//箭头方向(右,上,下), 可选horizontal,up,down,empty，如果是empty则存在对应的dom,但是不显示
    wrap:false,
    field: 'datepicker',
    required: false,
    trigger: 'onChange',
    showIcon: false,
    icon: "Home",
    iconColor: "red",
	visible: true
}

module.exports = YYDatePicker;