Vue2 Element DatePicker组件设置默认日期、控制日期范围

白瑕 2023-06-21 原文

文章目录

前言

以前都是做练习, 上周拿到这个任务直接被卡住…

一、设置默认日期

1.不要用placeholder

依然不使用placeholder属性, 在v-model初始就绑定了时间的情况下, 组件可以识别并自动切换到对应日期, 使用placeholder其实是无效的.
placeholder展示的值并不是绑定在data中的属性上的, 即便设置, 初始状况下也无法获取值.

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
>
<!-- :placeholder="date" -->
</el-date-picker>

data() {
  return {
    date: '2017-01-01'
  };
},

这样也是照常显示日期, 另外提醒就是format不要全大写, 会没法切换日期.

另外:
format: datePicker以何种格式展示时间
value-foramt: detePicker的值为何种格式(从data中直接取到的值为何种格式)

<template>
  <div>
    <el-date-picker v-model="date" format="yyyy-MM-dd" value-format="yyyyMMdd">
    </el-date-picker>
    {{ date }}
  </div>
</template>

data() {
  return {
    date: "20020807",
  };
},

合理使用免除一些不必要的数据处理.

2.设置动态的默认日期

还是利用v-model, 可以利用时间对象new Date()的辅助.

<el-date-picker
  v-model="date.createDate"
  format="yyyy-MM-dd"
></el-date-picker>

data() {
  return {
    date: {
      createDate: new Date(),
    },
  };
},

不过你可能并不想每次拿数据都到date.createDate里去拿, 所以数组也是可以的

data() {
  return {
    date: [ new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() ]
  };
},

如果数组取值形式也不能满意, 那就把表达式抽离出来, 然后你可以在mounted或者created周期把它赋值给data里绑定的那个属性, 就像这样:

data() {
  return {
    date: "",
  };
},
created() {
  this.initDate();
},
methods: {
  getDate() {
    return (
      new Date().getFullYear() +
      "-" +
      (new Date().getMonth() + 1) +
      "-" +
      new Date().getDate()
    );
  },
  initDate() {
    this.date = this.getDate()
  },
 },
};

二、限制日期选取

dateRange模式下也是一样的.

1.方案

不是用disabled属性来做这个, 刚开始用的时候迷糊了…
使用pickerOptions属性来达到这个目的, pickerOptions绑定的函数对象里有diabledDate函数类型, 这个函数可以接受一个参数在运算中作为当前日期(这个参数一般会写作time), 而函数内的表达式返回true时, datePicker会根据表达式来对日期进行限制选择(就是有些日期会变成灰色不可选).

属性	说明
shortcuts	设置快捷选项(就是日期选择表左边的快捷选项)，需要传入 { text, onClick } 对象
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean
firstDayOfWeek	周起始日
onPick	选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效

但是这个属性本身只需要一个对象, 不管你做什么, 你最后给它一个对象就好了, 你可以先在data里准备好这个对象, 然后在里面搞一个disabledDate属性, 但是的disabledDate属性的值一定得是个函数, 还得能返回Boolean.

2.举例

比如这样:

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
  :picker-options="limitDate"
></el-date-picker>

data() {
  return {
    date: "",
    
    limitDate: { 
    // 一个与picker-options绑定的对象, 和它内部的函数类型disabledDate属性
      disabledDate: this.doLimitDate
    },
    
  };
},
methods: {

  doLimitDate() { // 一个能返回Boolean的函数
    this.limitDate.disabledDate = (time) => { // time为当前日期, disabledDate自带参数
      return (time.getTime() + 24 * 3600 * 1000) > Date.now()
    };
  },

},

或者这样:
嗯…我觉得可以尝试直接返回一个内含可返回布尔值的函数的对象?

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
  :picker-options="limitDate"
></el-date-picker>

data() {
  return {
    date: "",
  };
},
computed: {

  limitDate() { 
    return {
      disabledDate:(time) => { // time为当前日期, disabledDate自带参数
        return (time.getTime() + 24 * 3600 * 1000) > Date.now();
    };
  }
}

效果都是一样的, 在我的黑暗模式下不太明显, 调回来会清晰一些:

你可以看到未达到的日期都是灰色, 不可选的.

总结

还好吧, 我前几天一直很焦虑, 分给我的任务做的很慢, 很多组件的用法都是第一次尝试, 然后项目也不熟悉, 公共组件和方法用起来也是磕磕绊绊然后接口又出了问题, 啊——! 总之结果就是我做的很慢…
然后我就很焦虑我会不会被开, 啊哈哈, 对, 被开掉.
今天领导找我谈话说你刚开始做的慢点不要紧, 我总算是稍微心安一点了.

有关Vue2 Element DatePicker组件设置默认日期、控制日期范围的更多相关文章

ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby-openid:执行发现时未设置@socket - 2
我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass
ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？最佳答案我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击
Ruby Readline 在向上箭头上使控制台崩溃 - 2
当我在Rails控制台中按向上或向左箭头时，出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem，并且我有rb-readline(0.4.2)(人们推荐的最少
ruby-on-rails - 带 Spring 锁的 Rails 4 控制台 - 2
我正在使用Ruby2.1.1和Rails4.1.0.rc1。当执行railsc时，它被锁定了。使用Ctrl-C停止，我得到以下错误日志:~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`gets':Interruptfrom~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`verify_server_version'from~/.rvm/gems/ruby-2.1.1/gems/spring-1.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上找到一个类似的问
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)是
ruby-on-rails - openshift 上的 rails 控制台 - 2
我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新rubygems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems
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
ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2
我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。最佳答案我不太明白你的问题。我假设您想检查