#elementUi 日期时间选择器限制时间范围，选择此刻之后的时间，包含时分秒_weixin_49072460的博客-程序员秘密

elementUI 时间选择器限制只能选择此刻之后的时间，包括时分秒（借鉴并修改）

根据产品的需求，需要对生效时间进行限制，限制到时间点，百度了好多文章之后，还是使用elementUI时间选择器自带的属性picker-options，二话不说先看效果图

*![这里是限制的当前日期和当前时间点，当前时间点之前的不能选择

#直接上代码吧~~~~
需要引入moment.js进行时间格式的转换

cnpm install moment --save
//在main.js文件中引入
import moment from "moment";
Vue.prototype.$moment = moment;

<el-form-item label="生效时间：" prop="time">
  <el-date-picker v-model="addStockForm.time" type="datetime"      placeholder="选择生效时间" :picker-options="pickerOption" value-format="yyyy-MM-dd HH:mm:ss" :editable="false"  @change="handler">
  </el-date-picker>
</el-form-item>
<script>
export default {
    
data(){
    
  return{
    
    addStockForm: {
    
        time:''
      },
      pickerOption: {
    
        disabledDate(time) {
    
          return time.getTime() < Date.now() - 8.64e7;
        },
         selectableRange:"00:00:00 - 23:59:59",
      },
    }
  },
  watch:{
    
  "addStockForm.time":{
     //需要对绑定的时间进行监听
    handler(newValue, oldValue) {
    
          if (newValue) {
    
            let date = new Date();//当前时间
            let min = date.getMinutes();//当前时间的分
            date.setMinutes(min);
            let nowDate = this.$moment(date).format("HH:mm:ss");//当前时分秒
            let st = "";
            if (this.$moment(date).format("yyyy-MM-DD") === this.$moment(newValue).format("yyyy-MM-DD")) {
    
              let hh1 = this.$moment(newValue).format("HH:mm:ss")
              if(hh1 <= nowDate) {
    
                this.addStockForm.time = this.$moment(date).format("yyyy-MM-DD HH:mm:ss");
              }
              st = nowDate;
            } else {
    
              st = "00:00:00";
            }
            this.pickerOption.selectableRange = st + "-23:59:59";
            this.pickerOption = this.pickerOption;
          }
        },
        deep: true,
        immediate: true,
      }
  },
}
<script/>

本文链接：https://blog.csdn.net/weixin_49072460/article/details/121743298

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Anaconda中同一个虚拟环境安装pytorch和tensorflow_tensorflow和pytorch可以装在一个环境里吗_xiaojiuwo168的博客-程序员秘密

pytorch和tensorflow环境共存搭建！

axios发送请求几种方式_一行注释的博客-程序员秘密

import 'axios'// get传参数axios.get('/user?id=123') .then(response=> { console.log(response) }) .catch(error=> { console.log(error) });// get传参数axios.get('/getuser', { params: { ID: 123 }}) .then(response=> { ...

常见色域基础知识与色域转换公式（YUV/YCbCr/YIQ/RGB/R‘G‘B‘/CMYK）[email protected]的博客-程序员秘密

所谓色域（Color Space）就是一种颜色的表示方法，针对不同的显示设备不同的系统，往往有不同的表示方法。目前被广泛使用的色域可以被分为三大类：RGB、YIQ/YUV/YCrCb、CMYK。 ※RGB应用最广泛；R'G'B'是RGB色域的Gamma矫正版； ※YUV，YCrCb和YIQ被广泛应用于电视、视频系统中； ※CMYK则主要被应用于彩色打印系统中。注：还有一种叫做Studio RGB的版本，其RGB值范围为16-235，而标准的8-bit RGB或者R'G'B'......

实现两个超长正整数相加_jiexiao1413的博客-程序员秘密

实现两个超长正整数相加public class AddString { public String AddLongInteger(String addend, String augend) { /** * 保证addend始终为较长的字符串 */ if(addend.length() < augend.length()) { String t = add

js操作select标签_js的select标签对应的属性和方法_hhhh2012的博客-程序员秘密

html中的select标签javascript对它们的操作一、基础理解复制代码代码如下:var e = document.getElementById("selectId"); e. options= new Option("文本","值") ; //创建一个option对象,即在标签中创建一个或多个文本 //options是个数组,里面可以存放多个文

leetcode周赛_leetcode周赛可以百度吗_flytowns的博客-程序员秘密

leetcode周赛70周双周赛（2/4）第三题 5973. K Highest Ranked Items Within a Price Range70周双周赛（2/4）第三题 5973. K Highest Ranked Items Within a Price Rangehttps://leetcode-cn.com/problems/k-highest-ranked-items-within-a-price-range///learn//tuple//auto [steps, i, j.

随便推点

ffmpeg命令：ffplay 播放.pcm .g711a .g711u_ffplay g711a_yangops的博客-程序员秘密

ffplay -i test.pcm -f s16le -ac 1 -ar 8000ffplay -i test.g711a -f alaw -ac 1 -ar 8000ffplay -i test.g711u -f mulaw -ac 1 -ar 8000-ac: 音频通道数-ar：音频采样率-f：文件格式

让代码更美:10大编程字体_最长文字代码_oxidy719的博客-程序员秘密

日复一日的编写代码，有没有感到审美疲劳？也许些许的改变就能让我们感到生活更美好。换一种编程字体吧！体验一种新的代码感觉。下面我眼中的十大编程字体： 10. Courier 基本上所有的系统都自带了此种字体，有时候它又以Courier New的名字出现。不幸的是很多终端和编辑器都默认使用此种字体，虽然这不会影响使用，但这会影响心情，它太枯燥了。以前看到这样一句评论：久不见牡丹会以仙人掌

匿名函数语法_hqmln的博客-程序员秘密

js的匿名函数的好处就不说了，大家可以百度下下面仅列出匿名函数语法匿名函数从语法上叫函数直接量，JavaScript语法需要包围匿名函数的括号，事实上自调用匿名函数有两种写法//方式1(function() { console.info( this ); console.info( arguments ); }( window ) );/...

3Dmax移动，旋转，缩放图标不显示_3dmax移动缩放和旋转不见了_Babysbreath.N的博客-程序员秘密

一.先点一下选择工具，就是那个箭头，然后按W键，如果没出现坐标轴，再点X。二.看看你是不是按了X键隐藏了坐标轴,再按一下X就显示出来了。三.可能把坐标隐藏了，去菜单View视图下面找到show transform Gizmo显示坐标轴。四.检查一下快捷键设置五.坐标抽显示太小看不见了，这时只需按键盘右上角上的 -/+,调整坐标轴的大小。六.打开自定义首选项设置 Gizmos 在启用，...

Vue+SpringBoot项目学习（二）：准备工作+vue的结构关系_刘国泰的博客-程序员秘密

安装Vue CLI最开始学习vue的时候其实安装的是vue，对于做后端的我来说我觉得我还是直接使用最快速最好用的工具好了。首先要先安装node.js，直接百度安装就可以了，官网上直接选择稳定版本安装。注：安装的时候不用勾选自动下载环境什么的，要下好久，然后还用不到。安装完之后可以使用命令node -v检查有没有安装成功。安装好node.js之后就可以使用npm install -g vue-cli安装vue-cli，其中-g表示全局，就是说在任何一个项目中都可以使用。注意如果要下载最新的vue要使

AudioSet数据集介绍(含国内镜像地址)_AmigoData的博客-程序员秘密

AudioSet是Google发行的声音版ImageNet。AudioSet提供了两种格式：csv文件，包括音频所在的YouTube视频的ID，开始时间，结束时间以及标签(可能是多标签)128维的特征，采样率为1Hz，也就是把音频按秒提取为128维特征。特征是使用VGGish模型来提取的，VGGish下载地址为 TensorFlow models GitHub repository，可以使用该模...