Element-ui 时间选择器 控制3个月3年等等不能选择案例

Element-ui 时间选择器 控制3个月3年等等不能选择案例,第1张

前言:开发中遇到需求控制三个月前或者后不能选择、控制三年前或者三年后选择时间范围案例,请看demo:

<el-date-picker

      v-model="value2"

      align="right"

      type="date"

      placeholder="选择日期"

      :picker-options="pickerOptions">

</el-date-picker>

pickerOptions: {

        //返回值 表示不可选的区间 YES代表不能选中 NO代表可以选中

        disabledDate(time) {

          let date =new Date() //获取当前时间

          let year = date.getFullYear() + 3  //控制时间年 之前用- 之后用加

          let month =date.getMonth() //控制月份之前减、之后用加。获取3个月前的月份的index(0是1月)

          let day = date.getDate()

          let threeMounthsBeforeDay = (new Date(year,month,day)).getTime() //定义2个月前的毫秒数

          //限制时间范围,如果要包含今天可以+/-8.64e7/8.64e6。现在是往后控制的时间,如果是往前控制 符号变成相反的就可以了

          return time.getTime() <Date.now() || time.getTime() >threeMounthsBeforeDay

        }

      }

日期组件有日期点击事件

在组件上 @这个事件='函数()'

然后在methods中

函数(e){

//e里面应该就有点击的年份

}

使用elementUI的时间选择控件el-date-picker后,作为参数上传到后台接收,发现后台时间比前台时间少一天。

例如我们选择的时间是2020-06-03:

但提交到后端我们发现时间变了:

el-date-picker默认返回的是国际标准时间(GMT)

中国国家标准时间(UTC)是东经120°(东八区)的地方时间

同格林威治时间(即国际标准时间GMT)相差8小时

因此,若后端没有帮忙转换,入库时肯定是少一天的,需要自己手动+8小时转换,再提交到后端,这个需要与后端协调好,看是他转换还是你转换。

在时间控件上添加指定日期格式的属性value-format=“yyyy-MM-dd” 即可 。这个 yyyy-MM-dd 格式可自定义 参照element手册


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11182412.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存