element的datepicker日期选择器选择周一到周日并实现上一周和下一周

这篇具有很好参考价值的文章主要介绍了element的datepicker日期选择器选择周一到周日并实现上一周和下一周。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element的datepicker日期选择器选择周一到周日并实现上一周和下一周

实现效果

页面初始化效果

datepicker怎样获取周一,vue,vue.js,javascript,前端

点击上一周

datepicker怎样获取周一,vue,vue.js,javascript,前端

点击下一周

datepicker怎样获取周一,vue,vue.js,javascript,前端

实现选择周一和周日过程

1、采用el-date-picker组件,类型使用week

<el-date-picker
    v-model="weeklyDate"
    type="week"
    @change="newDateWeekHandle"
    placeholder="选择周" style="width: 230px">
</el-date-picker>

但是范围是从周日开始,从周一开始需要将firstDayOfWeek设置为 1

<el-date-picker
    v-model="weeklyDate"
    type="week"
    :picker-options="{'firstDayOfWeek': 1}"
    @change="newDateWeekHandle"
    placeholder="选择周" style="width: 230px">
</el-date-picker>

2、框里还需要展示周一和周日的范围,设置两个新的属性startDate和endDate

<el-date-picker
    :format="startDate + ' 至 ' + endDate"
    v-model="weeklyDate"
    type="week"
    :picker-options="{'firstDayOfWeek': 1}"
    @change="newDateWeekHandle"
    placeholder="选择周" style="width: 230px">
</el-date-picker>

根据model属性(默认是星期二),来算出展示的星期一和周期日

newDateWeekHandle(){
      const now = new Date(this.weeklyDate);
      const nowTime = now.getTime();
      const day = now.getDay();
      const oneDayTime = 24*60*60*1000;
      const mondayTime = nowTime - (day-1)*oneDayTime;
      const sundayTime = nowTime + (7-day)*oneDayTime;
      this.startDate = this.$moment(mondayTime).format('YYYY-MM-DD');
      this.endDate = this.$moment(sundayTime).format('YYYY-MM-DD');
},

这里用到了moment.js,需要引入

3、下载moment

npm install moment --save

为了可以全局使用到,在main.js中全局方法挂载

import moment from 'moment'
Vue.prototype.$moment = moment

4、选择之后才能展示范围,需要在页面初始化时就给model属性赋值

  • 在created中调用getDateWeek方法
  • 同时进行计算周一和周日
    getDateWeek(){
      const now = new Date();
      const nowTime = now.getTime();
      const day = now.getDay();
      const oneDayTime = 24*60*60*1000;
      const mondayTime = nowTime - (day-2)*oneDayTime;//默认是周二
      this.weeklyDate = new Date(mondayTime);
      this.newDateWeekHandle();
    },

实现上一周和下一周的切换功能

实际上就是计算model属性值就可以了,通过Date的setDate方法实现日期的相加减,然后根据新得到的日期计算就可以了

[参考文章][https://blog.csdn.net/yangmy_Shy/article/details/91380206]文章来源地址https://www.toymoban.com/news/detail-625653.html

    handleLast(){
      const last = new Date(this.weeklyDate);
      last.setDate(last.getDate()-7);//日期相加减
      this.weeklyDate = last;
      this.newDateWeekHandle();
    },
    handleNext(){
      const next = new Date(this.weeklyDate);
      next.setDate(next.getDate()+7);
      this.weeklyDate = next;
      this.newDateWeekHandle();
    },

到了这里,关于element的datepicker日期选择器选择周一到周日并实现上一周和下一周的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui datePick时间日期一段时间,限制选择日期的范围

     时间戳,一天 想限制只能选日期间隔为一年,联合选择器样式不好改,使用俩单独的 有两个办法限制 1.一个在外层使用form通过表单验证控制,出现错误提示(由于是两个单独的组件,触发验证的方式又为单个失去焦点,所以俩组件无法实时更新) 2.用datepick自带的属性di

    2024年02月05日
    浏览(44)
  • Element-UI的DatePicker禁用日期选择(type=date/daterange)

    \\\"element-ui\\\": \\\"^2.15.13\\\", 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 选择日,效果:    选择日期范围,效果: 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 选择日,效果:  选择日期范围,效果: 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 例如:可选今天、今天前一周

    2024年02月10日
    浏览(39)
  • element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天

    设置:picker-options=\\\"pickerOptions\\\" 然后在data里面设置 源代码

    2024年02月06日
    浏览(54)
  • antd的DatePicker日期选择框实现日期的回显与改变

    核心就是让DatePicker的value属性的值变为受控 但是有一个缺点,必须要给一个默认时间(我这里用的当前时间) 代码如下 效果如下

    2024年02月07日
    浏览(39)
  • element ui datepicker时间控件实现范围选择周,季,年。

    因项目要求,需日,周,月,季,年五种日期范围选择器,故参考文章(在末尾)后分享 一.效果图     二、版本及下载 1.实现需要修改源码,目前修改的版本为2.15.3,所以想要实现该方法,请先将elementui升级或者降到2.15.3. 2.将lib包替换到node_module/element-ui下的lib lib包下载地

    2024年01月17日
    浏览(43)
  • ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现

    未选择时间时,最初选择时间不能超过今天 选择初始时间后,第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。 例如:点击7月15日后,在8月14日往后的日期全部禁止选中 7月15日前一个月的6月15日之前的日期也全部禁止选中 选好起始时间和结束

    2024年02月14日
    浏览(37)
  • Elemrnt UI DatePicker日期选择器(格式、限定日期),周选择器

    日期选择器(格式) 日期选择器(限定/禁用日期) 周选择器

    2024年02月06日
    浏览(35)
  • jQuery UI 实例 - 日期选择器(Datepicker)

    从弹出框或内联日历选择一个日期。 如需了解更多有关 datepicker 部件的细节,请查看 API 文档 日期选择器部件(Datepicker Widget)。 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上。把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历

    2024年02月12日
    浏览(50)
  • datePicker一个或多个日期组件,如何快捷选择多个日期(时间段)

    elementUI的组件文档中没有详细说明type=\\\"dates\\\"如何快捷选择一个时间段的日期,我们可以通过picker-options参数来设置快捷选择: 通过设置变量pickerOption的值可设置快捷选择: 其中dateFormat方法是将日期格式化,getAllDate方法是获取开始和结束日期之间的全部日期,在data中定义:

    2024年02月13日
    浏览(34)
  • flutter开发实战-生日等日期选择器DatePicker

    flutter开发实战-生日等日期选择器DatePicker 在开发遇到设置生日等信息需要选择日期,这里用到的是CupertinoDatePicker iOS效果的日期、时间选择器 运行后效果图如下 我们需要调用底部弹窗显示 生日日期选择 ProfileBirthdayPicker flutter开发实战-生日等日期选择器DatePicker。iOS效果风格

    2024年02月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包