el-date-picker日期选择器

el-date-picker 日期禁选

下面这是 禁选当天以后日期。

  :picker-options="pickerOptions" 属性

1、pickerOptions: {disabledDate(date){let zero=new Date().setHours(0, 0, 0, 0);if(date.getTime() > zero){return true;}return false;}},
2、pickerOptions:{disabledDate(time) {return time.getTime() > Date.now();}},

下面展示一些 禁选当天以后及180天内时间范围。

  :picker-options="pickerOptions" 属性

pickerOptions: {disabledDate(time) {let curDate = (new Date()).getTime();let three = 180 * 24 * 3600 * 1000;let threeMonths = curDate - three;return time.getTime() > Date.now() || time.getTime() < threeMonths;;}},

下面展示一些 选择前后七天且禁选当天以后 /选择范围在30天且只能选七天。

 :picker-options="pickerOptions" 属性

choiceDate ：null，
1、选择前后七天且禁选当天以后
pickerOptions: {onPick: ({ maxDate, minDate }) => {this.choiceDate = minDate.getTime()if (maxDate) this.choiceDate = ''},disabledDate: time => {if (this.choiceDate) {const one = 7 * 24 * 3600 * 1000const minTime = this.choiceDate - oneconst maxTime = this.choiceDate + onereturn (time.getTime() < minTime ||time.getTime() > maxTime ||time.getTime() > Date.now())} else {return time.getTime() > Date.now()}}},2、选择范围在30天 且只能选七天pickerOptions: {onPick: ({ maxDate, minDate }) => {this.choiceDate = minDate.getTime()if (maxDate) this.choiceDate = ''},disabledDate: time => {if (this.choiceDate) {const one = 7 * 24 * 3600 * 1000const minTime = this.choiceDate - oneconst maxTime = this.choiceDate + onereturn (time.getTime() < minTime ||time.getTime() > maxTime ||time.getTime() > Date.now())} else {let curDate = (new Date()).getTime();let three = 30 * 24 * 3600 * 1000;let threeMonths = curDate - three;return time.getTime() > Date.now() || time.getTime() < threeMonths;}}},

获取时间

       // 获取当天时间getNowFormatDate() {let date = new Date();let separator = "-";let year = date.getFullYear();let month = date.getMonth() + 1;let strDate = date.getDate();if (month >= 1 && month <= 9) {month = "0" + month;}if (strDate >= 0 && strDate <= 9) {strDate = "0" + strDate;}let currentDate = year + separator + month + separator + strDate;return currentDate;},export const getNowDate = () => {var curDate = new Date()var preDate = new Date(curDate.getTime())var pre =new Date(+preDate + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').substring(0, 10) +' ' +'00:00:00'return pre}// 1、获取N天前日期（格式为 yyyy-MM-dd）2、获取N天前日期（格式为 yyyy-MM-dd HH:mm:ss）1、getBeforeDate(dayNumber){let n = dayNumber;let d = new Date();let s = ''let year = d.getFullYear();let mon=d.getMonth()+1;let day=d.getDate();if(day <= n){if(mon>1) {mon=mon-1;}else {year = year-1;mon = 12;}}d.setDate(d.getDate()-n);year = d.getFullYear();mon=d.getMonth()+1;day=d.getDate();s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);return s;},2、getDay(day) {var today = new Date();var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;today.setTime(targetday_milliseconds);var tYear = today.getFullYear();var tMonth = today.getMonth();var tDate = today.getDate();tMonth = this.doHandleMonth(tMonth + 1);tDate = this.doHandleMonth(tDate);return tYear  + '-'+ tMonth + '-' + tDate + ' 00:00:00';},doHandleMonth(month) {var m = month;if (month.toString().length == 1) {m = "0" + month;}return m;},3、export const getPrevFormatDate = () => {var curDate = new Date()var preDate = new Date(curDate.getTime() - 24 * 60 * 60 * 1000 * day)var pre =new Date(+preDate + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').substring(0, 10) +' ' +'00:00:00'return pre}

vue el-date-picker日期选择器相关推荐

vue使用element-ui中日期选择器 (el-date-picker) 出现报错
一.代码 <template><div><el-date-pickerv-model="value1"type="date"pla ...
vue 日期面板_Vue实战：日期选择器
在日常工作中需要填写日期的时候,会用到日期选择器,来方便的进行日.月.年的选择.这里我们会用Vue来实现一个日期选择器,效果如下: 实现功能:日期选择弹出层选择天面板选择月面版选择年面版支持用 ...
Element Plus 实例详解（三）___Date Picker 日期选择
Element Plus 实例详解(三) ___Date Picker 日期选择文章目录: 一.前言二.搭建Element Plus试用环境 1.搭建Vue3项目(基于Vite + Vue) 2. ...
强大的独立日期选择器(date picker)插件 - Kalendae
日期:2012-4-16 来源:GBin1.com 在线演示本地下载今天分享一个独立的日期选择插件Kalendae,Kalendae是一个强大健壮的独立日期选择器.如果你不想使用重量的jQu ...
vue 日期选择器默认时间_vue-datepicker
vue-datepicker 基于 Vue 的日期/时间选择组件. 安装 NodeJS 环境 (commonjs) npm i @hyjiacan/vue-datepicker 或者 yarn add ...
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
本文首发:<最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云> Vue 时间日期选择器(date-timepicker)组件在使用 Vue 框架开发中使 ...
uni-app使用picker底部弹起的滚动选择器（日期选择器）
picker从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. html部分: <view cl ...
vue DatePicker日期选择器时差8小时
vue中使用element-ui中的日期选择器组件时,会造成时区差.在向数据库中做保存时发现传输的时间参数和前端控件所选时间端不匹配(相差8小时), 调试发现与后端接口没有问题,是控件本身的原因. 1 ...
el日期选择器设置默认时间
我们再用el进行开发时使用日期选择器的时候会遇到设置默认事件的需求,我的解决方式在一个js文件里设置好时间格式例如: 格式为yyyy-mm-dd const base = {/*** 返回日期格式 ...

vue el-date-picker日期选择器

el-date-picker日期选择器

el-date-picker 日期禁选

获取时间

vue el-date-picker日期选择器相关推荐

最新文章

热门文章