yylib-quick-mobile/dist/yylib/calendar/YYCalendar.js

yylib-quick-mobile

import React from 'react';
import { List, Calendar } from 'antd-mobile';
import {isFunction} from '../../utils/FunctionUtil';
import {formatDate} from '../../utils/formatUtils';
const Item = List.Item;
const Brief = Item.Brief;
import YYIcon from '../icon/YYIcon'
import classnames from 'classnames';
import './YYCalendar.less';
let format = 'yyyy/MM/dd hh:mm:ss';
let dateformat ='yyyy/MM/dd';
class YYCalendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      startDateTime:'',
      endDateTime:'',
      dateValue:'',
      defaultValue:'',
      defaultTimeValue: ''
    }
  }
  onCancel=()=>{//关闭时回调
    this.setState({
      show: false,
    });
  }
  onConfirm=(startDateTime,endDateTime)=>{//确认时回调
    //设值到fieldStore
    let {type,pickTime} = this.props;
    var formatValue = dateformat;
    if (pickTime) {
         formatValue = format;
      }
      else {
        formatValue = dateformat;
      }
    let fields = {};
    let dateValue = '';
    if (startDateTime) {
      dateValue = formatDate(startDateTime,formatValue);
    }
    if (type=='range'&&endDateTime) {
      dateValue = dateValue + "-"+formatDate(endDateTime,formatValue);
    }
    this.setState({
      show: false,
      startDateTime,
      endDateTime,
      dateValue:dateValue
    },()=>{
    	var value={[this.props.startField]:startDateTime,[this.props.endField]:endDateTime}
      fields[this.props.field] = {
          dirty: true,
          errors: undefined,
          name: this.props.field,
          touched: true,
          validating: true,
          value: value
      }
     this.props.form.setFields(fields);
     if (isFunction(this.props.onConfirm)) this.props.onConfirm(startDateTime, endDateTime);
   });
  }
  onSelect=(Date,dates)=>{
     if (isFunction(this.props.onSelect)) this.props.onSelect(Date,dates);
  }
  onSelectHasDisableDate = (dates) => {
    if (isFunction(this.props.onSelectHasDisableDate)) this.props.onSelectHasDisableDate(dates);
  }
  onClick=()=>{
    this.setState({
      show: true,
    });
  }
  validateCallBack = (rule, value, callback) => {
      if (isFunction(this.props.validateCallBack)) {
          this.props.validateCallBack(rule, value, callback);
          callback();
      } else {
          callback();
      }
  }
  componentWillReceiveProps = (nextProps) => {
      let {getFieldValue} = this.props.form;
      let {field,type,pickTime} = this.props;
      let valueField = getFieldValue(field);
      var formatValue = dateformat;
      if (pickTime) {
         formatValue = format;
      }
      else {
        formatValue = dateformat;
      }
      let dateValue = '';
      if (valueField) {
        if (valueField[this.props.startField]) {
          dateValue = typeof (valueField[this.props.startField])==='string'?valueField[this.props.startField]:formatDate(valueField[this.props.startField],formatValue);
        }
        if (type=='range'&&valueField[this.props.endField]) {
          dateValue = typeof (valueField[this.props.endField])==='string'?dateValue + "-"+valueField[this.props.endField]:dateValue + "-"+formatDate(valueField[this.props.endField],formatValue);
        }
        this.setState({
          dateValue:dateValue,
          defaultValue:[valueField[this.props.startField],type=='range'?valueField[this.props.endField]:'']
        });
      }
    }
  render() {
    let {getFieldProps} = this.props.form;
    let {pickTime,showIcon,icon,iconColor,visible,showShortcut,trigger,
    label,field,type,infiniteOpt,initalMonths,value,required,rowSize,
    defaultDate,maxDate,minDate,disabled,arrow,extra,enterDirection,wrap} = this.props;
    let wrapClz = classnames('yy-calendar-picker', this.props.className);
    let itemWrapClz = classnames('yy-calendar-picker-item',(!visible&&'hidden'), this.props.className);
    let requiredMsg = '必填项' + label + '未填写';
    let {dateValue,show,defaultValue,defaultTimeValue} = this.state;
    return (
      <List>
        <Calendar
          className={wrapClz}
          {...isFunction(getFieldProps) ? getFieldProps(field, {
              initialValue: (typeof (value)==='string'?new Date(value):value),
              rules: [
                  {required, message: requiredMsg},
                  {validator: this.validateCallBack},
              ],
              trigger: trigger,
              valuePropName: 'value',
          }) : null}
          visible={show}
          onCancel={this.onCancel}
          onConfirm={this.onConfirm}
          onSelect={this.onSelect}
          onSelectHasDisableDate={this.onSelectHasDisableDate}
          pickTime={pickTime}
          showShortcut={showShortcut}
          defaultDate={defaultDate?new Date(defaultDate):new Date()}
          minDate={minDate?new Date(minDate):new Date('2000-01-01')}
          maxDate={maxDate?new Date(maxDate):new Date('2030-01-01')}
          type={type}
          rowSize={rowSize}
          enterDirection={enterDirection}
          infiniteOpt={infiniteOpt}
          initalMonths={initalMonths}
          defaultValue={defaultValue}
          defaultTimeValue={defaultTimeValue}/>
        <Item
          className={itemWrapClz}
          arrow={disabled?"empty":arrow}
          onClick={!disabled?this.onClick:this.onCancel}
          wrap={wrap}
          extra={dateValue?<span title={dateValue}>{dateValue}</span>:extra}>
          {showIcon && <YYIcon type={icon} color={iconColor} style={{float:'left',paddingRight:'8px',paddingTop:'3px'}} size="xs"/>}
          {required?<span className='yy-label-required'>{label}</span>:label}
        </Item>
      </List>
    );
  }
}

YYCalendar.defaultProps = {
	startField:"startDateTime",
	endField:"endDateTime",
  value: null,
  defaultDate:'',
  minDate:'',
  maxDate:'',
  field: 'calendar',
  icon: "Home",
  iconColor: "red",
  label:'日历',
  type:'one',
  rowSize:'normal',
  enterDirection:'vertical',
  extra: '请选择',
  initalMonths:6,
  show:false,
  pickTime:false,
  showIcon: false,
  visible: true,
  showShortcut:false,
  infiniteOpt: false,
  required:false,
  trigger: 'onChange',
  disabled: false,
  arrow: 'horizontal',
  wrap:false
}
module.exports = YYCalendar;