@ atefbena/ react- date- rang

伟大的叉子 react-date-range 软件包

用于选择日期和日期范围的日期库不可知反应组件 。 用途 日期 - fns 日期操作.

为什么要用 @atefbena/react-date-range? 吗?

• 无国籍日期业务
• 高度可配置
• 多范围选择
• 根据当地js日期
• 拖放选择
• 键盘友好

现场直播: http://hypeserver.github.io/反应-日期-距离

开始

安装

yarn add @atefbena/react-date-range

此插件预期 react 财务报告和审定财务报表 date-fns 作为对等的依赖, 这意味着您需要在您的工程文件夹中安装它们 .

yarn add react date-fns

使用量

您需要先导入骨架和主题样式 .

import '@atefbena/react-date-range/dist/styles.css'; // main style file
import '@atefbena/react-date-range/dist/theme/default.css'; // theme css file

DatePicker

import { Calendar } from '@atefbena/react-date-range';

function MyComponent() {
  function handleSelect(date) {
    console.log(date); // native Date object
  }
  
  return (
    <Calendar
      date={new Date()}
      onChange={handleSelect}
    />
  );
}

DateRangePicker / DateRange

import { DateRangePicker } from '@atefbena/react-date-range';

function MyComponent() {
  function handleSelect(ranges) {
    console.log(ranges);
    // {
    //   selection: {
    //     startDate: [native Date Object],
    //     endDate: [native Date Object],
    //     label: [string] // selected range label 
    //   }
    // }
  }
  
  
  const selectionRange = {
    startDate: new Date(),
    endDate: new Date(),
    key: 'selection',
  }
  
  return (
    <DateRangePicker
      ranges={[selectionRange]}
      onChange={handleSelect}
    />
  )
}

选项

* 范围形状:

 {
   startDate: PropTypes.object,
   endDate: PropTypes.object,
   color: PropTypes.string,
   key: PropTypes.string,
   autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
   showDateDisplay: PropTypes.bool,
 }

** 等离子层:

 {
   // The key of dateInput should be same as key in range.
   dateInput: PropTypes.objectOf(
     PropTypes.shape({
       startDate: PropTypes.string,
       endDate: PropTypes.string
     })
   ),
   monthPicker: PropTypes.string,
   yearPicker: PropTypes.string,
   prevButton: PropTypes.string,
   nextButton: PropTypes.string,
 }

无限滚动模式

启用无限滚动集 scroll={{enabled: true}} 基本来说 无限滚动特性受到以下因素的影响: direction(几个月后服从指示)和 months(数出数月) 道具直接. 如果您喜欢, 您可以覆盖日历大小 calendarWidth编号 :calendarHeight 或每个月的高度/宽度 monthWidth编号 :monthHeight编号 :longMonthHeight 时间 scroll 道具 (英语).

  // shape of scroll prop
  scroll: {
    enabled: PropTypes.bool,
    monthHeight: PropTypes.number,
    longMonthHeight: PropTypes.number, // some months has 1 more row than others
    monthWidth: PropTypes.number, // just used when direction="horizontal"
    calendarWidth: PropTypes.number, // defaults monthWidth * months
    calendarHeight: PropTypes.number, // defaults monthHeight * months
  }),

发布工作流程

• 将所有需要放入的软件合并到主机
• 打开一个新的发布 PR 而不是 :
  • 将版本压缩到合适的 < new version >
  • 更新 ChangeGelog.md
• 确保演示和重要功能能如期发挥
• 合并后,标记主输入 release/<new_version> 让Github Action 处理出版
• = 利润 =

切换方式

• 方便移动( 集成自来水和刷取动作)
• 添加测试
• 改进文件编制
• 移动到打字符