JSFiddle - React, Tailwind, and code Playground

by CntChen

JavaScript

# timepick 字段定义 #

**所有字段为小写格式**

## 分隔符@ ## 

**SEPARATOR**

分割**timepick**字段内容

包含 **时间倒退值** and **时间倒退参考点**

**timeBack**

**timeStone**

*格式：*


> 时间倒退值**@**时间倒退参考点

*示例：* 
> -7d@mon

`-7d` 表示**时间倒退值**

`mon` 表示**时间倒退参考点**

示例的意义：从这个月开始的时刻倒退7天的那个时刻

## 没有分隔符的 timepick ##
* **now** 表示当前
* **all** 表示不受限制的时间

## 时间倒退值 字段定义 ##
-4 **y** 表示时间倒退单位为年

-4 **mon** 表示时间倒退单位为月

-4 **d** 表示时间倒退单位为日

-4 **w** 表示时间倒退单位为周

-4 **h** 表示时间倒退单位为小时

-4 **m** 表示时间倒退单位为分钟

-4 **s** 表示时间倒退单位为秒

## 时间倒退参考点 字段定义 ##

**y** 表示当前年的开始时刻

**mon** 表示当前月的开始时刻

**d** 表示今天的开始时刻

**w** 表示当前周的开始时刻

**h** 表示当前小时的开始时刻

**m** 表示当前分钟的开始时刻

**s** 表示当前秒的开始时刻

# 时间设置按钮 #

添加 **date-earliest** and **date-lastest** 字段

其值为 **timepick字段**

*示例*
    
    <a href = "javascript:void(0);" class="timepick" date-earliest = "-7d@d" date-lastest = "now">A Hour</a>

`date-earliest = "-7d@d"` 开始时间为 `-7d@d`

`date-lastest = "now"` 结束时间为 `now`

# 优点 #
* 参考了 **splunk** 的方式

* 配置文件的引入，以及用户自定义时间选择器

* 简化了 **HTML** 和 **JS** 代码的编写

# 前端处理方法 #

    编写HTML代码和用户规则的时候，必须实现严格的 timepick 语法，（将会为"用户自定义规则"提供规则检测器）

* **兼容所有严格的 timepick 语法**

* **对不严格语法尽可能处理**


## 处理逻辑 ##

## 兼容列表 ##

* 对于输入 `" "`（空格） 和 `""`(空) 返回当前时间