Picker in uView limits selection time

Article directory

1.Demand

The default style when mode=time is used for picker in uView.
Insert image description here
Due to project requirements, the time selection range needs to be limited to after 10 o'clock on the current date. Previous dates cannot be selected. That is to say, today is 2021.9.2, and 2021.9.1 and 2021.9.1 cannot be selected. On the previous date, no solution was found after searching the document, so I could only modify the source code.

2.Solution

  • Find the source code location of picker==>uview-ui==>components==>u-picker==>u-picker.vue
  • Coming to line 429,
    Insert image description here
    the author defines a method for setting the year, month, day, hour, minute, and second, and replaces the author-specified value with the value of the current date (new Date())
  • After changing the code, //the comments are the source code
    Insert image description here
  • After saving, pop up the picker again and successfully limit the time to the specified range.
    Insert image description here
  • After this change, there will be restrictions when using picker no matter where in the project. It is only used here in this project. If the picker is used multiple times in the project, it is recommended to judge the time when selecting.

3. Solve bugs

Bug: When selecting a month other than this month (10.22), the date is still displayed according to the current date. It should start from 1.
Idea: When clicking the picker to switch months, the setDays event will be triggered. In the event, it is judged whether the selected month is the current month. If Yes, the number of days starts from the current date. If not, it starts from 1.
Insert image description here
Solution:
Insert image description here
Solved successfully
Insert image description here

Guess you like

Origin blog.csdn.net/rayshaan0123/article/details/120056190
Recommended