vue element 时间选择器设置禁用日期

在 el-date-picker 组件中有一个 picker-options 属性

disabledDate 可以设置日期的可选范围

      <el-date-picker
        v-model="form.trailer.cutoff_time"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions">
      </el-date-picker>        

data 设置options,当前只设置了过去时间不可选,返回true代表禁用

     data() {
      return {
        pickerOptions: {
          disabledDate(date){
            let zero=new Date().setHours(0, 0, 0, 0);
            if(date.getTime()<zero){
              return true;
            }
            return false;
          }
        },

展示图

原文地址:https://www.cnblogs.com/dongzhi1111/p/11505040.html

时间: 2024-08-30 14:09:47

vue element 时间选择器设置禁用日期的相关文章

element ui 中的时间选择器,禁用今天以前的时间

<el-date-picker v-model="baseInfo.addTime" type="datetime" placeholder="选择时间" :picker-options="pickerOptions"></el-date-picker> pickerOptions: { disabledDate(time) { return time.getTime() < Date.now()

vue+element级联选择器对接后台数据

1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/** * @Auther: GGDong * @Date: 2019/4/3 10:30 */@Getter@Setterpublic class ServerList{ //值 private String value; //名称 private String label; //子级 private List<ServerList> children;} 2.最主要的就是写sql了,不过幸好有M

flatpickr功能强大的日期时间选择器插件

flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能,压缩后的版本仅6K大小. 对手机原生日期格式的支持. 下图说明了使用jQuery UI.Bootstrap.packadate.js和flatpickr拉齐制作一个日期时间选择器时,所需要的文件尺寸大小: 下图是flatpickr日期时间选择器的各种主题效果: 配置参数 在配置参数中,所有的类型为s

日期时间选择器:datetimepicker

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>演示:日期时间选择器:datetimepicker</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> <link rel=&quo

Windows Phone 8.1中日期和时间选择器DatePicker,TimePicker

开篇之前,推荐王磊老师的Windows 8.1中关于DatePicker和TimePicker的讲解 链接:重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker 首先Windows Phone 8.1的这两个选择器的使用和在Windows 8.1中的使用差不多. 1.前台DatePicker和TimePicker标签的使用没什么太大的问题,其中Header属性其实就是给选择器起个名字而已 DateChanged和TimeC

Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker

在实际开发中,经常会遇见一些时间选择器.日期选择器.数字选择器等需求,那么从本期开始来学习Android中常用选择器,今天学习的是DatePicker和TimePicker. 一.DatePicker DatePicker是一个比较简单的组件,从FrameLayout派生而来,供用户选择日期.其在FrameLayout的基础上提供了一些方法来获取当前用户所选择的日期,如果程序需要获取用户选择的日期则可通过为DatePicker添加 OnDateChangedListener 进行监听来实现. 使

日期时间选择器插件flatpickr

前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选择器插件的github地址为:https://chmln.github.io/flatpickr/. 2.里面有很多例子,告诉我们呢怎么设置,不过太多很容易让人眼花.我这里做一个最简单的例子. 2.1引用人家的css和js //路径一定要写对 <link rel="stylesheet&quo

Android日期时间选择器实现以及自定义大小

本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePicker和TimePicker,直接贴代码: date_time_picker.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://s

日期时间选择器

日期时间选择器,精确到秒 GetDate.java package com.tfj.demo; import java.awt.Dimension; import java.awt.Point; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.text.DateFormat; import java.text.SimpleDa