Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The date-picker start time is shorter than the end time limit

  • Recently, I encountered a limitation problem in the project that the start time is less than the end time. The product requires that all planned start time is less than the planned end time, and construction start time is less than the end time, etc. For example, if the construction start time is Set to September 2, the date before September 2 cannot be selected and the date after September 2 can only be selected.
<el-form-item label="Construction Start Time">
    <el-date-picker
        v-model="starttime"
        :value-format="formattime"
        type="date"
        :picker-options="pickerStartOptions"
    ></el-date-picker>
</el-form-item>
<el-form-item label="Completion time">
    <el-date-picker
        v-model="endtime"
        :value-format="formattime"
        type="date"
        :picker-options="pickerEndOptions"
    ></el-date-picker>
</el-form-item>
Copy the code

This is a vue+ elementUI project that needs to declare variables in data.

return { starttime:'', endtime:'', formattime:'yyyy/mm/dd', pickerStartOptions: { disabledDate: (time) => { if (this.endtime ! = "") { return time.getTime() > new Date(this.endtime).getTime(); } }, pickerEndOptions: { disabledDate: (time) => { return time.getTime() < new Date(this.starttime).getTime(); }}}},Copy the code

The value of v-model is in milliseconds and needs to be converted to 2021-09-02 format when saved. Export a public method for time conversion in config.js of utils. Then when viewing the date format needs to be converted to millisecond level will be displayed.

Function setzero(num) {if (num < 10) {return '0' + num; } else { return '' + num; } } export function getdate(seconds) { var time = new Date(seconds); var year = time.getFullYear(); Var mon = setzero(time.getMonth() + 1); Var day = setZero (time.getDate()); // day return year + "-" + mon + "-" + day; } // export function getSeconds (date){return (new date (data)).gettime (); }Copy the code

Clicking on the save button requires a value to be passed, as does the edit button. The parameter of the call interface is data, then

data.starttime=(this.starttime! =="" || this.starttime ! ==null) ? $T.getdate(this.starttime):''; data.endtime=(this.endtime! =="" || this.endtime ! ==null) ? $T.getdate(this.endtime):'';Copy the code

Call the query interface to get data when it returns to query browse assignment returns, then

this.starttime = $T.getseconds(data.starttime);
this.endtime = $T.getseconds(data.endtime);
Copy the code