vue + element使用页面选择的日期和当前日期进行比较

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 7k累计阅读 7.1k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄8年

关注

原创最新推荐文章于 2024-09-26 10:32:14 发布 7k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

//使用element选择的日期

<el-date-picker
  v-model="model.disableTime"
  type="datetime"
  placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>

//使用element选择的日期是  Object类型的要先转化为String类型再转为Date类型然后和当前是进行比较

var remindTime = this.model.disableTime;//自己选择的时间
var str = remindTime.toString();        // toString
str = str.replace('/-/g', '/');         //去空格字符等
var oldTime = new Date(str).getTime();  //装date

//    进行比较

if ( oldTime <= new Date().getTime()) {
  this.$message.error('失效时间当前时间');
  return;
}

收录于

vue

当前文章被收录于：

vue

14 篇文章 0 人学习

订阅专栏查看详情

element

当前文章被收录于：

element

8 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本内容遵循 CC 4.0 BY-SA 版权协议

vue 2.0 前端比较日期数据大小阅读详情

相关推荐

基于Vue3的Element UI日期选择器：限定选择今天及以后日期

通过disabled-date属性，我们可以灵活地控制Element Plus日期选择器中可选择的日期范围。本文示例展示了如何禁用今天之前的所有日期，确保用户只能选择今天及以后的日期。希望这个示例对你有所帮助，如果有任何问题或需要进一步的定制，欢迎随时留言交流。t=O83ADatePicker 日期选择器https://element-plus.org/zh-CN/component/date-picker.html#%E5%B1%9E%E6%80%A7。

qq_62685154的博客 1878

vue得到的某一时间与当前时间作比较

比较时间封装成全局的方法首先创建一个utils文件夹，再创建一个compareTime.js文件用来写我们的代码。 js //输入的时间是'2022/3/11 12:00'这种格式 export const compareTime = (gettime) => { var today = new Date() //获取当前时间 gettime = gettime.replace(/-/g, '/'); //转化成时间戳作比较 var endTime = new Date(getti

weixin_46700289的博客 9053

element-ui 比较时间的大小

时间选择器开始时间和结束时间分开时，一般结束时间不能小于开始时间，代码如下： <el-form-item label="任务开始时间:" prop="taskStartTime"> <div class="block"> <el-date-picker v-model="form.taskStartTime" value-format="yyyy-MM-dd"

V8min的博客 2276

element日期选择范围的运用以及判断当前实时时间是否大于日期选择的时间、开始时间不能大于结束时间

element日期选择范围判断当前实时时间是否大于日期选择的时间以及开始时间不能大于结束时间

weixin_50538763的博客 2007

el-date-picker禁用时间与当前系统时间对比，精确到时分

element UI el-date-picker的日期时间选择器，限制选择的时间与电脑系统时间做对比解决的问题： 1.判断可以选择的时间大于系统的时间； 2.判断可以选择的时间在系统时间之前； 1.选择的时间小于当前系统的时间：问题描述：例如：当前时间为2021-08-30 10:51:42，分为两种情况，如果当前选择的是8-30日，那么可以选择的时间为 00:00:00 - 10:51:42；如果我选择了8-30日以前的时间，那么时间的选择范围则是 00:00:00 - 23:59:59；

dada914的博客 2969

Element UI 选择日期范围区间默认显示前一个月

【代码】Element UI 选择日期范围区间默认显示前一个月。

m0_72987844的博客 517

Vue使用Element的日期选择器DatePicker，以周为单位

在Vue项目中使用Element组件中的日期选择器，当日期单位设置为周时候，我遇到许多小问题：文章目录一、选中一周后，显示的是*2020第42周*，我希望显示为*2020年10月12日至2020年10月18日*这样，或者自定义；二、不可选本周以后的日期，或者本周以前的日期不可选这里面有个小坑，得先看下提示：这个日期控件有个坑，就是选中日期后的时间，双向数据绑定（就是v-model="value"这个）的是起始日期的第二天，不论你把这个起始周设置为星期几都是这样，图一为默认起始周，起始周为周日图

小钻风的博客 1万+

element 日期选择器 date-picker 设置默认时间（当月1号到当前日期）

element 日期选择器结构，两个日期选择器定义开始和结束 <el-date-picker v-model="startTime" type="date" :editable="false" prefix-icon="el-icon-caret-bottom" value-format="yyyy-MM-dd" :clearable='...

zzqz的博客 2万+

vue使用element-ui的日期选择器，框内默认显示当前时间

<el-date-picker v-model="value1" type="date" class="input-class"> </el-date-picker> data(){ return{ value1=‘’ } } methods:{ getdatatime(){//默认显示今天 ...

weixin_34080571的博客 4万+

手撸Element源码，完善日期选择器功能，支持范围选择器周、季、年

根据业务逻辑手撸Element源码，针对日期选择器进行剖析，完善功能，并且根据日常常用需求新增范围选择器周、季、年

伶俜Monster 6979

关于element-ui日期选择器disabledDate使用心得

实现目的: 　　使用type="data"类型实现具备开始日期与结束日期组件(ps:element有自带的type="daterange"类型的组件可以实现此功能) 　　1、开始日期和结束日期都被限制只能选择早于当天（包括当天）的日期　　2、选择完开始日期，选择结束日期时，只能选择开始日期到当天日期的范围　　3、先选择结束日期，再选择开始日期，则只能选择结束日期之前的范围代码...

胡萧徒的博客 1701

Vue城市选择器和日期选择器插件的使用

直接上图：需要完成的需求是这个页面的实现：点击“1”跳转到“2”，在页面“2”中可以在“3”中选择你的家乡，在“4”中可以选择你的生日。其中，用到的组件有两个，一个是城市选择器element-china-area-data，另外一个是日期选择器vue-datepicker 接下来介绍一下这两个选择器的使用，github地址已经在上面标明了，点击组件的名字即可抵达。一、城市选择器elem...

淮左明都的博客 3286

ElementUI+VUE 在使用ElementUI日期选择器时大于当前月份的日期不可选，默认日期

1，月份选择器，大于当前月份的日期不可选 pickerOptions: { //大于当前月分的日期不可选 disabledDate: (time) => { var date = new Date(); var year = date.getFullYe...

凉亭的博客 8465

ElemenUI日期选择器如何禁用当前日期以后的时间?

代码部分 : <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>日期可以禁用</title>  <link rel="stylesheet" href="js/reset.css" t

老婆就是要败家 2344

element关于日期范围选择控件，如何限制只能选择30天切不能大于当前时间

element关于日期范围选择控件，如何限制只能选择30天切不能大于当前时间两种组件方法第一种选择两个日期组件页面 <el-date-picker v-model="form.startTime" type="datetime" ...

qq_15827053的博客 3295

vue element-ui （DatePicker)日期选择器获取开始时间和结束时间传入后台进行网络请求

vue element-ui （DatePicker)日期选择器获取开始时间和结束时间以及显示默认时间 1.DatePicker 日期选择器获取开始时间和结束时间页面效果： <el-date-picker v-model="valuedate" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"

qq_41968486的博客 1万+

关于 element-ui 日期范围选择控件, 限制不能选择当天之后的日期并且限制只能选择30天

关于 element-ui 日期范围选择控件, 限制不能选择当天之后的日期并且限制只能选择30天 html 部分 <el-date-picker v-model="dateRange" type="daterange" unlink-panels format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日

weixin_47124387的博客 3453

Springboot+Vue+Element-UI——DatePicker日期选择器的使用（Vue发送请求）

在Element-UI官网上，我选择的是下图中左侧的默认的一个日期选择器下面是data中的数据，经过测试，下面是数组也行，是对象也行且经过测试，我们在控制台可以输出一下，我们发现这个数据就是数组的形式。

weixin_51351637的博客 2715

vue+element UI仿携程购票页面上面的日期时间轴选择日期

本篇文章写的是利用vue+elementUI写一个购票日期选择，横向的购票日期，类似于携程网上的日期选择，效果如下图所示：其他地方可以忽略，其中比较麻烦的是我圈起来的那个时间选择，如下是代码： <template> <div class="content-class"> <div> <el-row :gutter="20" class="search-row"> <el-col :span="4" style="text-alig