周计划获取周日历，react封装周日历组件
根据windows日历，获取当前周，以及当前周的前2周和后4周，共7周的日期范围
export function getFormatDate(serverDate) { let list = [] // 二维数组 let formatDate = function (date, days) { let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() month = month < 10 ? '0' + month : month day = day < 10 ? '0' + day : day // let week = day === 7 ? 1 : parseInt(day / 7) + 1 return days + year + '.' + month + '.' + day } let getFormatDay = function (date) { let month = date.getMonth() + 1 month = month < 10 ? '0' + month : month let day = date.getDate() let week = day === 7 ? 1 : parseInt(day / 7) + 1 // 这里用Math.ceil()更合适 // return `${month}月第${week}周`
return `${month}月第${getWeekByDate(date)}周` } let addDate = function (date, n) { date.setDate(date.getDate() + n) return date } let setDate = function (date) { let week = date.getDay() === 0 ? 6 : date.getDay() - 1 date = addDate(date, week * -1) let arr = [] let day = getFormatDay(date) for (let i = 0; i < 7; i++) { arr.push(formatDate(i === 0 ? addDate(date, 0) : addDate(date, 1), day)) } // console.log(arr); list.push(arr) } let algo = [-2, -1, 0, 1, 2, 3, 4] for (let i = 0; i < algo.length; i++) { setDate( addDate(serverDate ? new Date(serverDate) : new Date(), algo[i] * 7) ) } // 处理成需要的结果 let result = [] list.forEach((item) => { item = item[0] + '-' + item[item.length - 1].substring( item[item.length - 1].length - 10, item[item.length - 1].length ) result.push(item) }) return result }
获取第几周
// 获取当前日期是当前月的第几周，月初不足一周归于上月最后一周 function getWeekByDate(str) { str = Date.parse(str) let date = new Date(str) let month = date.getMonth() + 1 let year = date.getFullYear() let dateN = new Date(str) //月份第一天 dateN = new Date(dateN.setDate(1)) let w1 = dateN.getDay() // 将字符串转为标准时间格式 let w = date.getDay() //周几 if (w === 0 && w1 != 0) { //当月第一天不是周天，当前日期是周天 w = 7 } let week = Math.ceil((date.getDate() + 6 - w) / 7) if (w1 != 1) //当月第一天不是周一 week = Math.ceil((date.getDate() + 6 - w) / 7) - 1 var cNum = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] if (week === 0) { //第0周归于上月的最后一周 month = date.getMonth() if (month === 0) { //跨年 month = 12 year = year - 1 } let dateLast = new Date(date) let dayLast = new Date(year, month, 0).getDate() let timestamp = new Date(year, month - 1, dayLast) w = new Date(timestamp).getDay() //周几 if (w === 0) { w = 7 } week = Math.ceil((timestamp.getDate() + 6 - w) / 7) - 1 } week = cNum[week] let time = year + '年' + month + '月第' + week + '周' // console.log(time) return week }
结果：
------------------------------------分隔线20220309---------------------------------
1、date.js
/* 周管理：获取格式化日历-start */ // 获取当前是xx月第xx周 function _getRankWeek(date: any) { const year = date.getFullYear() let month = date.getMonth() + 1 month = month < 10 ? '0' + month : month const day = date.getDate() const week = day === 7 ? 1 : Math.ceil(day / 7) return `${year}年${month}月第${_capital(week)}周` } function _capital(num: number): string { switch (num) { case 1: return '一' case 2: return '二' case 3: return '三' case 4: return '四' case 5: return '五' default: return ' ' } } // 将当前日期前进或后退n天 function _moveBackDate(date: any, n: number) { date.setDate(date.getDate() + n) return date } function _formatDate(date: any, days: string) { const year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() month = month < 10 ? '0' + month : month day = day < 10 ? '0' + day : day return days + year + '-' + month + '-' + day } // 获取本周内的7个日期 function _getDateByWeek(date: any) { const week = date.getDay() === 0 ? 6 + 2 : date.getDay() - 1 + 2 // +2 往前推2天 date = _moveBackDate(date, week * -1) const arr = [] for (let i = 0; i < 7; i++) { const fDate = i === 0 ? _moveBackDate(date, 0) : _moveBackDate(date, 1) const item = _formatDate(fDate, _getRankWeek(date)) arr.push(item) } return arr } // 判断两个日期间相差多少周 function _count(start:string, end:string) { const day1 = new Date(start) as any const day2 = new Date(end) as any return Math.ceil((day2 - day1) / (1000 * 60 * 60 * 24 * 7)) } export function getFormatDate(start?:string, end?:string) { const list = [] // 二维数组 let algo = [] // 2.3逻辑变更：如果传入了end，取start-end范围内的周；否则取原来的7周 if (end) { for (let i = 0, len = _count(start as string, end); i <= len; i++) { algo.push(i) } } else { algo = [-4, -3, -2, -1, 0, 1, 2] // 历史4周+当前周+未来2周 } for (let i = 0, len = algo.length; i < len; i++) { const date = start ? new Date(start) : new Date() const arr = _getDateByWeek(_moveBackDate(date, algo[i] * 7 + 2)) // +2 list.push(arr) } // 处理成需要的结果 const result = list.map((label:any, value) => { const startStr = label[0] const endStr = label[label.length - 1] const startdate = startStr.slice(11) const enddate = endStr.slice(endStr.length - 10, endStr.length) const start = startdate.slice(5).replace('-', '.') const end = enddate.slice(5).replace('-', '.') label = `${startStr.slice(0, 11)}(${start}-${end})` return { label, value, startdate, enddate } }) if (end && result[result.length - 1].startdate > end) result.pop() // 满足条件时删除最后一项 return result } // export function getFormatDate(serverDate?: any) { // const list = [] // 二维数组 // const algo = [-4, -3, -2, -1, 0, 1, 2] // 历史4周+当前周+未来2周 // for (let i = 0; i < algo.length; i++) { // const date = serverDate ? new Date(serverDate) : new Date() // const arr = _getDateByWeek(_moveBackDate(date, algo[i] * 7 + 2)) // +2 // list.push(arr) // } // // 处理成需要的结果 // const result = list.map((label: any, value) => { // const startStr = label[0] // const endStr = label[label.length - 1] // const startdate = startStr.slice(11) // const enddate = endStr.slice(endStr.length - 10, endStr.length) // const start = startdate.slice(5).replace('-', '.') // const end = enddate.slice(5).replace('-', '.') // label = `${startStr.slice(0, 11)}(${start}-${end})` // return { label, value, startdate, enddate } // }) // return result // } /* 周管理：获取格式化日历-end */
打印结果如下：
如果是跨年的边界值：getFormatDate('2023-01-08')
----2022-05-07修改入参，加入“归属周”的概念----：
①不传参数，默认以取今天的日期
②传一个参数（'2022-01-01'），则取传入的参数
③传两个参数（'2022-01-01', '2022-05-01'），则以这两个时间节点为边界找到其中所有的周，第一周的开始日期可能会小于参数一，最后一周的结束日期可能会大于参数二
2、vue实现
<template> <div id="app"> <el-button @click="prev">上一周</el-button> <el-select v-model="value" placeholder="请选择" width=100 size='medium'> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <el-button @click="next">下一周</el-button> </div> </template> <script> import { getFormatDate } from '@/utils/date' export default { data() { return { options: [], value: 4 } }, methods: { prev() { if (this.value === 0) return console.log('已经是第一个了') this.value-- }, next() { const { options, value } = this if (value === options.length - 1) return console.log('已经是最后一个了') this.value++ } }, created() { const options = getFormatDate() this.options = options console.log(getFormatDate()) }, mounted() {}, components: {} } </script>
3、react实现
①WeekCalendar/index.tsx
/* 周日历组件 使用场景： 1、有初始值，有【上一周】【下一周】按钮 <WeekCalendar onChange={onWeekChange} isSelected hasToggleBtn /> 2、有初始值，没有【上一周】【下一周】按钮 <WeekCalendar onChange={onWeekChange} isSelected /> 3、没有初始值，没有【上一周】【下一周】按钮 <WeekCalendar onChange={onWeekChange} /> */ import React, { useState, useEffect } from 'react' import { Select, Button } from 'antd' import { getFormatDate } from '@/utils/utils' import styles from './index.less' interface WeekCalendarProps { onChange: (value: any, options?: any) => void isAllowClear?: boolean // 是否支持清除，默认：false isSelected?: boolean // 是否选中当前周，默认：true hasToggleBtn?: boolean // 是否有【上一周】【下一周】切换按钮，默认：false style?: Object isDisabled?: Boolean value?: any } const WeekCalendar: React.FC<WeekCalendarProps> = (Props: any) => { const { onChange, isAllowClear = false, isSelected = true, hasToggleBtn = false, style = {}, isDisabled, value } = Props const [prevDisabled, setPrevDisabled] = useState<boolean>(false) const [nextDisabled, setNextDisabled] = useState<boolean>(false) const [defaultValue, setDefaultValue] = useState<number>(4) // 默认选中下标4 const [selValue, setSelValue] = useState<number>() // 没有初始值时(isSelected === false)，下拉框回显 const options = getFormatDate() // 根据下标获取元素 const getItem = (index: number) => options.find((item: object, i: number) => index === i) const handleChange = (index: number) => { if (index === undefined) return onChange('', {}) // 点击清空按钮，返回 {} if (isSelected) { setDefaultValue(index as number) } else { setSelValue(index as number) } const item = getItem(index as number) onChange(item?.startdate, item) setPrevDisabled(index === 0 ? true : false) setNextDisabled(index === options.length - 1 ? true : false) } useEffect(() => { if (isSelected) { const item = getItem(defaultValue) onChange(item?.startdate, item) } }, []) useEffect(() => { if (value) { const index = options.findIndex((item: any, i: number) => item.startdate === value) setSelValue(index) const item = getItem(index) onChange(item?.startdate, item) setDefaultValue(index) setPrevDisabled(index === 0 ? true : false) setNextDisabled(index === options.length - 1 ? true : false) } }, [value]) return ( <div className={styles.weekCalendar} style={{ display: 'flex', ...style }}> {hasToggleBtn ? ( <Button type="link" disabled={prevDisabled} onClick={handleChange.bind(this, defaultValue - 1)} > 上一周 </Button> ) : null} <Select onChange={(index) => handleChange(index as number)} disabled={isDisabled} options={options} defaultValue={isSelected ? defaultValue : selValue} value={selValue} key={defaultValue} allowClear={isAllowClear} placeholder="请选择日期范围" showSearch optionFilterProp="label" // 根据label过滤 /> {hasToggleBtn ? ( <Button type="link" disabled={nextDisabled} onClick={handleChange.bind(this, defaultValue + 1)} > 下一周 </Button> ) : null} </div> ) } WeekCalendar.defaultProps = { isDisabled: false } export default WeekCalendar
②使用
