微信小程序?qū)崿F(xiàn)根據(jù)日期和時(shí)間排序功能
最近接手了一個(gè)小程序的項(xiàng)目,有這樣一個(gè)需求要對(duì)列表進(jìn)行日期和時(shí)間的排序,于是小試牛刀,操作了一番,終于搞出來(lái),在這里給大家總結(jié)分享一下經(jīng)驗(yàn),希望對(duì)大家有一定的幫助。
需求分析(這是已完成的效果)
這里有具體的日期時(shí)間和具體的小時(shí)時(shí)間,后端數(shù)據(jù)給我傳來(lái)的是這樣式的
startDate: "2021-08-27" //日期年月日 startTime: "10:15" //開始時(shí)間 endTime: "20:00" //結(jié)束時(shí)間
實(shí)現(xiàn)代碼
// 根據(jù)日期排序 comparedate: function (property) { // console.log(property); return function (a, b) { var value1 = Date.parse(new Date(a[property])); //轉(zhuǎn)換成十六進(jìn)制獲取日期 var value2 = Date.parse(new Date(b[property])); // console.log( value1 -value2); return value1 - value2; //value1-value2是從小到大排序 反過(guò)來(lái)則是從大到小的排序 } }, // 根據(jù)時(shí)間排序 時(shí)間格式是10:00的個(gè)格式,所以我們用到slice進(jìn)行截取字符串前兩位,通過(guò)小時(shí)來(lái)進(jìn)行比較時(shí)間的先后順序 compareahour: function (property) { // console.log(property); return function (a, b) { var value1 = a.startTime.slice(0,2) //slice(0,2) 獲取字符串前兩位進(jìn)行比較 var value2 = b.endTime.slice(0,2) // console.log(value1-value2) return value1 -value2 //value1-value2是從小到大排序 反過(guò)來(lái)則是從大到小的排序 } }, MyTaskList:function(){ var that=this wx.request({ url: '請(qǐng)求接口', data: { //放參數(shù) }, method: "POST", header: { 'content-type': 'application/json' }, success: function (res) { // 根據(jù)時(shí)間排序 if(res.data.list.orderDetailsList!=""){ var dataListaaa=res.data.list.orderDetailsList; dataListaaa.forEach((item) => { var starttime=item.startTime var endtime =item.endTime }) dataListaaa.sort(that.compareatime('starttime')); //調(diào)用上面時(shí)間時(shí)間排序的方法 } //根據(jù)日期排序 if(res.data.data=="success"){ console.log(res); if(res.data.list.orderDetailsList!=""){ var dataList=res.data.list.orderDetailsList; dataList.forEach((item) => { //循環(huán)之后進(jìn)行轉(zhuǎn)換時(shí)間的格式 var month=new Date(item.startDate.replace(/-/g,'/')).getMonth()+1; var day=new Date(item.startDate.replace(/-/g,'/')).getDate(); var dateVal=month+'月'+day+'日'; //拼接‘月' 和‘日' item['startDateFormat']=dateVal; // console.log(day); // console.log(dateVal); }) dataList.sort(that.comparedate('startDate')); //根據(jù)日期排序使用的方法結(jié)合上面的comparedate },
總結(jié)
以上就是微信小程序根據(jù)日期和時(shí)間進(jìn)行排序的全部過(guò)程,希望對(duì)大家有所幫助。
本文的全部?jī)?nèi)容為大家介紹完了,也希望大家多多支持腳本之家。
相關(guān)文章
Area 區(qū)域?qū)崿F(xiàn)post提交數(shù)據(jù)的js寫法
這篇文章主要介紹了在Area區(qū)域的里 實(shí)現(xiàn)post 提交數(shù)據(jù) 的js寫法,需要的朋友可以參考下2014-04-04JavaScript實(shí)現(xiàn)table切換的插件封裝
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)table切換的插件封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript tab選項(xiàng)卡插件實(shí)例代碼
這篇文章主要介紹了JavaScript tab選項(xiàng)卡插件實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-02-02淺談Sticky組件的改進(jìn)實(shí)現(xiàn)
這篇文章主要介紹了Sticky組件的改進(jìn)實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-03-03Taro?小程序持續(xù)集成實(shí)現(xiàn)及原理
這篇文章主要為大家介紹了Taro?小程序持續(xù)集成實(shí)現(xiàn)及原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04深入了解JavaScript的邏輯運(yùn)算符(與、或)
本篇文章分享的是 JS 當(dāng)中的邏輯運(yùn)算符與、或,也就是 && 、 || ,沒錯(cuò),別看這簡(jiǎn)簡(jiǎn)單單的幾個(gè)運(yùn)算符,雖然這是最基礎(chǔ)的知識(shí),但其中隱藏的奧秘卻十分耐人尋味,接下來(lái)本文就為大家一一揭開這簡(jiǎn)單的運(yùn)算符背后的奇妙之處。2016-12-12jQuery實(shí)現(xiàn)動(dòng)態(tài)文字搜索功能
本文主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)文字搜索功能的分析過(guò)程,文章底部提供了完整的代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01純js實(shí)現(xiàn)的論壇常用的運(yùn)行代碼的效果
bluidea論壇的腳本板塊的版主寫的,不錯(cuò),轉(zhuǎn)到這!2008-07-07