vue日期选择器从当月1号到当前日期

最新推荐文章于 2024-09-15 07:24:58 发布

@草莓小布丁

最新推荐文章于 2024-09-15 07:24:58 发布

阅读量720

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52441253/article/details/128034969

版权

这篇博客介绍了如何在Vue.js中使用日期选择器组件显示从当月第一天到当前日期的范围。通过`el-date-picker`组件结合JavaScript的Date对象，设置默认日期范围为当前月的第一天到当天。在`defaultDate`方法中，作者详细解释了如何拼接日期字符串来实现这一功能。

摘要由CSDN通过智能技术生成

vue日期选择器从当月1号到当前日期

日期选择器展示

<el-form-item label="日期：">
    <el-date-picker
                    clearable
                    v-model="listQuery.timeRange"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    >
    </el-date-picker>
</el-form-item>

调用日期方法

mounted() {
    this.defaultDate();
},

日期方法

//设置默认日期
defaultDate() {
    //获取新的时间(2022.4.13）
    let date = new Date();
    //获取当前时间的年份转为字符串
    let year = date.getFullYear().toString(); //'2022'
    //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
    let month =
        date.getMonth() + 1 < 10
    ? "0" + (date.getMonth() + 1).toString()
    : (date.getMonth() + 1).toString(); //'04'
    //获取天，判断是否小于10，如果是在字符串前面拼接'0'
    let day =
        date.getDate() < 10
    ? "0" + date.getDate().toString()
    : date.getDate().toString(); //'12'
    //字符串拼接，开始时间，结束时间
    let end = year + "-" + month + "-" + day; //当天'2022-04-13'
    let beg = year + "-" + month + "-01"; //当月第一天'2022-04-01'
    this.timeRange = [beg, end]; //将值设置给插件绑定的数据
},