Solved: iview & elementui Some notes about the datepicker date picker, such as the v-model binding value will be one day less than the selected date (actually 8 hours), the date default value form validation cannot pass, etc.

Take iview as an example, the date selector of iview is very easy to use, but its problems are indeed obvious and fatal, roughly as follows:

You can directly use v-model to bind the value. The result date of the rendered page is correct, but the date of the bound value will be 8 hours less. This is mainly a legacy problem of his time zone processing. In fact, I think they can solve this problem very well. , but after so many years, they seem to have no intention of solving it. The suggestion given by iview is to use the @on-change method with v-model, which can handle the default value echo during editing and also handle the correctness of the new value Display (not less than 8 hours), as shown in the iview official document,

 Because the v-model binding value is a Date object, and the @on-change parameter is a string, it is likely to cause a more serious problem here, that is, the same data, there will be different types, if the type is used in development When there are clear requirements such as form verification rules, this problem is obvious. For example, when editing a set of data, the date is included, but the date does not need to be modified. Just click Save to trigger the date verification. The verification finds that it is not a string. Naturally, an error will be reported, because datepicker will convert the string into a standard Date object when reading the default string . If the data type of your Form validation setting is string, then the validation will naturally fail. Of course, if you put If the verification rule is changed to date, it can be passed without modification when editing, but after selecting the date and using the on-change method, it becomes a string again, and there is still a problem. It can be seen that the official has not provided a good solution for this.

In fact, if you want to check the time if you use the form check, it is better to use the date type to check, so you don’t need to use the on-change method, and you can write one less method, but the standard date will be one day less. What to do? In fact, we only need to deal with this one-day-less problem. We'd better use a third-party library moment, which is the best way to deal with it. It can be processed when the form is submitted.

First install moment (if you don't use cnpm, change it to npm):

cnpm install moment --save

Then bundle the used methods into the vue example:

import moment from 'moment'

//moment.locale('zh-cn')
Vue.prototype.$moment = moment

Then call it in the component:

obj.model.startTime = this.$moment(obj.model.startTime).format('YYYY-MM-DD')

Pay attention to the line of code called, the parameter passed in by moment is a Date object, and returns a string after format