草庐IT

ElementPlus DateTimePicker日期时间选择器限制可选时间范围（精确时分秒）

小绵杨Yancy 2023-04-12 原文

项目场景

ElementPlus DateTimePicker日期时间选择器

当我们使用日期时间选择器时，可能会有需求只能选择今日之前或者今日之后，又或者一周内，一个月内的时间，而其他的时间应该禁止被用户选择。

解决

直接看文档：

我没通过设置disabled-date属性来自定义禁用的时间。

今天之前/之后

只能选择今天之后的时间。

<template>
    <div>
        <el-date-picker v-model="time" type="datetime" placeholder="Pick a Date" format="YYYY-MM-DD HH:mm:ss"
            :disabledDate="disabledDateFn"></el-date-picker>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const time = ref('')

const disabledDateFn = (time: any) => {
    return time.getTime() < Date.now();
}
</script>

<style scoped></style>


同理，只可选择今天之前的时间直接取反即可。

一周之内

今天之前的，“大于”今天加7天的，禁用。(7 * 24 * 3600 * 1000为7天所对应的毫秒)

const disabledDateFn = (time: any) => {
    return time.getTime() < Date.now() || time.getTime() > Date.now() + 7 * 24 * 3600 * 1000;
}


其他时间同理。

禁用时分秒

在上面的例子中，其实存在一个问题，如下图：

如图，虽然11号不能选择，但是点击事件选择框，则可以选择一整天的时间。
显然，这样用户体验十分不好，最理想的应该是用户可以选择11号，点开时间选择框只能选择当前之后的时分秒。

在网上找了很多方案，发现全是旧版elementUI的，好像elementPLUS把selectableRange已经去掉了，而文档中也没有明确指出限制时分秒的属性，最后的解决方案：

<template>
  <div>
    <el-date-picker
      v-model="time"
      type="datetime"
      placeholder="Pick a Date"
      format="YYYY-MM-DD HH:mm:ss"
      :disabledDate="disabledDateFn"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds"
      :default-time="new Date()">
    </el-date-picker>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const time = ref("");

const disabledDateFn = (time: any) => {
  //比当前时间小的时间禁用（返回false则禁用）
  return time.getTime() < Date.now() - 24 * 3600 * 1000;
};

const disabledHours = () => {
  const a = [];
  for (let i = 0; i < 24; i++) {
    // 限制之前 < 之后 > ，下面同理
    if (new Date().getHours() <= i) continue;
    a.push(i);
  }
  return a;
};
const disabledMinutes = () => {
  const a = [];
  for (let i = 0; i < 60; i++) {
    // 限制之前 < 之后 > ，下面同理
    if (new Date().getMinutes() <= i) continue;
    a.push(i);
  }
  return a;
};
const disabledSeconds = () => {
  const a = [];
  for (let i = 0; i < 60; i++) {
    // 限制之前 < 之后 > ，下面同理
    if (new Date().getSeconds() <= i) continue;
    a.push(i);
  }
  return a;
};
</script>

<style scoped></style>

这里之所以设置default-time为当前时间，是我发现当点击今天时，默认时间是00:00:00，按理说应该无法选中的……
最后的效果：

DateTimePickerElementPlusspanclasstokenjavascriptvue.js前端

有关ElementPlus DateTimePicker日期时间选择器限制可选时间范围（精确时分秒）的更多相关文章

  1. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  2. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  3. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  4. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  5. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

  6. ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or

  7. ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2

    这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build

  8. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  9. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  10. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

随机推荐