Why picker is not showing in react js?

I am trying to implement this date picker

But it does not display.

Here is my code:

import React, { Component } from "react";

import ReactDOM from "react-dom";

import DatePicker from "react-bootstrap-date-picker";



import "./styles.css";



class App extends Component {

  componentDidUpdate() {

    // Access ISO String and formatted values from the DOM.

    var hiddenInputElement = document.getElementById("example-datepicker");

    console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z"

    console.log(hiddenInputElement.getAttribute("data-formattedvalue")); // Formatted String, ex: "11/19/2016"

  }



  render() {

    return (

      <div>

        ddd

        <DatePicker

          id="example-datepicker"

          value={this.state.value}

          onChange={this.handleChange}

        />

      </div>

    );

  }

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

(also here)

edited Nov 21 '18 at 11:48

Pureferret

3,287951106

asked Nov 21 '18 at 11:46

user944513

3,2321260119

What do the developer tools show you? By the way your link doesn't work, it shows me Could not find dependency: 'create-react-class' relative to '/node_modules/react-bootstrap-date-picker/lib/index.js'

– Pureferret
Nov 21 '18 at 11:48

I already added .it not work please change my link

– user944513
Nov 21 '18 at 11:50

so there's a lot going on here... where is your value in the state? where is you handleChange function? also, your codesanbox sample link doesn't compile...

– c-chavez
Nov 21 '18 at 12:23

add a comment |

I am trying to implement this date picker

But it does not display.

Here is my code:

import React, { Component } from "react";

import ReactDOM from "react-dom";

import DatePicker from "react-bootstrap-date-picker";



import "./styles.css";



class App extends Component {

  componentDidUpdate() {

    // Access ISO String and formatted values from the DOM.

    var hiddenInputElement = document.getElementById("example-datepicker");

    console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z"

    console.log(hiddenInputElement.getAttribute("data-formattedvalue")); // Formatted String, ex: "11/19/2016"

  }



  render() {

    return (

      <div>

        ddd

        <DatePicker

          id="example-datepicker"

          value={this.state.value}

          onChange={this.handleChange}

        />

      </div>

    );

  }

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

(also here)

edited Nov 21 '18 at 11:48

Pureferret

3,287951106

asked Nov 21 '18 at 11:46

user944513

3,2321260119

What do the developer tools show you? By the way your link doesn't work, it shows me Could not find dependency: 'create-react-class' relative to '/node_modules/react-bootstrap-date-picker/lib/index.js'

– Pureferret
Nov 21 '18 at 11:48

I already added .it not work please change my link

– user944513
Nov 21 '18 at 11:50

so there's a lot going on here... where is your value in the state? where is you handleChange function? also, your codesanbox sample link doesn't compile...

– c-chavez
Nov 21 '18 at 12:23

add a comment |

I am trying to implement this date picker

But it does not display.

Here is my code:

import React, { Component } from "react";

import ReactDOM from "react-dom";

import DatePicker from "react-bootstrap-date-picker";



import "./styles.css";



class App extends Component {

  componentDidUpdate() {

    // Access ISO String and formatted values from the DOM.

    var hiddenInputElement = document.getElementById("example-datepicker");

    console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z"

    console.log(hiddenInputElement.getAttribute("data-formattedvalue")); // Formatted String, ex: "11/19/2016"

  }



  render() {

    return (

      <div>

        ddd

        <DatePicker

          id="example-datepicker"

          value={this.state.value}

          onChange={this.handleChange}

        />

      </div>

    );

  }

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

(also here)

edited Nov 21 '18 at 11:48

Pureferret

3,287951106

asked Nov 21 '18 at 11:46

user944513

3,2321260119

I am trying to implement this date picker

But it does not display.

Here is my code:

import React, { Component } from "react";

import ReactDOM from "react-dom";

import DatePicker from "react-bootstrap-date-picker";



import "./styles.css";



class App extends Component {

  componentDidUpdate() {

    // Access ISO String and formatted values from the DOM.

    var hiddenInputElement = document.getElementById("example-datepicker");

    console.log(hiddenInputElement.value); // ISO String, ex: "2016-11-19T12:00:00.000Z"

    console.log(hiddenInputElement.getAttribute("data-formattedvalue")); // Formatted String, ex: "11/19/2016"

  }



  render() {

    return (

      <div>

        ddd

        <DatePicker

          id="example-datepicker"

          value={this.state.value}

          onChange={this.handleChange}

        />

      </div>

    );

  }

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

(also here)

javascript reactjs

edited Nov 21 '18 at 11:48

Pureferret

3,287951106

asked Nov 21 '18 at 11:46

user944513

3,2321260119

edited Nov 21 '18 at 11:48

Pureferret

3,287951106

asked Nov 21 '18 at 11:46

user944513

3,2321260119

edited Nov 21 '18 at 11:48

Pureferret

3,287951106

edited Nov 21 '18 at 11:48

Pureferret

3,287951106

edited Nov 21 '18 at 11:48

Pureferret

3,287951106

asked Nov 21 '18 at 11:46

user944513

3,2321260119

asked Nov 21 '18 at 11:46

user944513

3,2321260119

asked Nov 21 '18 at 11:46

user944513

3,2321260119

What do the developer tools show you? By the way your link doesn't work, it shows me Could not find dependency: 'create-react-class' relative to '/node_modules/react-bootstrap-date-picker/lib/index.js'

– Pureferret
Nov 21 '18 at 11:48

I already added .it not work please change my link

– user944513
Nov 21 '18 at 11:50

so there's a lot going on here... where is your value in the state? where is you handleChange function? also, your codesanbox sample link doesn't compile...

– c-chavez
Nov 21 '18 at 12:23

add a comment |

What do the developer tools show you? By the way your link doesn't work, it shows me Could not find dependency: 'create-react-class' relative to '/node_modules/react-bootstrap-date-picker/lib/index.js'

– Pureferret
Nov 21 '18 at 11:48

I already added .it not work please change my link

– user944513
Nov 21 '18 at 11:50

so there's a lot going on here... where is your value in the state? where is you handleChange function? also, your codesanbox sample link doesn't compile...

– c-chavez
Nov 21 '18 at 12:23

What do the developer tools show you? By the way your link doesn't work, it shows me Could not find dependency: 'create-react-class' relative to '/node_modules/react-bootstrap-date-picker/lib/index.js'

– Pureferret
Nov 21 '18 at 11:48

I already added .it not work please change my link

– user944513
Nov 21 '18 at 11:50

so there's a lot going on here... where is your value in the state? where is you handleChange function? also, your codesanbox sample link doesn't compile...

– c-chavez
Nov 21 '18 at 12:23

add a comment |

2 Answers
2

active

oldest

votes

You are using React v16, which the original react-bootstrap-date-picker does not (yet) support.
You can use the react-16-bootstrap-date-picker package instead.

See here for a very basic code example, without a state or a componentDidUpdate method, for simplicity's sake:

Edit zrwlk00ymm

edited Nov 21 '18 at 13:19

answered Nov 21 '18 at 12:00

MrMister

742621

I already used that also

– user944513
Nov 21 '18 at 12:12

please change my code and share the link

– user944513
Nov 21 '18 at 12:13

@user944513 added a link to a modified version of your code.

– MrMister
Nov 21 '18 at 13:20

add a comment |

As mentioned by @MrMister, you can install react-16-bootstrap-date-picker

installing the date picker will show you this warning:

npm WARN react-16-bootstrap-date-picker@5.1.2 requires a peer of create-react-class@^15.5.2 but none is installed. You must install peer dependencies yourself.

Eventually, you'll need to install the following additional modules:

create-react-class

react-bootstrap

And your package.json file should look like this:

"dependencies": {

    "create-react-class": "^15.6.3",

    "react": "^16.6.0",

    "react-16-bootstrap-date-picker": "^5.1.2",

    "react-bootstrap": "^0.32.4",

    "react-dom": "^16.6.0",

    "react-scripts": "2.1.1"

  },

edited Nov 21 '18 at 13:00

answered Nov 21 '18 at 12:51

Naor Bar

64456

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53411360%2fwhy-picker-is-not-showing-in-react-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You are using React v16, which the original react-bootstrap-date-picker does not (yet) support.
You can use the react-16-bootstrap-date-picker package instead.

See here for a very basic code example, without a state or a componentDidUpdate method, for simplicity's sake:

Edit zrwlk00ymm

edited Nov 21 '18 at 13:19

answered Nov 21 '18 at 12:00

MrMister

742621

I already used that also

– user944513
Nov 21 '18 at 12:12

please change my code and share the link

– user944513
Nov 21 '18 at 12:13

@user944513 added a link to a modified version of your code.

– MrMister
Nov 21 '18 at 13:20

add a comment |

You are using React v16, which the original react-bootstrap-date-picker does not (yet) support.
You can use the react-16-bootstrap-date-picker package instead.

See here for a very basic code example, without a state or a componentDidUpdate method, for simplicity's sake:

Edit zrwlk00ymm

edited Nov 21 '18 at 13:19

answered Nov 21 '18 at 12:00

MrMister

742621

I already used that also

– user944513
Nov 21 '18 at 12:12

please change my code and share the link

– user944513
Nov 21 '18 at 12:13

@user944513 added a link to a modified version of your code.

– MrMister
Nov 21 '18 at 13:20

add a comment |

You are using React v16, which the original react-bootstrap-date-picker does not (yet) support.
You can use the react-16-bootstrap-date-picker package instead.

See here for a very basic code example, without a state or a componentDidUpdate method, for simplicity's sake:

Edit zrwlk00ymm

edited Nov 21 '18 at 13:19

answered Nov 21 '18 at 12:00

MrMister

742621

You are using React v16, which the original react-bootstrap-date-picker does not (yet) support.
You can use the react-16-bootstrap-date-picker package instead.

See here for a very basic code example, without a state or a componentDidUpdate method, for simplicity's sake:

Edit zrwlk00ymm

edited Nov 21 '18 at 13:19

answered Nov 21 '18 at 12:00

MrMister

742621

edited Nov 21 '18 at 13:19

answered Nov 21 '18 at 12:00

MrMister

742621

answered Nov 21 '18 at 12:00

MrMister

742621

answered Nov 21 '18 at 12:00

MrMister

742621

I already used that also

– user944513
Nov 21 '18 at 12:12

please change my code and share the link

– user944513
Nov 21 '18 at 12:13

@user944513 added a link to a modified version of your code.

– MrMister
Nov 21 '18 at 13:20

add a comment |

I already used that also

– user944513
Nov 21 '18 at 12:12

please change my code and share the link

– user944513
Nov 21 '18 at 12:13

@user944513 added a link to a modified version of your code.

– MrMister
Nov 21 '18 at 13:20

I already used that also

– user944513
Nov 21 '18 at 12:12

please change my code and share the link

– user944513
Nov 21 '18 at 12:13

@user944513 added a link to a modified version of your code.

– MrMister
Nov 21 '18 at 13:20

add a comment |

As mentioned by @MrMister, you can install react-16-bootstrap-date-picker

installing the date picker will show you this warning:

npm WARN react-16-bootstrap-date-picker@5.1.2 requires a peer of create-react-class@^15.5.2 but none is installed. You must install peer dependencies yourself.

Eventually, you'll need to install the following additional modules:

create-react-class

react-bootstrap

And your package.json file should look like this:

"dependencies": {

    "create-react-class": "^15.6.3",

    "react": "^16.6.0",

    "react-16-bootstrap-date-picker": "^5.1.2",

    "react-bootstrap": "^0.32.4",

    "react-dom": "^16.6.0",

    "react-scripts": "2.1.1"

  },

edited Nov 21 '18 at 13:00

answered Nov 21 '18 at 12:51

Naor Bar

64456

add a comment |

As mentioned by @MrMister, you can install react-16-bootstrap-date-picker

installing the date picker will show you this warning:

npm WARN react-16-bootstrap-date-picker@5.1.2 requires a peer of create-react-class@^15.5.2 but none is installed. You must install peer dependencies yourself.

Eventually, you'll need to install the following additional modules:

create-react-class

react-bootstrap

And your package.json file should look like this:

"dependencies": {

    "create-react-class": "^15.6.3",

    "react": "^16.6.0",

    "react-16-bootstrap-date-picker": "^5.1.2",

    "react-bootstrap": "^0.32.4",

    "react-dom": "^16.6.0",

    "react-scripts": "2.1.1"

  },

edited Nov 21 '18 at 13:00

answered Nov 21 '18 at 12:51

Naor Bar

64456

add a comment |

As mentioned by @MrMister, you can install react-16-bootstrap-date-picker

installing the date picker will show you this warning:

npm WARN react-16-bootstrap-date-picker@5.1.2 requires a peer of create-react-class@^15.5.2 but none is installed. You must install peer dependencies yourself.

Eventually, you'll need to install the following additional modules:

create-react-class

react-bootstrap

And your package.json file should look like this:

"dependencies": {

    "create-react-class": "^15.6.3",

    "react": "^16.6.0",

    "react-16-bootstrap-date-picker": "^5.1.2",

    "react-bootstrap": "^0.32.4",

    "react-dom": "^16.6.0",

    "react-scripts": "2.1.1"

  },

edited Nov 21 '18 at 13:00

answered Nov 21 '18 at 12:51

Naor Bar

64456

As mentioned by @MrMister, you can install react-16-bootstrap-date-picker

installing the date picker will show you this warning:

npm WARN react-16-bootstrap-date-picker@5.1.2 requires a peer of create-react-class@^15.5.2 but none is installed. You must install peer dependencies yourself.

Eventually, you'll need to install the following additional modules:

create-react-class

react-bootstrap

And your package.json file should look like this:

"dependencies": {

    "create-react-class": "^15.6.3",

    "react": "^16.6.0",

    "react-16-bootstrap-date-picker": "^5.1.2",

    "react-bootstrap": "^0.32.4",

    "react-dom": "^16.6.0",

    "react-scripts": "2.1.1"

  },

edited Nov 21 '18 at 13:00

answered Nov 21 '18 at 12:51

Naor Bar

64456

edited Nov 21 '18 at 13:00

answered Nov 21 '18 at 12:51

Naor Bar

64456

answered Nov 21 '18 at 12:51

Naor Bar

64456

answered Nov 21 '18 at 12:51

Naor Bar

64456

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu