This is the 16th day of my participation in Gwen Challenge
On the front end development, often will meet the demand of the date of processing time, sometimes need according to the actual situation to date processing, to the time of access to different developers have different coding style, also have the choice of different ways, in fact the time date processing (filtering) there are many kinds of methods, through a third party date format plugin to handle, Have to write their own native JS methods to achieve. Date formatting is realized through plug-ins. Only after the plug-in is introduced into the project, time filtering is directly handled through the plug-in call method. This way can simplify the code and improve the code cleanliness. However, using native JS to implement time filtering is also a good way to encapsulate time filtering methods as public methods and call them globally, which is also a good way to implement time filtering.
Commonly used by a third party plug-in to handle time filter function that is the front-end developers are familiar with and often use my moment. Js way to do this, my moment. Js Chinese also speak of all the specific way of integration and usage is clear, it’s not too much, this blog only to explain the specific implementation time to filter through js native.
In fact, the way to achieve time filtering through native JS is also very simple, only the method of filtering time into a public method, and then through the global call, you can. The specific processing time filtering method is as follows:
Export const formatDate = (value, type) => {if(value==null){return ''; } let dates = new Date(value); if(! isNaN(dates)&&! isNaN(Date.parse(dates))){ //dates.setHours(dates.getHours()+8); let year = dates.getFullYear(); let month = (dates.getMonth()+1); if(month<10) month = '0' + month; let day = dates.getDate(); if(day<10) day = '0' + day; let hours = dates.getHours(); if(hours<10) hours = '0' + hours; let minutes = dates.getMinutes(); if(minutes<10) minutes = '0' + minutes; let seconds = dates.getSeconds(); if(seconds<10) seconds = '0' + seconds; if(type==='datetime') { return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; }else{ return year+'-'+month+'-'+day; } }else{ return value; }}Copy the code
The above method is to process the obtained time level by level, filter the obtained time into the required format, and then call this method in the specific file to directly realize the time filtering operation. The specific application scenarios are as follows:
1. Usage Scenario 1: Time filtering is performed directly in methods
/ / for the latest policy getNewPlan () {enclosing apiGetLatestInsuranceProjectDetail ({insuranceProjectId: this.form.insuranceProjectId, insuranceType: this.form.insuranceType, }).then(res => { if(res.data.result){ console.log("*-*-*-*-",res.data.result) this.form = res.data.result[0]; this.form.validMonthly = this.formatDate(res.data.result[0].validMonthly, 'date'); // Pass the obtained time data source to the time filter method, then filter; }); },Copy the code
2. Use scenario 2: Filter the time required to display the rendering directly in the template
<el-table-column prop="validMonthly" label=" validMonthly" width="100"> <template slot-scope="scope"> {{ formatDate(scope.row.validMonthly, 'date') }} </template> </el-table-column>Copy the code