小鱼儿心语：在草原上，做什么事都别做绝，兔子急了还咬狼呢，母狼急了能不拼命吗?不只是草原，任何时候任何地点，做任何事情，都不能把事情做得很绝，因为没人知道未来会发生什么，我们常说“凡事留一线，日后好相见”说的就是这个道理。世事难料，也许这一次的帮忙，会是你未来人生转折的重要助力呢。
一、当天及后七天的日期
当天及七天后.png
<template>
<div class="app-container">
<el-date-picker clearable
v-model="form.examDate"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择检查日期"
:disabled-date="disabledDateFun"
style="width: 340px;"
:disabled="islook">
</el-date-picker>
</div>
</template>
<script setup>
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const disabledDateFun = (time) => {
const date1 = new Date()
const date2 = new Date(date1);
date2.setDate(date1.getDate()+6);
if (time.getTime()<= new Date().getTime()-8.64e7||time.getTime()>date2.getTime()) {
return time.getTime()<= new Date().getTime()-8.64e7||time.getTime()>date2.getTime(); //时间范围必须是时间戳
} else {
return time.getTime() < Date.now() - 30 * 8.64e7||time.getTime()>date2.getTime(); //8.64e7就是一天的时间戳 24*60*60*1000
}
}
</script>
二、近30天日期
近30天日期.png
<template>
<div class="demo-date-picker">
<div class="block">
<el-date-picker
v-model="value1"
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:disabled-date="disabledDateFun"
/>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const value1 = ref('')
const disabledDateFun = (time) => {
if (time.getTime() > new Date().getTime()) {
return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
} else {
return time.getTime() < Date.now() - 30 * 8.64e7; //8.64e7就是一天的时间戳 24*60*60*1000
}
}
</script>
三、当前月份及之前的月份的日期
当前月份及之前的月份.png
<template>
<div class="app-container">
<el-date-picker
v-model="queryParams.yMonth"
type="month"
format="YYYY-MM"
value-format="YYYY-MM"
@change="handleQuery"
:disabled-date="disabledDateFun"/>
</div>
</template>
<script setup>
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const disabledDateFun = (time) => {
if (time.getTime()> new Date().getTime()) {
return time.getTime()> new Date().getTime(); //时间范围必须是时间戳
}
}
</script>
四、当前月份及之前的12个月份的日期--添加开始月份默认为当月的前12个月（例如2022-12），结束月份为当前月份（例如2023-11）
当前月份及之前的12个月份.png
<template>
<div class="app-container">
<el-date-picker
v-model="queryParams1.date"
type="monthrange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="changetime"
/>
</div>
</template>
<script setup>
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const data = reactive({
queryParams1:{
date:[]
}
});
const {queryParams1 } = toRefs(data);
onMounted(() => {
gettime()
})
function gettime(){
//获取新的时间(2019.4.12）
let date = new Date()
//获取当前时间的年份转为字符串
let endYear = date.getFullYear().toString() //'2019'
let staYear = endYear
//获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
let staMonth = 0
let endMonth = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString() //'04'
if(date.getMonth()+1 == 12){
staYear = (date.getFullYear()).toString()
staMonth = (1).toString()
staMonth = staMonth < 10 ? '0'+staMonth:staMonth
}else {
// staMonth = date.getMonth() < 10 ? '0'+(date.getMonth()).toString():(date.getMonth()).toString() //'04'
staYear = (date.getFullYear()-1).toString()
staMonth = ((date.getMonth()+1)+1).toString()
staMonth = staMonth < 10 ? '0'+staMonth:staMonth
}
//字符串拼接，开始时间，结束时间
let end = endYear + '-' + endMonth //当月2019-04
let beg = staYear + '-' + staMonth //当月减3 2019-01
queryParams.value.EDate=end
queryParams.value.SDate=beg //将值设置给插件绑定的数据
queryParams1.value.date.push(beg,end)
}
</script>
五、可选范围为：指定的某一天开始到---两个月后的日期
<template>
<div class="app-container">
<el-date-picker
v-model="form.fshz"
type="date"
placeholder="请选择复审换证日期"
:picker-options="pickerOptions"
style="width:30%">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
const startime = this.$route.query.start // 为某天的日期
return {
pickerOptions: {
disabledDate(time) {
if(time){
const date1 = new Date(startime.slice(0,10)) // YYYY-MM-DD
const date2 = new Date(date1);
date2.setDate(date1.getDate()+60); // 60天两个月内
if (time.getTime()<= new Date(startime.slice(0,10)).getTime()-8.64e7||time.getTime()>date2.getTime()) {
return time.getTime()<= new Date(startime.slice(0,10)).getTime()-8.64e7||time.getTime()>date2.getTime(); //时间范围必须是时间戳
} else {
return time.getTime() < Date.now(startime.slice(0,10)) - 30 * 8.64e7||time.getTime()>date2.getTime(); //8.64e7就是一天的时间戳 24*60*60*1000
}
}
},
},
}
}
</script>
六、日期格式转换
formatDate(time) {
// const date = new Date() // Wed Aug 26 2020 11:14:44 GMT+0800 (中国标准时间)
const date = new Date(time)
// 设置时间转换格式
var y = date.getFullYear() // 获取年
var m = date.getMonth() + 1 // 获取月
m = m < 10 ? '0' + m : m // 判断月是否大于10
var d = date.getDate() // 获取日
d = d < 10 ? '0' + d : d // 判断日期是否大10
let h = date.getHours() // 11
h = h < 10 ? '0' + h : h // 判断日期是否大10
let mm = date.getMinutes() // 14
mm = mm < 10 ? '0' + mm : mm // 判断日期是否大10
let s = date.getSeconds() // 44
s = s < 10 ? '0' + s : s // 判断日期是否大10
return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s // 返回时间格式
}
七、指定的某一天往后的第15天的日期
var strdate = new Date(this.startime); // this.startime为某一天的日期
var begindate = strdate.getTime();
var enddate = begindate + (15*24*60*60*1000);
var str = this.getTimeNow(enddate) // 第15天的日期
this.form.fshz = str
