首页 > 其他分享 >Vue日期选择器里面进行disabledDate(time)进行调用

Vue日期选择器里面进行disabledDate(time)进行调用

时间:2024-04-02 18:59:31浏览次数:22  
标签:Vue 调用 time disabledDate e7 8.64 选择器

题主首先参照别人的写法,写在里面,但是发现disabledDate一直是灰色调用不成功,后来进行别的参考

pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;  //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },

 

 也可以这样写,定义一个函数进行调用:增加一行代码:

:disabledDate="disabledDate"

表示调用的函数,其中时间不可用,

<el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  :disabledDate="disabledDate">
              </el-date-picker>

然后在methods里面进行定义

 disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;  //如果没有后面的-8.64e7就是不可以选择今天的
    },

这样子就可以轻松实现日期不可选择了,如果有其他的想要的限制也可以加上去,网上很多

如我写的今天之前将无法再被选中! 希望你也有好的结果~

另外想问一下友友们:怎么让选择器在输入框正下方,那个至下面对着竖线,写了很多都不能实现,如果可以的话麻烦评论一下谢谢~ 主要是我觉得很丑,而且不知道为什么在检查上没找到

谢谢友友们!

标签:Vue,调用,time,disabledDate,e7,8.64,选择器
From: https://blog.csdn.net/m0_63577432/article/details/137275508

相关文章

  • vue3+ant-design-vue - 最新实现“侧边动态导航栏+面包屑导航“功能,vue3+ant后台管理
    效果图在vue3+antdesignvue后台管理系统中,详细完成菜单导航+面包屑动态联动功能效果,支持缓存功能、配置简洁、自动跟随route路由进行变化、自动匹配菜单和面包屑导航的文字等,超详细实用的示例demo全部源代码。提供详细示例源代码,新手小白直接复制稍微改下配置就能用了,快......
  • 基于SpringBoot+Vue前后端分离的宠物领养管理系统的设计与实现+15000字毕业论文
    介绍用户端:首页:播放宠物视频,展示公告列表,介绍流浪宠物。宠物领养:用户搜索想要领养宠物,申请领养,查看自己领养的宠物。流浪宠物救助:用户能够看到需要救助的流浪宠物,并能够新增新的流浪宠物信息。宠物喂养点:用户能够看到需要喂养的流浪宠物的地点,并展示出地点环境。丢失宠物......
  • vue3 点击复制
    npminstallclipboard--save//下载importClipboardfrom'clipboard'//使用页面引入js:constcopyText=async()=>{consttext=window.location.href//设置要复制的文本letclipboard=newClipboard('.buttoncopy',{text:()=>......
  • vue引入vue-router
    Vue路由(router)的安装和使用安装vue-router插件第一步:在CMD窗口中,使用命令跳转到vue的安装路径下第二步:输入命令:npmivue-router@3vue2要安装vue-router3npmivue-router@3vu3要安装vue-router4npmivue-router@4第三步:出现added1packagein2m表示安装成功vu......
  • Vue学习笔记72--element ui
    VueUI组件库:https://element.eleme.cn移动端常用UI组件库Vant:https://youzan.github.io/vantCubeUI:https://didi.github.io/cube-uiMintUI:https://mint-ui.github.ioNUTUI。。。。。。PC端常用UI组件库ElementUI:https://element.eleme.cnIViewUI:https://www.ivi......
  • Vue3集成wangeditor5
    参考连接https://www.wangeditor.com/v5/for-frame.html#使用-1效果图相关依赖<template> <div> <divstyle="border:1pxsolid#ccc;margin-top:10px"> <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig......
  • vue2 +element-ui图片上传示例
    这里使用了一个没有用的裁剪插件,需要先下载它[email protected]然后在main.js引入:importVueCropperfrom'vue-cropper'Vue.use(VueCropper)1、html部分:<template><el-formref="form":model="form"label-width="1.2rem&qu......
  • vue3+ts项目配置别名
    说明在项目开发中,需要通过配置别名来方便开发读取文件目录。配置文件vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from"path";constpathSrc=resolve(__dirname,"src");exportdefault......
  • 19-Vue打包部署
    打包命令:npmrunbuild     ......
  • Vue3连接mqtt订阅消息
    Vue3中使用以及订阅没有安装可使用npminstallmqtt--save(暂时使用了[email protected])页面引入引用mqtt库不要直接引用mqtt会报错importmqttfrom'mqtt/dist/mqtt'代码:1.获取动态配置(关于mqtt的动态配置)<script>////引入mqttimportmqttfrom"mqt......