Material-ui: DatePicker not working?

[BadBaggins]

I have followed the instructions to import the DatePicker:

import { DatePicker } from 'material-ui'

And use it in a component:

First, it forces me to add an ID (terrible error message). Now it won't let me focus the input. I click, nothing. I tab, it goes right by. No error messages, nothing. I presume that something is blocking the input. Anyone else having this problem?

If I add a handler to onFocus, it gets called. But the datepicker never shows up.

[astrobolidos]

I was having the same problem till I've added:
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

on app.js. Apparently the events are handled by that plugin.

[BadBaggins]

Ah, I thought that was handled automatically. I'll try that. Thanks!

On 06/04/15 02:20, astrobolidos wrote:

I was having the same problem till I've added:
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

on app.js. Apparently the events are handled by that plugin.

—
Reply to this email directly or view it on GitHub
https://github.com/callemall/material-ui/issues/484#issuecomment-89778612.

[franleplant]

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

Solved it for me!

[hai-cea]

Thanks @astrobolidos @franleplant

[phillycoder]

Yep.. injectTapEventPlugin does the trick. It's tricky because there was no error/warning in the console.

[kumar-vipin]

Thanks "Astrobolidos"
var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
Solved it for me!

[sungwoncho]

Could we re-open this issue? Even though @astrobolidos's solution works, I am not sure why we have to manually register the tap event plugin. I thought it was handled automatically. The doc for DatePicker does not mention anything about this either.

[oliviertassinari]

That's not linked to this component, see http://www.material-ui.com/#/get-started/installation

[sungwoncho]

Thanks for the clarification.

[blankzust]

Solved for me!!!!

[calbertts]

Worked for me.. thanks.

[GithubGoldMiner]

Worked for me! Thank you guys!

[thiagozanetti]

It seems it's happening again.

This is my component (the part related to DatePicker):

import React, {Component} from "react"
import DatePicker from "material-ui/DatePicker"

export default class MyComponent extends Component {
  render() {
    let DateTimeFormat = global.Intl.DateTimeFormat;

    return (
      <DatePicker 
        hintText="De" 
        DateTimeFormat={DateTimeFormat}
        okLabel="OK"
        cancelLabel="Cancelar"
        locale="pt"
        autoOk={true}
       defaultDate={new Date()} />
    );
  }
}

This is (part of) my app.jsx:

import React, { Component } from "react"
import injectTapEventPlugin from "react-tap-event-plugin"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

export default class App extends Component {
    render() {
        return (
            <MuiThemeProvider>
                ...
            </MuiThemeProvider>
        );
    }
}

My package.json:

{
  "name": "react-webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer": "6.5.3",
    "axios": "^0.15.3",
    "babel-cli": "^6.18.0",
    "babel-core": "6.18.2",
    "babel-eslint": "^7.1.1",
    "babel-jest": "17.0.2",
    "babel-loader": "6.2.8",
    "babel-plugin-transform-es2015-destructuring": "^6.19.0",
    "babel-plugin-transform-es2015-parameters": "^6.18.0",
    "babel-plugin-transform-object-rest-spread": "^6.19.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-app": "^1.0.0",
    "babel-preset-stage-0": "^6.16.0",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "chalk": "1.1.3",
    "classnames": "^2.2.5",
    "connect-history-api-fallback": "1.3.0",
    "cross-spawn": "5.0.1",
    "css-loader": "^0.26.0",
    "detect-port": "1.0.6",
    "dotenv": "2.0.0",
    "es6-enum": "^1.1.0",
    "eslint": "^3.11.1",
    "eslint-config-react-app": "^0.3.0",
    "eslint-loader": "1.6.1",
    "eslint-plugin-flowtype": "^2.28.2",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "3.0.1",
    "eslint-plugin-react": "^6.7.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "filesize": "3.3.0",
    "find-cache-dir": "0.1.1",
    "flexbox-react": "^4.1.0",
    "fs-extra": "1.0.0",
    "gzip-size": "3.0.0",
    "html-webpack-plugin": "2.24.1",
    "http-proxy-middleware": "0.17.2",
    "jest": "17.0.3",
    "json-loader": "0.5.4",
    "material-ui": "^0.16.4",
    "object-assign": "4.1.0",
    "path-exists": "3.0.0",
    "postcss-loader": "1.1.1",
    "promise": "7.1.1",
    "react-dev-utils": "^0.3.0",
    "react-intl": "^2.1.5",
    "react-redux": "^4.4.6",
    "react-tap-event-plugin": "^2.0.1",
    "recursive-readdir": "2.1.0",
    "redux": "^3.6.0",
    "redux-api-middleware": "^1.0.2",
    "redux-logger": "^2.7.4",
    "redux-promise-middleware": "^4.1.0",
    "redux-thunk": "^2.1.0",
    "rimraf": "2.5.4",
    "strip-ansi": "3.0.1",
    "style-loader": "^0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.3",
    "webpack-dev-server": "1.16.2",
    "webpack-manifest-plugin": "1.1.0",
    "whatwg-fetch": "2.0.1"
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "flexboxgrid": "^6.3.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-flexbox-grid": "^0.10.2",
    "react-icons": "^2.2.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom"
  },
  "jest": {
    "moduleFileExtensions": [
      "jsx",
      "js",
      "json"
    ],
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/FileStub.js",
      "^.+\\.css$": "<rootDir>/config/jest/CSSStub.js"
    },
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/(build|docs|node_modules)/"
    ],
    "testEnvironment": "node"
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

Same behavior. When I click on it, nothing happens. It appears to be disabled. Is there anything I'm missing?

[dekhanov-vladislav-yumasoft]

God bless you @astrobolidos, bro! You have saved me! Thanks a lot!

[mirzaumersaleem]

Work for me @astrobolidos Thank you !

[wezzy]

I add that if you use shouldRejectClick to ignore ghost click (see here on the bottom of the page) DatePicker doesn't work.

You have to remove it and change:

injectTapEventPlugin({ shouldRejectClick: function (lastTouchEventTimestamp, clickEventTimestamp) { return true; } });

to

injectTapEventPlugin();