<div
class="search"
style="display: flex; justify-content: justify-content: space-around;"
>
<div>
<van-cell-group style="margin-right: 2px; width: 100px">
<div class="nav-input" @click="showPicker = true">
<van-field
input-align="center"
readonly
clickable
right-icon="arrow-down"
placeholder="请选择年份"
:value="dateYear"
/>
</div>
<van-popup v-model="showPicker" round position="bottom">
<van-picker
title="请选择年"
show-toolbar
:columns="columns"
:default-index="select"
@confirm="yearConfirm"
@cancel="cancel"
/>
</van-popup>
</van-cell-group>
</div>
<div>
<van-cell-group style="margin-left: 2px; width: 280px">
<div class="nav-input" @click="showWeek = true">
<van-field
input-align="center"
readonly
clickable
style="font-size: 12px"
placeholder="请选择周"
:value="dateWeek"
right-icon="arrow-down"
/>
</div>
<van-popup
v-model="showWeek"
round
position="bottom"
:style="{ height: '40%' }"
>
<div style="height: 44px; position: relative">
<span
@click="showWeek = false"
style="
color: #878787;
font-size: 14px;
line-height: 44px;
position: absolute;
left: 16px;
"
>
取消
</span>
<span
style="font-weight: 500; font-size: 16px; line-height: 44px"
>
请选择周
</span>
<span
@click="weekConfirm"
style="
color: #878787;
font-size: 14px;
line-height: 44px;
position: absolute;
right: 16px;
"
>
确定
</span>
</div>
<div
style="height: calc(100% - 44px); width: 100%; overflow-y: auto"
>
<van-radio-group v-model="radio" style="width: 100%">
<!-- justify-content: center; -->
<van-radio
style="
width: 100%;
border-top: 1px solid #f5f5f5;
height: 30px;
padding-left: 10px;
"
icon-size="14px"
v-for="item in weekList"
:key="item.value"
:name="item.value"
>
<span style="padding-left: 5px">
{{ item.label }}
</span>
<!-- <span style="padding-left: 5px">
{{ item.weekTime }}
</span> -->
</van-radio>
</van-radio-group>
</div>
</van-popup>
</van-cell-group>
</div>
<!-- <div>
<div>{{ this.weekTime}}</div>
</div> -->
</div>
data(){ return: weekRow: "", //周的起始日期 date: "", selectedYear: null, dateYear: "", //年选择的双向数据绑定 dateWeek: "", //周选择的双向数据绑定 showPicker: false, //时间的开关 showWeek: false, //时间的开关 columns: [], //年接受的数组 weekList: [], //周接受的数组 select: null, //时间默认值 weekArray: [], //周计数的数组 radio: null, isShow: true, }
created() {
this.getCurrentYear();
this.getYearData();
this.getCurrentWeek();
}, mounted() { this.getMonthFirstLastDay(); this.getList(); this.getTime(); },
//根据年份算出具体的日期
getWeeksInYear(year) {
var d = new Date(year, 0, 1);
var isLeap = new Date(year, 1, 29).getMonth() === 1;
var firstDay = d.getDay();
var week = isLeap ? 366 / 7 : 365 / 7;
if (firstDay > 4) week++;
console.log(week, "计算周数");
return Math.ceil(week);
},
function getWeeksInYear(year) {
var d = new Date(year, 0, 1);
var isLeap = new Date(year, 1, 29).getMonth() === 1;
var firstDay = d.getDay();
var week = isLeap ? 366 / 7 : 365 / 7;
if (firstDay > 4) week++;
return Math.floor(week);
}
function getWeekStartAndEndDates(year) { var weeks = []; var start = new Date(year, 0, 1); var end = new Date(year, 11, 31); var weekCount = getWeeksInYear(year);
for (var i = 1; i <= weekCount; i++) {
var weekStart = start;
var weekEnd = new Date(start.getTime() + 6 * 24 * 60 * 60 * 1000);
weeks.push({
weekNumber: i,
startDate: weekStart,
endDate: weekEnd
});
start = new Date(weekEnd.getTime() + 24 * 60 * 60 * 1000);
}
return weeks;
}
var year = 2024; // 可根据实际情况选择年份 var weeks = getWeekStartAndEndDates(year); //时间格式的处理 timestampToTime(timestamp) { const date = new Date(timestamp); const year = date.getFullYear(); const month = ("0" + (date.getMonth() + 1)).slice(-2); const day = ("0" + date.getDate()).slice(-2); const hours = ("0" + date.getHours()).slice(-2); const minutes = ("0" + date.getMinutes()).slice(-2); const seconds = ("0" + date.getSeconds()).slice(-2);
return `${month}月${day}日`;
},
/**
- 日期格式化
- @param {Date} time 日期
- @param {String} cFormat 日期格式
- @returns {String} 字符串型日期 "Y-M-D h:m:s" */ export function formatDate(time, cFormat) { if (arguments.length === 0) { return null } const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === 'object') { date = time } else { if (('' + time).length === 10) time = parseInt(time) * 1000 date = new Date(time) } const formatObj = { y: date.getFullYear(), m: date.getMonth() + 1, d: date.getDate(), h: date.getHours(), i: date.getMinutes(), s: date.getSeconds(), a: date.getDay(), } const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { let value = formatObj[key] if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1] if (result.length > 0 && value < 10) { value = '0' + value } return value || 0 }) return time_str }
//周的数据 getCurrentWeek() { let d1 = new Date(); let d2 = new Date(); d2.setMonth(0); d2.setDate(1); let rq = d1 - d2; let days = Math.ceil(rq / (24 * 60 * 60 * 1000)); let num = Math.ceil(days / 7); let weekNum = num; this.queryData.week = weekNum; console.log(this.queryData.week, "第几周"); }, //年的数据 getMonthFirstLastDay() { // 当天 let thatDay = ""; // 当月第一天 let oneDayTime = ""; // 当月最后一天 let zDay = ""; let date = new Date(); let curr_date = date.getDate(); let curr_month = date.getMonth() + 1; let curr_year = date.getFullYear(); String(curr_month).length < 2 ? (curr_month = "0" + curr_month) : curr_month; String(curr_date).length < 2 ? (curr_date = "0" + curr_date) : curr_date; thatDay = curr_year + "-" + curr_month + "-" + curr_date;
String(curr_year).length < 2 ? (curr_year = "0" + curr_year) : curr_year;
var m = date.getMonth() + 1;
String(m).length < 2 ? (m = "0" + m) : m;
var d = "01";
oneDayTime = curr_year + "-" + m + "-" + d;
//结束时间
var currentMonth = date.getMonth();
var nextMonth = ++currentMonth;
var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
var oneDay = 1000 * 60 * 60 * 24;
var date1 = new Date(nextMonthFirstDay - oneDay);
var yy = date1.getFullYear();
String(yy).length < 2 ? (yy = "0" + yy) : yy;
var mm = date1.getMonth() + 1;
String(mm).length < 2 ? (mm = "0" + mm) : mm;
var dd = date1.getDate();
String(dd).length < 2 ? (dd = "0" + dd) : dd;
zDay = yy + "-" + mm + "-" + dd;
var startTime = oneDayTime + " " + "00:00:00";
var endTime = zDay + " " + "23:59:59";
this.$set(this.formData, "startTime", startTime);
this.$set(this.formData, "endTime", endTime);
},
//获取默认最新时间
getCurrentYear() {
var nowTime = new Date();
let year = nowTime.getFullYear();
let month = nowTime.getMonth();
let day = nowTime.getDate();
var dateYear = "";
dateYear = this.formatDates(new Date(year, month, day));
this.dateYear = dateYear.slice(0, 4) + "年";
this.queryData.year = Number(dateYear.slice(0, 4));
},
//年选择器
yearConfirm(value) {
// this.getWeekStartAndEndDates(value);
this.selectedYear = value;
this.queryData.year = value;
this.dateYear = value + "年";
this.showPicker = false;
this.queryData.week = "";
this.dateWeek = "";
this.radio = "";
this.getTime(value);
},
//周选择器
weekConfirm() {
this.weekList.forEach((ele) => {
if (this.radio == ele.value) {
this.weekRow = ele.label;
}
});
this.queryData.week = this.radio;
this.dateWeek = this.weekRow;
this.showWeek = false;
this.getList();
},
//年数据
getYearData() {
var nowTime = new Date(this.queryData.year + "");
let year = nowTime.getFullYear();
let month = nowTime.getMonth();
let day = nowTime.getDate();
for (let i = 1901; i < 2099; i++) {
this.columns.push(i);
}
var years = this.formatDates(new Date(year, month, day));
var Year = years.slice(0, 4);
this.select = this.columns.indexOf(Number(Year));
},
/css
.search {
background-color: #f5f5f5;
border: none !important;
margin: 6px;
border-radius: 6px;
text-align: center;
color: #111111;
padding: 4px;
span {
margin-right: 10px;
}
.van-cell-group {
.van-cell--clickable {
border-radius: 6px;
}
border-radius: 6px !important;
input {
// text-align: center !important;
font-size: 14px;
}
}
.nav-input {
display: flex;
justify-content: center;
line-height: 40px;
& ::v-deep .van-cell {
padding: 0;
margin: 0;
font-size: 18px;
line-height: 40px;
width: 60px;
}
}
}
