更新记录
1.0.2(2023-09-28) 下载此版本
增加:1、判断两个日期是否相差x个月; 2、判断两个日期是否相差x天 (使用场景:用于查询数据时日期范围筛选限制,提高查询性能)
1.0.1(2023-09-27) 下载此版本
1、增加来获取本月第一天的日期 、获取本月最后一天的日期 2、修正了getData拼写错误
1.0.0(2023-09-01) 下载此版本
常用工具集合,后期上npm
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
常用日期工具集合
序号 | 说明 |
方法名 | 参数 | 返回值示例 |
---|---|---|---|---|
1 | 获取当前日期 | getToday |
seperator:分隔符,不必填,默认- | 2023-09-01 |
2 | 获取当前日期时间 | getTodayTime |
seperator:分隔符,不必填,默认- | 2023-09-01 16:25:55 |
3 | 获取星期几 | getWeekDay |
dateStr:日期字符串,不必填,默认取今天 | 星期五 |
4 | 获取时间戳 | getCurrentTime |
- | 1693556955694 |
5 | 获取昨天 | getYesterday |
- | 2023-08-31 |
6 | 获取明天 | getTomorrow |
- | 2023-09-02 |
7 | 获取几天前/几天后的日期 | getDate |
day:前后加减的天数(类型为正整数和负整数);seperator:分隔符,不必填,默认- | 2023-09-10 |
8 | 获取最近七天的日期(默认倒序) | getLast7Day |
orderBy:排序方式(desc:倒序,asc:顺序),不必填,默认desc | 见右侧图 |
9 | 计算两个日期相隔天数 | dateDiff |
dateStr1,dateStr2:日期字符串,必填 | 见右侧图 |
10 | 计算两个时间差,返回天小时分钟 | timeDiff |
datetimeStr1,datetimeStr2:日期时间字符串,必填 | 见右侧图 |
11 | 获得上周周一和周日的日期 | getLastWeekData |
- | 见右侧图 |
12 | 获得本周周一和周日的日期 | getThisWeekData |
- | 见右侧图 |
13 | 时间戳转换为几秒/几分/几小时/几天前 | getFriendlyDate |
timestamp:时间戳,必填 | 5分钟前 |
14 | 获取本月第一天的日期 | getThisMonthFirstDay |
- | 2023-09-01 |
15 | 获取本月最后一天的日期 | getThisMonthLastDay |
- | 2023-09-30 |
16 | 判断两个日期是否相差x个月(用于查询时日期范围筛选限制) | validateDiffMonths |
d1,d2,num(d1,d2为比较的两个日期;num不必填,默认为12,代表12个月) | true/false |
17 | 判断两个日期是否相差x天(用于查询时日期范围筛选限制) | validateDiffDays |
d1,d2,num(d1,d2为比较的两个日期;num不必填,默认为31,代表31天) | true/false |
参考代码
<template>
<view class="content_container">
<uni-forms ref="baseForm" :modelValue="baseFormData">
<h2 class="van-doc-demo-block__title">常用日期工具集合</h2>
<uni-forms-item label="1、获取当前日期">
<view class="v__value">{{getToday}}</view>
</uni-forms-item>
<uni-forms-item label="2、获取当前日期时间">
<view class="v__value">{{getTodayTime}}</view>
</uni-forms-item>
<uni-forms-item label="3、获取今天是星期几">
<view class="v__value">{{getWeekDay}}</view>
</uni-forms-item>
<uni-forms-item label="4、获取时间戳"><view class="v__value">{{getCurrentTime}}</view></uni-forms-item>
<uni-forms-item label="5、获取昨天"><view class="v__value">{{getYesterday}}</view></uni-forms-item>
<uni-forms-item label="6、获取昨天是星期几">
<view class="v__value">{{getYesWeekDay}}</view>
</uni-forms-item>
<uni-forms-item label="7、获取明天"><view class="v__value">{{getTomorrow}}</view></uni-forms-item>
<uni-forms-item label="8、获取5天前"><view class="v__value">{{getDate5s}}</view></uni-forms-item>
<uni-forms-item label="9、获取10天后"><view class="v__value">{{getDate10p}}</view></uni-forms-item>
<!-- <uni-forms-item label="8、获取最近七天的日期"><view class="v__value">{{getLast7Day}}</view></uni-forms-item> -->
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>10、获取最近七天的日期(默认倒序)</text>
</view>
<view class="v__value">
<view v-for="(it, index) in getLast7Day">
<view :key="index" style="text-align: right;">{{it}}</view>
</view>
</view>
</view>
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>11、获取最近七天的日期(顺序)</text>
</view>
<view class="v__value">
<view v-for="(it, index) in getLast7DayAsc">
<view :key="index" style="text-align: right;">{{it}}</view>
</view>
</view>
</view>
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>12、计算两个日期相隔天数</text>
</view>
<view class="v__value">
<view style="color:#333;">2023-08-31</view>
<view style="color:#333;">与2023-08-01</view>
<view>相差:{{getDateDiff}}天</view>
</view>
</view>
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>13、计算两个时间差,返回天小时分钟</text>
</view>
<view class="v__value">
<view style="color:#333;">2022-02-28 10:57:12</view>
<view style="color:#333;">与2022-02-18 16:25:40</view>
<view>相差:{{getTimeDiff}}</view>
</view>
</view>
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>14、获得上周周一和周日的日期</text>
</view>
<view class="v__value">
<view v-for="(it, index) in getLastWeekData">
<view :key="index" style="text-align: right;">{{it}}</view>
</view>
</view>
</view>
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>15、获得本周周一和周日的日期</text>
</view>
<view class="v__value">
<view v-for="(it, index) in getThisWeekData">
<view :key="index" style="text-align: right;">{{it}}</view>
</view>
</view>
</view>
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>16、日期时间转换为几秒/几分/几小时/几天前</text>
</view>
<view class="v__value">
<view style="color:#333;">2023-09-01 21:07:12</view>
<view>转换后:{{getFriendlyDate}}</view>
</view>
</view>
<uni-forms-item label="17、获取本月第一天的日期">
<view class="v__value">{{getThisMonthFirstDay}}</view>
</uni-forms-item>
<uni-forms-item label="18、获取本月最后一天的日期">
<view class="v__value">{{getThisMonthLastDay}}</view>
</uni-forms-item>
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>19、判断两个日期是否相差x个月(用于查询时日期范围筛选限制)</text>
</view>
<view class="v__value">
<view style="color:#333;">2021-08-01</view>
<view style="color:#333;">与2023-08-28</view>
<view>查询范围是否超过12个月:{{validateDiffMonths}}</view>
</view>
</view>
<view class="uni-forms-item is-direction-left" style="display: flex;position: relative;">
<view style="width:65px;justify-content:flex-start;" class="uni-forms-item__label">
<text>20、判断两个日期是否相差x天(用于查询时日期范围筛选限制)</text>
</view>
<view class="v__value">
<view style="color:#333;">2023-08-01</view>
<view style="color:#333;">与2023-09-28</view>
<view>查询范围是否超过31天:{{validateDiffDays}}</view>
</view>
</view>
</uni-forms>
</view>
</template>
<script>
import dateUtil from '../util/dateUtil.js'
export default {
data() {
return {
}
},
computed:{
getToday(){
return dateUtil.getToday()
},
getTodayTime(){
return dateUtil.getTodayTime()
},
getWeekDay(){
return dateUtil.getWeekDay()
},
getCurrentTime(){
return dateUtil.getCurrentTime()
},
getYesterday(){
return dateUtil.getYesterday()
},
getYesWeekDay(){
return dateUtil.getWeekDay(dateUtil.getYesterday())
},
getTomorrow(){
return dateUtil.getTomorrow()
},
getDate5s(){
return dateUtil.getDate(-5)
},
getDate10p(){
return dateUtil.getDate(10)
},
getLast7Day(){
return dateUtil.getLast7Day()
},
getLast7DayAsc(){
return dateUtil.getLast7Day('asc')
},
getDateDiff(){
return dateUtil.dateDiff('2023-08-31','2023-08-01')
},
getTimeDiff(){
return dateUtil.timeDiff('2022-02-28 10:57:12', '2022-02-18 16:25:40')
},
getLastWeekData(){
return dateUtil.getLastWeekData()
},
getThisWeekData(){
return dateUtil.getThisWeekData()
},
getFriendlyDate(){
var date = new Date('2023-09-01 21:07:12');
return dateUtil.getFriendlyDate(date.getTime())
},
getThisMonthFirstDay(){
return dateUtil.getThisMonthFirstDay()
},
getThisMonthLastDay(){
return dateUtil.getThisMonthLastDay()
},
validateDiffMonths(){
return dateUtil.validateDiffMonths('2021-08-01','2023-08-28')
},
validateDiffDays(){
return dateUtil.validateDiffDays('2023-08-01','2023-09-28')
}
}
}
</script>
<style lang="scss">
@import './uni-forms-style.scss';
/** 引入真实项目时,请将以下样式拷贝到全局样式uni.scss中,不需要每个页面都定义 ----start**/
view,
image,
text {
box-sizing: border-box;
flex-shrink: 0;
}
#app {
width: 100vw;
height: 100vh;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-col {
display: flex;
flex-direction: column;
}
.justify-start {
display: flex;
justify-content: flex-start;
}
.justify-center {
display: flex;
justify-content: center;
}
.justify-end {
display: flex;
justify-content: flex-end;
}
.justify-evenly {
display: flex;
justify-content: space-evenly;
}
.justify-around {
display: flex;
justify-content: space-around;
}
.justify-between {
display: flex;
justify-content: space-between;
}
.items-start {
display: flex;
align-items: flex-start;
}
.items-center {
display: flex;
align-items: center;
}
.items-end {
display: flex;
align-items: flex-end;
}
/** 引入真实项目时,请将以下样式拷贝到全局样式uni.scss中,不需要每个页面都定义 ----end**/
</style>