Search code examples
meteorreactjspikaday

Proper way to implement Pikaday in Meteor React


I'm trying to implement Pikaday in Meteor React. I've searched through numerous solutions and I can't get any of them to work. As I understand it, this is supposed to work:

I installed pikaday as follows: npm install -- save react react-pikaday.

Below is my code - What am I doing wrong?

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Pikaday from 'react-pikaday';


export default class TestForm extends Component {

  ComponentDidMount() {

    new Pikaday({
      field: ReactDOM.findDOMNode(this.refs.TestForm),
      format: 'DD/MM/YYYY',
      firstDay: 0,
      minDate: new Date(new Date()),
      maxDate: new Date('2050-12-31'),
      yearRange: [2000,2050],
    });
  }

  render() {

    return(
      <div>
        <form>
          <div className="row">
            <div className="input-field col s6">
              <input ref="TestForm" type="text"  />
            </div>
          </div>
        </form>	
      </div>
    )
  }

}


Solution

  • From the github page, there is a component that can be used:

    <Pikaday value={date} onChange={this.handleChange} />
    

    If you want to do the componentDidMount way, add an id to the div tag. and use document.getElementById('textId'); instead of using ReactDOM.

    I also noticed a typo in ComponentDidMount() {. It should be componentDidMount (c - lowercase).