try to build dial number by React

Question

Hi I'm trying to build a component.

This is not a react-native. I'm want to use react and scroll a number like a picture

It should roll the number.

I was trying to find an example but there was an only react-native example. (link : How do I make an iOS UIPicker in react native with multiple columns and titles?)

Is there React example????

Do you need something like this? Here's multiple react packages. https://github.com/lanjingling0510/react-mobile-datepicker#readme https://github.com/swenyang/react-date-picker Examples https://codepen.io/lanjingling0510/pen/LRpOYp?editors=1010 https://swenyang.github.io/react-date-picker/ — Mehul Thakkar, Jan 27 '22 at 06:16

score 0 · Answer 1 · answered Jan 27 '22 at 06:21

You can possibly use react-mobile-datepicker package.

Here's a working example at Codesanbox.

import React from "react";
import DatePicker from "react-mobile-datepicker";

class App extends React.Component {
  state = {
    time: new Date(),
    isOpen: false
  };

  handleClick = () => {
    this.setState({ isOpen: true });
  };

  handleCancel = () => {
    this.setState({ isOpen: false });
  };

  handleSelect = (time) => {
    this.setState({ time, isOpen: false });
  };

  render() {
    return (
      <div className="App">
        <a className="select-btn" onClick={this.handleClick}>
          select time
        </a>

        <DatePicker
          value={this.state.time}
          isOpen={this.state.isOpen}
          onSelect={this.handleSelect}
          onCancel={this.handleCancel}
        />
      </div>
    );
  }
}

export default App;

try to build dial number by React

1 Answers1