element 时间选择器，设置周与周的区间

1. 因为elementui 自带的周选择器，只能选择一个时间点，所以我input 来装这个时间区间

结构如下：

<co-date-picker

type="week"

v-model="valueTime1"

format="yyyy年第 WW 周 MM月 dd日"

placeholder="选择周"

@change="changeDate1"

</co-date-picker>

<co-input class="input" suffix-icon="el-icon-date" v-model="inputTime1" placeholder="请选择周"></co-input>

</div>

3. 获取当前选中时间点的周时间和第几周

getWeek(val) {

let firstDay = new Date(val.getFullYear(), 0, 1)

let dayOfWeek = firstDay.getDay() // 2020-01-01是周三 dayOfWeek==3

let spendDay = 1

if (dayOfWeek != 0) {

spendDay = 7 - dayOfWeek + 1 // 5 离下周一还有5天

}

firstDay = new Date(val.getFullYear(), 0, 1 + spendDay) // 2020-01-06是2020年第一个周一，是2020年第二个周

let d = Math.ceil((val.valueOf() - firstDay.valueOf()) / 86400000) // 当前时间距离2020-01-06有几天

let result = Math.ceil(d / 7) // 换算成周为单位 2020-01-06result是0,但其实是第二个周，所以默认加2

let week = result + 2 //如果使用的是默认为加2（如果将自然周设置为周一到周日则是加1）

return (

this.dataFomat(val.valueOf() - 86400000) +

'~' +

this.dataFomat(val.valueOf() + 5 * 86400000) +

' 第' +

week +

'周 '

)

4. 将传入的时间格式化

dataFomat(time) {

const date = new Date(time)

const H = date.getFullYear()

const M = (date.getMonth() + 1).toString().padStart(2, 0)

const D = date.getDate().toString().padStart(2, 0)

return `${H}年${M}月${D}日`

5. 然后赋值给input 输入框

changeDate1(val) {

this.valueTime1 = val.getTime()

this.inputTime1 = this.getWeek(val)

changeDate2(val) {

this.valueTime2 = val.getTime()

if (this.valueTime2 < this.valueTime1) {

this.$message.error('结束时间不能小于开始时间')

}

this.inputTime2 = this.getWeek(val)

6. 当前有个需求是进入默认选中最近6周

因为选择时间选择框时每次选中的是周一，那么我需要拿到当前周一和 6周前的周一

// 获取每周周一

getMondayDay(time) {

let dd = ''

if (time) {

dd = new Date(time)

} else {

dd = new Date()

}

var week = dd.getDay() // 获取时间的星期数

var minus = week ? week - 1 : 6

dd.setDate(dd.getDate() - minus) // 获取minus天前的日期

var y = dd.getFullYear()

var m = dd.getMonth() + 1 // 获取月份

var d = dd.getDate()

return new Date(y + '-' + m + '-' + d).getTime() / 1000

7. 赋值给input 输入框即可

let laseSixWeek = new Date().getTime() - 1000 * 60 * 60 * 24 * 42

// console.log(new Date().getTime(), laseSixWeek)

// console.log(this.getWeek(new Date(+(this.getWeeklyDay(laseSixWeek) + '000'))))

this.valueTime1 = laseSixWeek

this.inputTime1 = this.getWeek(new Date(+(this.getMondayDay(laseSixWeek) + '000'))) // 上6周

this.inputTime2 = this.getWeek(new Date(+(this.getMondayDay() + '000'))) // 当前周

// 获取周的另一种方法

// 获取周

getYearWeek(year, month, date) {

let dateNow = new Date(year, parseInt(month) - 1, date) //当前日期

let dateFirst = new Date(year, 0, 1) //当年第一天

let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000) //当前日期是今年第多少天

return Math.ceil((dataNumber + (dateFirst.getDay() + 1 - 1)) / 7) //dataNumber + 当前年的第一天的周差距的和在除以7 就是本年第几周

element 时间选择器，设置周与周的区间相关推荐

DateTimePicker 日期时间选择器设置默认时间
DateTimePicker 日期时间选择器设置默认时间 default-value属性接受一个数组,第一项为开始时间,第二项为结束时间,时间格式为:"YY-mm-dd HH:mm:ss&q ...
vue element ui 时间选择器设置两个时间一前一后
时间选择器,需求是下线时间必须在发布时间之后,但后台是储存两个值,就没使用element UI 的范围选择器在标签设置:picker-options 属性,该属性下disabledDate(),控制 ...
element 时间选择器禁用秒选项
需求是不要时间选择器的秒选项已解决只需要标签中的format不设置 ss 就可以了
JavaScript 数字转汉字+element时间选择器快速选择
window.CN = {1: '一',2: '二',3: '三',4: '四',5: '五',6: '六',7: '七',8: '八',9: '九',0: '零' } window.LEVEL = ...
element时间选择器限制到时分秒_element-ui 日期时间选择器限制日期以及时间范围...
element-ui 日期时间选择器限制日期以及时间范围. 实现效果: 实现方式: 业务背景: 日期:只能选择今天以后的日期(包含今天), 时间:只能选择当前日期时间一小时以后的时间. 实现效果: 实 ...
element 时间选择器限制时分秒_关于elementUI里日期选择器禁用时间的一些小技巧...
DatePicker日期选择器算是日常开发中用得比较多的插件之一了,特别是做一些后台管理系统,选择时间.日期也是特别的方便,相比于原生的input中的date,elementUI中的日期选择器显得更加 ...
element时间选择器限制到时分秒_ElementUI日期选择器时间选择范围限制
Element是一套基于vue2.x的一个ui框架.官方文档也很详细,这里记录一个element-ui日期插件的补充官方文档中使用picker-options属性来限制可选择的日期,下面举例补充: ...
element 时间选择器——年
<el-date-picker v-model="fileYear" type="year" placeholder="选择年"> ...
elementPlus 日期时间选择器设置24小时制失效
最近使用 vue3+elementplus 做项目有用到elementplus的日期时间选择组件,后端要求的入参格式为: 年-月-日时:分, 而组件默认的是年-月-日时:分:秒,所以通过添加 f ...

element 时间选择器，设置周与周的区间

element 时间选择器，设置周与周的区间相关推荐

最新文章

热门文章