Element-ui 时间选择器 控制3个月3年等等不能选择案例

前言：开发中遇到需求控制三个月前或者后不能选择、控制三年前或者三年后选择时间范围案例，请看demo：

<el-date-picker

      v-model="value2"

      align="right"

      type="date"

      placeholder="选择日期"

      :picker-options="pickerOptions">

</el-date-picker>

pickerOptions: {

        //返回值 表示不可选的区间 YES代表不能选中 NO代表可以选中

        disabledDate(time) {

          let date =new Date() //获取当前时间

          let year = dategetFullYear() + 3  //控制时间年 之前用- 之后用加

          let month =dategetMonth() //控制月份之前减、之后用加。获取3个月前的月份的index(0是1月)

          let day = dategetDate()

          let threeMounthsBeforeDay = (new Date(year,month,day))getTime() //定义2个月前的毫秒数

          //限制时间范围，如果要包含今天可以+/-864e7/864e6。现在是往后控制的时间，如果是往前控制 符号变成相反的就可以了

          return timegetTime() < Datenow() || timegetTime() > threeMounthsBeforeDay

        }

      }

element table 多选表格，表格中有 *** 作按钮的话，获取当前勾选行的数据，大家都知道用slot-scope="scope" 来获取，但如果要实现的功能是在表头上了，那要怎么获取当前前勾选的这一行的数据呢？这时我们可以用表格中提供的@selection-change="handleSelectionChange" 里的 multipleSelection来实现。

element 多选表格

利用表格 type="selection" 属性实现，这种方法不用在data里定义一个全局数组，而定义的是用来接收你当前循环的某个参数，这样你要获取多少个参数就是单独写多少次。

引言

一直对 elasticsearch 中的 date 类型认识比较模糊，而且在使用中又比较常见,这次决定多花些时间，彻底弄懂它，希望能对用到的同学提供帮助。

注意：本文测试使用是 elasticsearch 63 版本，其他版本规则可能有所变化，如遇到不兼容的情况，还请参考  官方文档

Date 数据类型

elasticsearch 数据是以 JSON 格式存储的，而  JSON 中是并没有  date  数据类型，因此 Elasticsearch 中虽然有  date  类型，但在展示时却要转化成另外的格式。

date  类型在 Elasticsearch 展示的格式有下面几种：

将日期时间格式化后的字符串，如 "2015-01-01" 或者 "2015/01/01 12:10:30"

long 型的整数，意义是  milliseconds-since-the-epoch ，翻译一下就是自  1970-01-01 00:00:00 UTC  以来经过的毫秒数。

int 型的整数，意义是  seconds-since-the-epoch , 是指自  1970-01-01 00:00:00 UTC  以来经过的秒数。

后两种的描述里都包含 UTC ，什么是 UTC 呢？

UTC(Universal Time Coordinated) 叫做世界统一时间，中国大陆和 UTC 的时差是 + 8 ,也就是 UTC+8。

不论 date 是什么展示格式，在 Elasticsearch 内部存储时都是转换成 UTC，并且把时区也会计算进去，从而得到  milliseconds-since-the-epoch  并作为存储的格式。

在查询日期时，会执行下面的过程：

转换成 long 整形格式的范围(range) 查询

得到聚合的结果

将结果中的 date 类型（long 整型数据）根据 date format 字段转换回对应的展示格式

Date 的默认格式

Date 的格式化类型是可以通过  format  来指定的，如果没有指定，就会使用默认的格式：

"strict_date_optional_time||epoch_millis"

这表示什么意思呢？

先来弄懂  strict_date_optional_time

A generic ISO datetime parser where the date is mandatory and the time is

optional  Full details here

这是 elasticsearch 官网的解释，表示只要是 ISO datetime parser 可以正常解析的都是  strict_date_optional_time 。都有哪些语法呢？

date-opt-time=date-element ['T'[time-element] [offset]]date-element      = std-date-element | ord-date-element | week-date-element std-date-element  = yyyy ['-'MM ['-'dd]] ord-date-element  = yyyy ['-'DDD] week-date-element = xxxx'-W'ww ['-'e]time-element      = HH [minute-element] | [fraction] minute-element    =':'mm [second-element] | [fraction] second-element    =':'ss [fraction] fraction          = (''|',') digit+

其中中括号内的都是可选的，可填可不填。以  std-date_element  举个例子

2018-11-19

2018

2018-11

上面 3 种格式都满足要求。

除了  strict_date_optional_time  ，还可以是 epoch_millis 格式，即 epoch 以来的毫秒数。

举个例子

PUT my_index{"mappings": {"_doc": {"properties": {"date": {"type":"date"}      }    }  }}PUT my_index/_doc/1{"date":"2015-01-01"} PUT my_index/_doc/2{"date":"2015-01-01T12:10:30Z"} PUT my_index/_doc/3{"date":1420070400001} GET my_index/_search{"sort": {"date":"asc"}

上面的 PUT 请求中的 date 数据均满足默认的要求。

如何指定多个 date 格式

同一个 date 字段可以指定多个 date 格式，只要使用 || 分隔就可以了。在索引，都会对 date 格式挨个进行匹配，直到找到匹配的格式为止。

如果存储时 date 格式为  milliseconds-since-the-epoch  ，在查询时会将其转换为指定的第一个 date 格式。

举个例子,有兴趣的同学可在 sense 中动手实践下。

PUT my_index{"mappings": {"doc": {"properties": {"date": {"type":"date","format":"yyyy-MM-dd HH:mm:ss||yyyy-MM-dd||epoch_millis"}      }    }  }}PUT /my_index/doc/1{"date":"2018-09-24 19:23:45"}PUT /my_index/doc/2{"date":"2018-09-25"}GET my_index/_search{"query": {"match_all": {}  }}

小结

本文主要讲解了 elsaticserach 中的 date 类型格式，语法及转换过程。elasticsearch 中存储 date 类型统一使用  milliseconds-since-the-epoch  格式，展示时根据不同格式而区分。                                                                                      欢迎工作一到五年的Java工程师朋友们加入Java群： 891219277

群内提供免费的Java架构学习资料（里面有高可用、高并发、高性能及分布式、Jvm性能调优、Spring源码，MyBatis，Netty,Redis,Kafka,Mysql,Zookeeper,Tomcat,Docker,Dubbo,Nginx等多个知识点的架构资料）合理利用自己每一分每一秒的时间来学习提升自己，不要再用"没有时间“来掩饰自己思想上的懒惰！趁年轻，使劲拼，给未来的自己一个交代！

实现一个如果数据充足，则会无线向右延申

利用Element-ui的多级表头实现，由于里面行数需要根据数据的多少确定，所以需要通过v-for实现

但是利用了v-for结果并不显示

这是因为Element-ui的prop属性对应你返回的属性名字

解决做法

添加

<el-table-column label="速" align="center">

<template slot-scope="scope">

<span>{{ scoperowtableData[index]name }}</span>

</template>

</el-table-column>

<el-table v-loading="loading" :data="postdataList">

<el-table-column label="" align="center" prop="dataName" />

<el-table-column label="" align="center" prop="dataClass" />

<el-table-column

align="center"

v-for="(item, index) in postdataList[0]tableData"

:key="index"

:label="itemdate"

>

<el-table-column label="速" align="center">

<template slot-scope="scope">

<span>{{ scoperowtableData[index]name }}</span>

</template>

</el-table-column>

</el-table-column>

</el-table>

上面用postdataList[0]tableData代替表头是因为各个数据的表头是一样的。也就是说postdataList[0]和postdataList[1]……公用一个表头

数据类型

// 请求数据设置表格数据

postdataList: [

{

dataName: 11,

dataClass: 11,

tableData: [

{

date: "2016-05-02",

name: "王小虎",

province: "上海",

city: "普陀区",

address: "上海市普陀区金沙江路 1518 弄",

zip: 200333,

tag: "家"

},

{

date: "2016-05-04",

name: "王小虎",

province: "上海",

city: "普陀区",

address: "上海市普陀区金沙江路 1517 弄",

zip: 200333,

tag: "公司"

}

]

},

{

dataName: 11,

dataClass: 11,

tableData: [

{

date: "2016-05-02",

name: "王>

对于您这个element穿梭框点击后异步问题解答，Element穿梭框点击后异步，一般有如下几种实现方式：

1 使用Ajax异步请求：将穿梭框的点击事件进行绑定，触发后发起Ajax异步请求，请求后台接口获取数据，再做相应的处理，用于展示或者其他 *** 作。

2 使用Promise异步函数：将穿梭框的点击事件绑定，触发后执行Promise异步函数，在函数内部调用后台接口，获取数据后再做相应处理，以便展示或者其他 *** 作。

将el-date-picker根据业务需求封装为自己的base-date-picker控件, 封装的控件对外也要可以通过v-model绑值

其它控件,比如select, 可以通过

实现v-model的双重绑定

但是调用el-date-picker组件时, 使用:value="value"却没有办法给value赋值,也不走change事件,只能通过v-model赋值

因为具体原因也不是很确定, 扒了一下源码可能跟pickerVisible这个属性有关, date-picker内部更多的是emit了 blur事件, change事件走的并不多

Anyway, 用了一个取巧的办法解决了:

思路: el-date-picker还是绑定v-model, @change的时候对外提交thismodel

回显暂时用不到,先不实现了

以上就是关于Element-ui 时间选择器 控制3个月3年等等不能选择案例全部的内容，包括:Element-ui 时间选择器 控制3个月3年等等不能选择案例、vue element ui 表格 selection-change方法使用(获取某行数据)、Elasticsearch date 类型详解等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！