preface

Actual projects we often use others UI framework, using the existing mature for the front-end UI framework will improve the efficiency of development, but at the same time also can bring does not meet the demand that prompted us to change the possibility of others things, a single appear such demand will make the front-end development is very passive, that is, after all, the results of other people’s ideas of coding Now we have to change other people’s work, not to mention the difficulty, but mainly the time. We have to understand why others do so first, and then we can accurately make the change scope and impact, so it is very uncomfortable, after all, changing other people’s things is the most time-consuming and painful.

There is such a requirement in the actual development, you have to verify the necessity of this requirement, if it is not reasonable to change just for the sake of change, then discuss to try not to change the existing UI framework, but to change the requirements to meet the UI components; If the UI component doesn’t meet the requirements, pray that someone else provides an API, or you’ll have to move someone else’s code. We try to avoid the worst possible scenario and try to solve the need in a different way or a detour.

It’s a good thing someone else has provided the API to change it, otherwise I would have had to go around the corner to solve it.

Demand background

In our project, the UI framework we use is Antd framework of ant, mainly because our current technology stack belongs to React. We need to make the following changes to the week selector of the DatePicker component in the Antd framework that we use:

1. Each week begins on Sunday. 2. The first week of each year is changed to the Wednesday of January 1 of the current year. Change the styleCopy the code

Why do we need to do the above requirements, that is, what is the reason? The core demand is actually because our company has its own set of week definition rules, that is, the week of the 1st of each year is the first week of the year, so the above demand is generated. Let’s take a look at the default presentation of the week selector provided by Antd:

As you can see, Antd’s DatePicker component defaults to: Each week starts on Monday; The last week of each year is the week of the 31st. If the 1st day of the next year is included, it is the last week of the previous year; otherwise, it is the first week of the next year. It obviously didn’t match our requirements, so we had to make a change. Let’s take a look at the final result:

Now, by comparing the two pictures, it should be clear what our needs are and what questions we are going to talk about. OK, let’s see how to do that.

The development of

To be honest, AS soon as I got this requirement, I told the product that Antd itself didn’t seem to support this change, because I looked at the API of the DatePicker component in detail and didn’t provide a direct API to change the default display. Therefore, I suggested the product to solve the problem in another way, using the interface provided by back-end personnel to query their own definition week to indirectly realize the above requirements, and the product also agreed. Specific ideas are as follows:

The DatePicker component is used to query the week of the selected time. Hide the week number with display: None, and then cover a Div box on the DatePicker component with style position to display the week information returned. When the user needs to make a change, add a click event to open the DatePicker drop-down selection time container for selection.

This is really an awkward solution at the end of its tether. After a battle of ideas, Antd is too big to support such a change, so we checked the RC-datepicker plugin and looked at the DatePicker used by moment.js. At last, I found a more concise and perfect method than the above method in moment.js, which can be said to avoid more code writing and changing other people’s components, it is a perfect situation of ‘hello, I am good, everyone is good’.

Here are two ways for you to choose according to your own situation. Both ways can fulfill the above requirements. Start my performance ^_^

The principle of

Query the momonet.js document to find the custom option in the menu on the right, and then find the week option at the bottom of the document. The document has the following description:

Dow: integer representing the first day of the week, 0 is Sunday, 1 is Monday,... 6 is Saturday. Locale. week.doy: Must be an integer. Doy is used with DOW to determine the first week of a year. Doy is calculated as 7 + Dow - janX, where janX is the first day of January (must belong to the first week of the year).Copy the code

Does that make sense? This means that the default value of week is affected by both values, and dow is the location display that controls the day of the week. If set to 0, the list starts on Sunday. If it’s 1, it starts on Monday, and so on. Doy is the logic that calculates the first week of a year. If You want The week of January 1 to be the first week and Monday to be the first week, then DOy equals 7 + 1-1 = 7. Note the moment.js version, as shown in the sample code:

// Start from 2.12.0 moment. UpdateLocale ('en', {week: {dow: Int, doy: Int}); Locale ('en', {week: {dow: Int, doy: Int}}); // From 2.8.1 to 2.11.2 moment.locale('en', {week: {dow: Int, doy: Int}}); Lang ('en', {week: {dow: Int, doy: Int}}); // Void at 2.8.1 moment.lang('en', {week: {dow: Int, doy: Int}});Copy the code

Global configuration

To make this change, you need to install the moment.js plugin and use it in your project. The following code changes need to be made in the global file index.tsx:

import 'moment/locale/zh-cn';
import moment from 'moment';

moment.locale('zh-cn', {
    week: {
        dow: 1,
        doy: 7
    }
});
Copy the code

This is the main code for global configuration, where all the use of the DatePicker week selector in the project will become uniform Settings, this is the only bad thing about global configuration, for example, our project follows our own week definition rules, so it applies to global configuration. As for friends who do not have that, use the following local page configuration can also achieve the effect.

Local configuration

Local configuration is designed not to look like global configuration. Once configured, every page that references the DatePicker weekly selector component is configured the same way. After all, every page has every page requirement scenario, so it is necessary to understand how to use local configuration. Local configuration is to configure different attributes in different pages to meet different needs. Even if there is a global configuration, once a page has a configuration, it uses the page configuration first, and does not use the global configuration. The local configuration method is as follows:

1) Import moment from "moment"; UseEffect (() => {moment. UpdateLocale ('zh-cn', {week: {dow: 1, doy: 7}}); } []);Copy the code

This is the local configuration method code, which uses the moment.js updateLocale method to change the default value. The calculation is the same as the principle. Therefore, once we find the corresponding API, it is very convenient to change. Therefore, this tells us that when using other people’s UI framework, we should check the API properties provided by others and understand the evolution process and the information of the plug-in used, so that we can accurately locate the information and avoid other detours.

Style changes

Our UI needs us to make some changes to the style of the DatePicker component, so we define a class name for it to prevent contamination of the global style. Note: The following code is the code for changing the style of the DatePicker week range selector. The style of the DatePicker week selector is similar. No code is attached here:

<RangePicker
    className="bit-week-range"
    dropdownClassName="bit-week-dropdown"
    picker="week"
/>

style: 
.bit-week-range {
    width: 224px;
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.24);
    .ant-picker-input > input {
        color: #fff;
    }

    .ant-picker-input > input:hover {
        border-color: transparent;
        border-right-width: 1px !important;
    }

    .ant-picker-input > input:focus, .ant-picker-input > input-focused {
        border-color: transparent;
        box-shadow: inherit;
    }

    .ant-picker-active-bar {
        background: #d9d9d9;
    }

    .ant-picker-range-separator {
        .ant-picker-separator {
            color: #fff
        }
    }

    .ant-picker-suffix {
        color: #fff;
    }

    .ant-picker-clear {
        color: #fff;
        background-color: #000;
    }
}
Copy the code

Effect:

Past wonderful articles

  • How to encapsulate the Vue watermark component and how to use it in React?
  • The most powerful rich text editor? TinyMCE Series [3]
  • The most powerful rich text editor? TinyMCE Series [2]
  • The most powerful rich text editor? TinyMCE Series of articles [1]
  • React project to implement a Checkbox style effect component
  • 2022 First update: 3 Progress bar effects in front end projects
  • Front-end Tech Trends 2022: You don’t come in and see how to earn it a small target?
  • If ancient have programmers writing summaries, probably is such | 2021 year-end summary
  • Front-end development specifications in front end team practice
  • Javascript high-level constructors
  • Javascript high-level inheritance
  • Recursion and closure

After the language

Guys, if you find this article helpful, click 👍 or ➕. In addition, if there are questions or do not understand the part of this article, you are welcome to comment on the comment section, we discuss together.