• The corresponding component is: Ant Design DatePicker date selection box
  • Warehouse link: component address
  • Your own CodePen online Preview link: DatePicker (by Cos)

The DatePicker component of Antd is one of the most important components of Antd.

tips

  • What is the opportunity not to say
  • It is the first time to write my own widget with React. Maybe encapsulation is not good enough, there are still a lot of bugs, and I want to make fun of 2333 when I copy the code I wrote
  • But it’s really fun! For example, to close the date picker by clicking outside the date picker, it took me a long time.
  • Use React to determine whether the click event occurred inside or outside the component
  • Implementing your own components is cool!Although sometimes it can feel a bit repetitive
  • While studying the implementation of antD components, I also learned a lot about the details of the implementation that ovo is not capable of, and there will be opportunities for further refinements in the future, including more apis and features and custom sizing Settings.

Component is introduced

DatePicker component

DatePicker (by COS)

  1. Implementation of day, month and year selection panels

Interaction: a. Realization of day panel: Realization click the date to select a specific date, click the left and right arrows on the head and face to go to last year/next year, last month/next month B. The realization of the month panel: Click the month in the head of the day panel to enter, click the month to select the specific month and return to the day panel, click the left and right arrows on the head and face to go to the last year/next year C. Year panel implementation: Click the month at the head of the day panel to enter, with decade as the interval; click the year to select the year and return to the day panel; click the left and right arrows of the head and face to go to the last decade/next decade D. 2. Implementation of external API a. Support setting of defaultDate defaultDate by setting defaultDate as the moment object to set the defaultDate b. An example of an onDateChange object that returns a moment to get the current date via the date-changing callback function:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nowDate: 'No Value! '}}handleDateChange(date) {
        this.setState({nowDate: date.format('YYYY-MM-DD')});
    }
    render() {
        return (
            <div className="App">
                <div>nowDate: {this.state.nowDate}</div>
                <DatePicker defaultDate={moment()} onDateChange={(date)= > this.handleDateChange(date)} />
            </div>); }}Copy the code
  1. Panel display with switching animation

In the picker-panel, initial opacity is 0, the origin of transform-Origin is the upper left corner, the initial size is scale(0), and the display is controlled by the custom property data-active which is true

.picker-panel {
    z-index: 10;
    position: absolute;
    background-color: white;
    top: 30px;
    left: 0;
    width: 300px;
    height: 300px;
    border-radius: 3px;
    border: 1px solid $gray-4;
    box-shadow:2px 2px 10px rgba(0.0.0.0.4);

    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: scale(0);
    transform-origin: top left;
    transition: all 300ms ease-in-out;
    &[data-active=true] {
        transform: scale(1);
        opacity: 1; }}Copy the code
  1. The interface display
  • The initial value

  • Choose another date

  • Next year.

  • In a month

  • Enter the year panel

  • Switch year panel

  • On the panel