{"id":13605310,"url":"https://github.com/KELEN/r-date-picker","last_synced_at":"2025-04-12T05:32:28.569Z","repository":{"id":35017493,"uuid":"176706547","full_name":"KELEN/r-date-picker","owner":"KELEN","description":"Base on react high customize date picker component","archived":false,"fork":false,"pushed_at":"2023-04-30T17:09:03.000Z","size":6559,"stargazers_count":13,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T08:06:17.432Z","etag":null,"topics":["react-date-picker","react-date-range","react-dates","react-day"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KELEN.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-03-20T10:11:00.000Z","updated_at":"2024-01-07T11:56:05.000Z","dependencies_parsed_at":"2024-01-14T19:14:33.660Z","dependency_job_id":"2d404adc-c2de-4ded-8002-6084481aa09d","html_url":"https://github.com/KELEN/r-date-picker","commit_stats":{"total_commits":37,"total_committers":3,"mean_commits":"12.333333333333334","dds":0.05405405405405406,"last_synced_commit":"106037748d9abae1f378f4f10538f8c0b4443c71"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KELEN%2Fr-date-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KELEN%2Fr-date-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KELEN%2Fr-date-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KELEN%2Fr-date-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KELEN","download_url":"https://codeload.github.com/KELEN/r-date-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223497742,"owners_count":17155199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-date-picker","react-date-range","react-dates","react-day"],"created_at":"2024-08-01T19:00:57.286Z","updated_at":"2024-11-07T10:30:24.194Z","avatar_url":"https://github.com/KELEN.png","language":"JavaScript","readme":"## r-date-picker\n\n基于react的日历选择组件，支持单选，多选\n\n## [demo](https://kelen.github.io/r-date-picker/)\n\n![AirbnbStyle](https://raw.githubusercontent.com/KELEN/r-date-picker/master/example/images/airbnb-style.png \"AirbnbStyle\")\n\n## Introduce\n\n - 支持单选和范围选择\n - 可以定制渲染项\n - 日历切换动画\n - 支持一个或者两个日历选择操作\n - 支持国际化\n - 不是table渲染，灵活配置样式，通过class覆盖即可\n\n## How to use\n\n### install\n\n```\nnpm i r-date-picker\n```\n\n### use module\n\n```\nimport { DatePicker } from 'r-date-picker'\nimport { DateRangePicker } from 'r-date-picker'\n```\n\n### import index.less\n\n```\nimport 'r-date-picker/src/styles/index.less'\n```\n\n\n### DatePicker\n\n```javascript\n\u003cDatePicker defaultDate={ moment('2019-04-01') }  /\u003e\n```\n\n#### 可选项\n\n| 属性 | 值类型 | 例子 | 说明 |\n| ------------ | ------------ | ------------ | -- |\n| selectable | boolean | selectable={false} | 是否可选择，默认true |\n| minDate | moment object  |  moment('2019-04-01')  | 可以切换的最小日历 |\n| maxDate | moment object  |  moment('2019-04-01')  | 可以切换的最大日历 |\n| defaultDate  | moment对象或者moment数组 | moment('2019-04-01') | 默认选中值，对象是选中单个值，数组是选择范围 |\n| ranges | array | [[]] | 二维数组，[[moment('2019-03-21'), moment('2019-03-25')], [moment('2019-03-10'), moment('2019-03-10')], [moment('2019-03-1'), moment('2019-03-4')]] |\n| language | string | cn | cn/en | \n| disabledDates | array | ['2019-04-11', '2019-04-22'] | 禁止选择的日期数组 |\n| onMonthChange | function | | 月改变事件 |\n| onDateClick | function | 日期点击事件 | \n| onDateChange | function | | 日期选择回调 |\n| onDateRangeChange | function |  | 范围选择回调 |\n| itemRender | function |  | 自定义渲染项 |\n| renderPrevBtn | function | | 渲染上一页按钮 |\n| renderNextBtn | function | | 渲染下一页按钮 |\n\n#### itemRender属性\n\n自定义渲染项，可以绘制头像，绘制任意除了数字以外的其他信息，值是一个函数\n\n```javascript\n\u003cDatePicker itemRender={ \n  (item) =\u003e { \n    const markDays = {\n      20190329: {\n        avator: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4208386305,57701306\u0026fm=27\u0026gp=0.jpg'\n      },\n      20190327: {\n        avator: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2060761043,284284863\u0026fm=27\u0026gp=0.jpg'\n      }\n    }\n    let mark, target\n    if (item.date \u0026\u0026 (target = markDays[item.date.format('YYYYMMDD')])) {\n      mark = (\u003cdiv style={{ \n        backgroundImage: `url(${ target.avator })`, \n        borderRadius: '50%',\n        backgroundSize: 'contain',\n        width: 40,\n        height: 40\n      }}\u003e\u003c/div\u003e)\n    } else {\n      mark = (\u003cdiv data-label={ item.key }\u003e{ item.num }\u003c/div\u003e)\n    }\n    return mark\n  } \n}/\u003e\n```\n\n### DateRangePicker \n\n```javascript\n\u003cDatePicker \n  onDateRangeChange={ this.rangeChange } \n  range={ true }\n  defaultDate={ this.state.defaultDate } \n/\u003e\n```\n\n### 可选项\n\n| 属性 | 值类型 | 例子 | 说明 |\n| ------------ | ------------ | ------------ | -- |\n| single | boolean | single={ true } | 单个日历选范围 |\n| selectable | boolean | selectable={false} | 是否可选择，默认true |\n| minDate | moment object  |  moment('2019-04-01')  | 可以切换的最小日历 |\n| maxDate | moment object  |  moment('2019-04-01')  | 可以切换的最大日历 |\n| defaultDate  | moment对象或者moment数组 | moment('2019-04-01') | 默认选中值，对象是选中单个值，数组是选择范围 |\n| ranges | array | [[]] | 二维数组，[[moment('2019-03-21'), moment('2019-03-25')], [moment('2019-03-10'), moment('2019-03-10')], [moment('2019-03-1'), moment('2019-03-4')]] |\n| language | string | cn | cn/en | \n| disabledDates | array | ['2019-04-11', '2019-04-22'] | 禁止选择的日期数组 |\n| onMonthChange | function | | 月改变事件 |\n| onDateClick | function | 日期点击事件 | \n| onDateChange | function | | 日期选择回调 |\n| onDateRangeChange | function |  | 范围选择回调 |\n| itemRender | function |  | 自定义渲染项 |\n| renderPrevBtn | function | | 渲染上一页按钮 |\n| renderNextBtn | function | | 渲染下一页按钮 |\n\n\n\n## Custom styles class\n\n| 类名 |  说明  |\n| ------------ | ------------ |\n| rdp__container | 容器 |\n| range__container | 范围选择容器 |\n| rdp__prev-btn | 左按钮 |\n| rdp__next-btn | 右按钮 |\n| rdp__days-row | 日历行 | \n| rdp__days-item | 日历day项 |\n| rdp__days-item-active--single | 选中 |\n| rdp__days-item-active | 选中激活 |\n| rdp__days-item-active--start | 选中开始 |\n| rdp__days-item-active--start | 选中连接 |\n| rdp__days-item-active--end | 选中结束 |\n| rdp__days-item-active--range-start | 范围开始 |\n| rdp__days-item-active--range-connect | 范围连接 |\n| rdp__days-item-active--range-end | 范围结束 |\n\n\n## Development\n```bash\nnpm i\nnpm run start\n```\n\n## Avaiable\n\n- [x] 单日历选择日期\n- [x] 单日历选择范围\n- [x] 两个日历选择范围\n- [x] 个性化修改样式\n- [x] 范围限制\n- [x] 国际化支持，只支持英文和中文\n- [ ] 新增自定义国际化语言\n- [ ] 选择年份","funding_links":[],"categories":["UI Components"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKELEN%2Fr-date-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKELEN%2Fr-date-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKELEN%2Fr-date-picker/lists"}