element-ui周选择器选择第几周

最新推荐文章于 2024-12-31 14:59:57 发布

原创最新推荐文章于 2024-12-31 14:59:57 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

16 篇文章

订阅专栏

本文展示了如何在 Vue.js 中使用 Element UI 的日期选择器组件来选择特定的周，并提供了初始化日期、获取选中周数以及计算日期范围的方法。通过设置 type='week' 和 @change 事件，可以实现周选择功能，并根据选中的周来更新显示的开始和结束日期。

<el-date-picker

:clearable="false"

v-model="valuetime"

:format="'yyyy-MM 第' + startdata + '周'"

@change="weekChange"

value-format="yyyy-MM-dd"

class="inp"

size="medium"

type="week"

placeholder="请选择"

></el-date-picker>

{{ starttimeone }}---{{ starttimetwo }}

</div>

</template>

export default {

data() {

return {

startdata: "",

valuetime: "",

starttimeone: "",

starttimetwo: "",

value1: "",

};

created() {

this.getDay();

methods: {

chakan() {

console.log(this.value1);

// 初始化日期

getDay() {

let date = new Date();

console.log(date);

let year = date.getFullYear();

let month = date.getMonth() + 1;

let day = date.getDate();

if (month < 10) {

month = "0" + month;

}

if (day < 10) {

day = "0" + day;

}

let nowDay = year + "-" + month + "-" + day;

this.startdata = this.getWeekInMonth(new Date(nowDay));

this.valuetime = year + "-" + month + "-" + day;

weekstartone(date) {

console.log(date);

let year = date.getFullYear();

let month = date.getMonth() + 1;

let day = date.getDate();

if (month < 10) {

month = "0" + month;

}

if (day < 10) {

day = "0" + day;

}

let nowDay = year + "-" + month + "-" + day;

console.log(nowDay);

this.starttimeone = nowDay;

weekstarttwo(date) {

console.log(date);

let year = date.getFullYear();

let month = date.getMonth() + 1;

let day = date.getDate();

if (month < 10) {

month = "0" + month;

}

if (day < 10) {

day = "0" + day;

}

let nowDay = year + "-" + month + "-" + day;

this.starttimetwo = nowDay;

weekChange(val) {

if (val) {

this.startdata = this.getWeekInMonth(new Date(val));

let time1 = Date.parse(new Date(this.valuetime));

let onetime = new Date(time1 - 3600 * 1000 * 24 * 1);

let twotime = new Date(time1 + 3600 * 1000 * 24 * 5);

this.weekstartone(onetime);

this.weekstarttwo(twotime);

}

// 根据日期判断是月的第几周

getWeekInMonth(t) {

if (t == undefined || t == "" || t == null) {

t = new Date();

} else {

var _t = new Date();

_t.setYear(t.getFullYear());

_t.setMonth(t.getMonth());

_t.setDate(t.getDate());

var date = _t.getDate(); //给定的日期是几号

_t.setDate(1);

var d = _t.getDay(); //1. 得到当前的1号是星期几。

var fisrtWeekend = d;

if (d == 0) {

fisrtWeekend = 1;

//1号就是星期天

} else {

fisrtWeekend = 7 - d + 1; //第一周的周未是几号

}

if (date <= fisrtWeekend) {

return 1;

} else {

return 1 + Math.ceil((date - fisrtWeekend) / 7);

}

};

</script>

.test-box {

background: #ffffff;

height: 31.25rem;

padding: 1.875rem 0 0 1.875rem;

}

.inp {

margin: 0 0 0 0.625rem;

}

</style>