美文网首页
element-ui el-date-picker 日期范围的可

element-ui el-date-picker 日期范围的可

作者: 老周_o_o | 来源:发表于2021-03-23 17:48 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.1/index.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
    </head>
    
    <body>
        <div id="test1">
            <el-date-picker :picker-options="pickerOptions" value-format="yyyy-MM-dd" size="mini" v-model="timeRange"
                type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>
        <script>
            class DateFormat {
                getDate(value) {
                    const date = new Date(value)
                    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 [year, month, day].join('-')
                }
                getMyDate(day) { // 获取day天前的日期,例如7天内就是 startTime到今天
                    const todaySec = new Date().getTime()
                    const startTime = this.getDate(new Date(todaySec - (day - 1) * 24 * 3600 * 1000))
                    return startTime
                }
            }
            let format = new DateFormat()
            new Vue({
                el: '#test1',
                data: {
                    timeRange: [],
                    pickerOptions: {
                        disabledDate(date) {
                            // 可选择⽇期的起点: 2019-01-01
                            // 可选择⽇期的终点: {今⽇⽇期}
                            const startDate = new Date('2019-01-01 00:00:00') // 要带上时间点,否则默认是8点
                            const todayDate = new Date()
                            return date < startDate || date > todayDate
                        },
                        shortcuts: [{
                            text: '今天',
                            onClick(picker) {
                                const end = new Date()
                                const start = new Date()
                                picker.$emit('pick', [start, end])
                            }
                        }, {
                            text: '昨天',
                            onClick(picker) {
                                const end = format.getMyDate(2)
                                const start = format.getMyDate(2)
                                picker.$emit('pick', [start, end])
                            }
                        }, {
                            text: '过去7天',
                            onClick(picker) {
                                const end = format.getMyDate(1)
                                const start = format.getMyDate(7)
                                picker.$emit('pick', [start, end])
                            }
                        }, {
                            text: '过去30天',
                            onClick(picker) {
                                const end = format.getMyDate(1)
                                const start = format.getMyDate(30)
                                picker.$emit('pick', [start, end])
                            }
                        }, {
                            text: '本周',
                            onClick(picker) {
                                const end = format.getMyDate(1)
                                const day = new Date()
                                const start = format.getMyDate(day.getDay())
                                picker.$emit('pick', [start, end])
                            }
                        }, {
                            text: '上周',
                            onClick(picker) {
                                const day = new Date()
                                const end = format.getMyDate(day.getDay() + 1)
                                const start = format.getMyDate(day.getDay() + 7)
                                picker.$emit('pick', [start, end])
                            }
                        }, {
                            text: '本月',
                            onClick(picker) {
                                const end = format.getMyDate(1)
                                const day = new Date()
                                const start = format.getMyDate(day.getDate())
                                picker.$emit('pick', [start, end])
                            }
                        }, {
                            text: '上月',
                            onClick(picker) {
                                const day = new Date()
                                const end = format.getMyDate(day.getDate() + 1)
                                const endDate = new Date(end).getDate()
                                const start = format.getMyDate(day.getDate() + endDate)
                                picker.$emit('pick', [start, end])
                            }
                        }]
                    }
                }
            })
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:element-ui el-date-picker 日期范围的可

          本文链接:https://www.haomeiwen.com/subject/cnnfhltx.html