npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@riil-frontend/component-quick-time-range

v2.1.4

Published

快捷选择最近时间段

Downloads

67

Readme

最近时间快捷选择器

quick-time-range

快捷选择最近时间段。 功能描述:

  1. 支持初始化已选项,初始化自定时间段,自定义下拉选项。
  2. 选择后返回秒单位的时间戳数组[startTime,endTime];
  3. 从常用时间切换到自定时间,会自动带入上次选择的常用时间段;
  4. 日期组件点击确认才会触发 onChange,点空白处会撤销操作
  5. onChange 回调参数中的 isDeff,可以判断出用户操作前后时间段是否发生了变化,便于自行处理业务逻辑。

API

QuickTimeRange

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------------------- | ------ | ---- | | rangePickerProps | 透传 RangePicker 属性 | - | RangePicker.props | | | | selectProps | 透传 Select 属性 | - | Select.props | | | | defaultInterval | 初始化下拉选中项,此属性对应 option 中的 value 值 | - | string | | | | defaultCustomTime | 初始化自定义时间选择段[startTime,endTime],秒为单位的时间戳. | - | [int,int] / null | | | | selectOption | 自定义下拉项,数据结构同 OPTION。要求对象 Key 和属性 value 值保持一致,time 为秒级时间戳,CUSTOM 为保留字段,不可更改,但可以删除(没有自定义项)。<font color='red'> <b>当设置此属性,需同时设置 defaultInterval 为配置项数据中的默认选项 key 值 </b></font> | - | object | | | | onChange | 切换,选择日期后组件回调: rangeTime 组件返回选中时间段,[startTime,endTime],秒为单位的时间戳;isDiff 操作前和操作后,时间段是否不同; interval 下拉框所选项 key 值;customTime 日期选择组件所选值 [startTime,endTime],秒为单位的时间戳; | - | ({ rangeTime:[int,int], isDiff:boolean, interval:string, customTime:[int,int] })=>{} | | | | current | 初始化当前时刻(秒为单位的时间戳)<font color='red'> <b>注意:若不设置此值,每次切换常用时间,都将使用最新本机时刻作为结束时间 </b></font> | - | int | | | | onInit | 初始化回调,参数返回 setValue 方法,用来手动改变选择器值.setValue(interval:下拉选择类型,pickerValue:rangePicker 的 value 值,格式为[moment,moment]) 注意,通过setValue设置的值,不会触发组件的onChange | - | (setValue:fun)=>{} ; setValue:(interval:OPTION.value,rangeTime:[start:moment,end:moment])=>{} | | |

OPTION

组件默认配置项,自定义下拉项,数据结构同 OPTION。要求对象 Key 和属性 value 值保持一致,time 为秒级时间戳,CUSTOM 为保留字段,不可更改,但可以删除(没有自定义项)

OPTION = {
	HOUR1: { label: '最近1小时', value: 'HOUR1', time: 60 * 60 },
	DAY1: { label: '最近1天', value: 'DAY1', time: 24 * 60 * 60 },
	DAY7: { label: '最近7天', value: 'DAY7', time: 7 * 24 * 60 * 60 },
	DAY30: { label: '最近30天', value: 'DAY30', time: 30 * 24 * 60 * 60 },
	CUSTOM: { label: '自定义时间', value: 'CUSTOM', time: Infinity },
};