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

@reacted/date-picker

v1.0.2

Published

日期选择组件

Downloads

78

Readme

非常轻量精简的日期组件

包含选择日期 Day as default,选择周 Week,选择月 Month 三个组件。

为什么使用受控组件

日历的切换是通过 value + onChange 配合完成的,也就意味着调用组件需要持有日历组件日期的状态。为什么这么做呢。是因为受控组件的扩展性和灵活性是最高的,他没有内置的状态,调用组件可以完成按照自身的意图来进行控制。

如果没有控制组件渲染状态的需求,受控也只增加使用者很小的成本,把一个数据放在 state 中,并把更新 state 的方法传给受控组件。如果有特殊需要,还可以方便的按照自己的需求封装成纯业务组件。

dayjs

本组件基于dayjs来实现的,所有回调方法接受的参数也是 dayjs 对象。dayjs 是一个兼容 moment 的日期库,用来做日期的操作非常方便。对于一些初始值参数可以不使用 dayjs()。组件内部会进行一次转换

能用参数说明

参数有变化的会在后面单独注明

周日历(Week)

周日历组件略有不同,在功能上,他需要一个额外的index代表当前的第几周,所以对于周日历的逻辑处理略有不同,

  • 周日历多一个renderCells的回调,用于完全自定义周日历项的渲染,此方法返回一个JSX.Element的数组,作为周日历的内容,数组项不用加key,组件会自动处理。renderCells接受一个参数是日历的当前日期,也是一个dayjs对象
  • renderCell方法的参数里多一个index字段,用于显示当前第几周,从0开始
  • onSelect 方法除了第一个date参数外,还包含第二个index参数,用来判断当前点击的是第几周。正常点击日历范围内的给出正常的index,但是周日历下点击本月,测第二个参数是-1, 用来适配不同的周规则