[SOLVED] AntD Problem with DatePicker and moment.js? config._d.getTime is not a function

help
1

I’m trying to use AntD with a datepicker form but keep getting this error:

Uncaught TypeError: config._d.getTime is not a function
    at new Moment (modules.js?hash=08b0bfb…:67890)
    at Moment.clone (modules.js?hash=08b0bfb…:70654)
    at Moment.toISOString (modules.js?hash=08b0bfb…:70779)
    at Moment.toJSON (modules.js?hash=08b0bfb…:70974)
    at JSON.stringify (<anonymous>)
    at Object.DDPCommon.stringifyDDP (ddp-common.js?hash=1414c62…:243)
    at Connection._send (ddp-client.js?hash=bc32a16…:4152)
    at MethodInvoker.sendMessage (ddp-client.js?hash=bc32a16…:3548)
    at Connection.apply (ddp-client.js?hash=bc32a16…:4076)
    at Connection.call (ddp-client.js?hash=bc32a16…:3840)

Here is my psudo code:

import React from 'react';
import { Link } from 'react-router';
import { StyleSheet, css } from 'aphrodite'
import { DashboardContainer, FormCard } from '../../common'
import { Form, Icon, Input, Card, Button, Checkbox, Row, Select, DatePicker } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;


const AddEventForm = Form.create()(React.createClass({
  getInitialState () {
    return {
      loading: false
    };
  },
  handleSubmit(e) {
    e.preventDefault();

    let data = { };
    this.props.form.validateFields((error, values) => {
      let { resourceType, stages, title, description, tags, location, date, clusters } = values
      data = { resourceType, stages, title, description, tags, location, date, clusters };

      Meteor.call('Events.addEvent', data, function(){
        if (error) { failure(error); return; }
      });
      
    });

  },
  render() {


    return (
      <Form onSubmit={this.handleSubmit} className="login-form">

        <FormItem>
          {getFieldDecorator('date', {
            rules: [{ required: true, message: 'Please input your location!' }],
          })(
          	<DatePicker addonBefore={<Icon type="calendar" />} placeholder="event date"  />
          )}
        </FormItem>

          <Button type="primary" htmlType="submit">
            Add Event
          </Button>
        </FormItem>
      </Form>
    );
  },
}));




export const Events = ( ) => (
  	<DashboardContainer pageTitle={'Resource Events'}>
  		<FormCard>
  			<AddEventForm />
  		</FormCard>
  	</DashboardContainer>
);

related links:

https://github.com/lb-/moment-helpers/issues/38

2

values.date is an object and you need to access values.date._d to get the ISOdate for passing to a meteor method.


const AddEventForm = Form.create()(React.createClass({
  getInitialState () {
    return {
      loading: false
    };
  },
  handleSubmit(e) {
    e.preventDefault();

    let data = { };
    this.props.form.validateFields((error, values) => {
      let { resourceType, stages, title, description, tags, location, date, clusters } = values
      data = { resourceType, stages, title, description, tags, location, date._id, clusters };
 //must pass date._d to method

      Meteor.call('Events.addEvent', data, function(){
        if (error) { failure(error); return; }
      });
      
    });

  },
  render() {


    return (
      <Form onSubmit={this.handleSubmit} className="login-form">

        <FormItem>
          {getFieldDecorator('date', {
            rules: [{ required: true, message: 'Please input your location!' }],
          })(
          	<DatePicker addonBefore={<Icon type="calendar" />} placeholder="event date"  />
          )}
        </FormItem>

          <Button type="primary" htmlType="submit">
            Add Event
          </Button>
        </FormItem>
      </Form>
    );
  },
}));
3

Just found myself on the exact same situation. If your form is big and you’re too lazy as me to copy all values. You can just encode and decode as JSON and re-date the date field(s).

const mapDispatchToProps = (dispatch) => {
  return {
    onFormSubmit(event) {
      event.preventDefault()

      this.validateFields((err, values) => {
        if (!err) {
          const data = JSON.parse(JSON.stringify(values))
          data.date = new Date(data.date)
          data.range = data.range.map(date => new Date(date))
          dispatch(insertNotification(data))
        }
      })
    }
  }
}