{"_id":"@bingtang-rn/react-native-calendar-picker","_rev":"2-1ff38540edec88bb702c761db8e6ed2e","name":"@bingtang-rn/react-native-calendar-picker","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@bingtang-rn/react-native-calendar-picker","version":"1.0.0","keywords":["react-native","harmony","harmonyos","react-native-calendar-picker"],"license":"MIT","_id":"@bingtang-rn/react-native-calendar-picker@1.0.0","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"homepage":"https://gitcode.com/rn_ohos_plugin/CalendarPicker","dist":{"shasum":"96a9e9b5172055a50ae04121b35ea2a334945579","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-calendar-picker/-/react-native-calendar-picker-1.0.0.tgz","fileCount":24,"integrity":"sha512-SaxWFJ75cVF9/kSRENiEhB6uqt1YrAHnpcSunVgB2UBmuCAasFtwSSiuf+do4WxQUMHZuLRgKBzy8zIHLyPsPQ==","signatures":[{"sig":"MEUCIQC4ionW6+XjpcIMmRYyNKmIDc6EO3yvYnolZW1q99riUgIgN+pjzL8VRh18JdNJgQqz0rgac2CbGlRpS61gdcoUQJY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":90967},"main":"./src/index.js","module":"./src/index.js","engines":{"node":">=18"},"gitHead":"3f4d5fe4e1307681c2662d151723d381dfd508f0","harmony":{"alias":"react-native-calendar-picker"},"private":false,"scripts":{"prepare":"echo skip"},"_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"repository":{"url":"https://gitcode.com/rn_ohos_plugin/CalendarPicker","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供CalendarPicker组件。","directories":{},"_nodeVersion":"24.15.0","dependencies":{"prop-types":"^15.6.0","recyclerlistview":"^4.2.0"},"react-native":"./src/index.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5","@react-native/typescript-config":"0.79.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react":"*","date-fns":">=3.0.0","react-native":">=0.72"},"_npmOperationalInternal":{"tmp":"tmp/react-native-calendar-picker_1.0.0_1785999735673_0.5874226418784725","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"_id":"@bingtang-rn/react-native-calendar-picker@1.0.1","dist":{"shasum":"c01ffd0ccc215f6f80d473d2de5b1c84842e29c2","tarball":"https://registry.npmjs.org/@bingtang-rn/react-native-calendar-picker/-/react-native-calendar-picker-1.0.1.tgz","fileCount":24,"integrity":"sha512-CbYbWXyjH+g0RUaThP2xpxI7a++qkLjjYAE0eXj6XvYa3BAPMhJFWHxMLL7PR0wOhv9xanRPfJrwGW9u2aQRcA==","signatures":[{"sig":"MEUCIQCXbEFDzyOgNO7X+tV9vfv5LdGzZMjHHQe6v5m6pzK95gIgepj+HdC5iS9D0jqU11ZTuQ8drwn3FhgvhO5bdRw7BhA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDjPdOcaxRXz4Q9GF0NmWPW/yxFhbOZjGo2Y4XwCCwcQQIhAI5f8kfGGU3wuRd8qRuvaH1VUQm2KhXz1UAYEmxxbbyR"}],"unpackedSize":91219},"main":"./src/index.js","name":"@bingtang-rn/react-native-calendar-picker","_from":"file:bingtang-rn-react-native-calendar-picker-1.0.1.tgz","module":"./src/index.js","engines":{"node":">=18"},"harmony":{"alias":"react-native-calendar-picker"},"license":"MIT","private":false,"scripts":{"prepare":"echo skip"},"version":"1.0.1","_npmUser":{"name":"luyizouyuan","email":"189605613@qq.com"},"homepage":"https://gitcode.com/rn_ohos_plugin/CalendarPicker","keywords":["react-native","harmony","harmonyos","react-native-calendar-picker"],"_resolved":"D:\\code\\rn\\npm\\batch\\CalendarPicker\\bingtang-rn-react-native-calendar-picker-1.0.1.tgz","_integrity":"sha512-CbYbWXyjH+g0RUaThP2xpxI7a++qkLjjYAE0eXj6XvYa3BAPMhJFWHxMLL7PR0wOhv9xanRPfJrwGW9u2aQRcA==","repository":{"url":"https://gitcode.com/rn_ohos_plugin/CalendarPicker","type":"git"},"_npmVersion":"11.12.1","description":"适配鸿蒙版本，提供CalendarPicker组件。","directories":{},"maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"_nodeVersion":"24.15.0","dependencies":{"prop-types":"^15.6.0","recyclerlistview":"^4.2.0"},"react-native":"./src/index.js","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.6.3","metro":"^0.81.0","react":"18.2.0","typescript":"5.0.4","@types/react":"18.2.79","react-native":"0.72.5","@react-native/typescript-config":"0.79.5","@react-native-oh/react-native-harmony-cli":"^0.77.50"},"peerDependencies":{"react":"*","date-fns":">=3.0.0","react-native":">=0.72"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-calendar-picker_1.0.1_1790568386625_0.19670733116253625"}}},"time":{"created":"2026-08-06T07:02:15.549Z","modified":"2026-09-28T04:06:26.947Z","1.0.0":"2026-08-06T07:02:15.838Z","1.0.1":"2026-09-28T04:06:26.720Z"},"license":"MIT","homepage":"https://gitcode.com/rn_ohos_plugin/CalendarPicker","keywords":["react-native","harmony","harmonyos","react-native-calendar-picker"],"repository":{"url":"https://gitcode.com/rn_ohos_plugin/CalendarPicker","type":"git"},"description":"适配鸿蒙版本，提供CalendarPicker组件。","maintainers":[{"name":"luyizouyuan","email":"189605613@qq.com"}],"readme":"# @bingtang-rn/react-native-calendar-picker for HarmonyOS\r\n\r\n本项目基于 [react-native-calendar-picker](https://github.com/stephy/CalendarPicker) 开发，为 React Native 鸿蒙（OpenHarmony）适配版本。如果在使用过程中有任何问题，可以在GitCode提Issue，会及时跟进。issue地址：[issues](https://gitcode.com/rn_ohos_plugin/CalendarPicker/issues)。\r\n\r\n## 版本对应关系\r\n\r\n| 鸿蒙适配包版本 | 原始库版本 | 支持 RN 版本 | Autolink | 编译 API 版本 |\r\n| ------------ | ---------- | ------------ | -------- | ------------- |\r\n| 8.0.6 | 8.0.6 | 0.72+ | 是（harmony.alias） | API17+ |\r\n\r\n## 安装\r\n\r\n```bash\r\nnpm install @bingtang-rn/react-native-calendar-picker\r\n```\r\n\r\n## 使用\r\n\r\n这是一个纯 JS 库（js_only），无需原生注册。通过 `harmony.alias` 机制，示例代码中 `import CalendarPicker from 'react-native-calendar-picker'` 会自动重定向到 `@bingtang-rn/react-native-calendar-picker`。\r\n\r\n```tsx\r\nimport React, { useState } from 'react';\r\nimport { View, Text, StyleSheet } from 'react-native';\r\nimport CalendarPicker from 'react-native-calendar-picker';\r\n\r\nexport default function App() {\r\n  const [selectedDate, setSelectedDate] = useState<Date | null>(null);\r\n  return (\r\n    <View style={styles.container}>\r\n      <CalendarPicker\r\n        onDateChange={(date, type) => {\r\n          if (type === 'START_DATE') {\r\n            setSelectedDate(date);\r\n          }\r\n        }}\r\n      />\r\n      <Text>{selectedDate ? selectedDate.toString() : '未选择'}</Text>\r\n    </View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    backgroundColor: '#fff',\r\n  },\r\n});\r\n```\r\n\r\n> 注意：需安装 peer 依赖 `date-fns >=3.0.0`。\r\n\r\n## Link\r\n\r\n| 版本 | 是否支持 Autolink |\r\n|------|------------------|\r\n| 8.0.6 | 是（harmony.alias 自动重定向，无需手动注册） |\r\n\r\n本模块为纯 JS 库，无需 C++ 或 ETS 侧 Package 注册。`harmony.alias` 配置在 `ohos/package.json` 中将原始包名 `react-native-calendar-picker` 重定向到 `@bingtang-rn/react-native-calendar-picker`，Metro 打包时自动处理。\r\n\r\n## 属性 / API\r\n\r\n| API | 描述 | 参数 | 返回值 | HarmonyOS 支持 |\r\n|-----|------|------|--------|----------------|\r\n| onDateChange | 日期选择回调 | (date: Date, type: 'START_DATE'\\|'END_DATE') | void | ✅ |\r\n| onMonthChange | 月份切换回调 | (date: Date) | void | ✅ |\r\n| allowRangeSelection | 范围选择 | boolean | - | ✅ |\r\n| allowBackwardRangeSelect | 反向范围选择 | boolean | - | ✅ |\r\n| minRangeDuration | 最小范围天数 | number \\| Array | - | ✅ |\r\n| maxRangeDuration | 最大范围天数 | number \\| Array | - | ✅ |\r\n| minDate | 最小可选日期 | Date | - | ✅ |\r\n| maxDate | 最大可选日期 | Date | - | ✅ |\r\n| restrictMonthNavigation | 限制月份导航 | boolean | - | ✅ |\r\n| scrollable | 滚动模式 | boolean | - | ✅ |\r\n| horizontal | 滚动方向 | boolean | - | ✅ |\r\n| scrollDecelarationRate | 减速速率 | 'normal'\\|'fast'\\|number | - | ✅ |\r\n| enableDateChange | 允许选日期 | boolean | - | ✅ |\r\n| startFromMonday | 周一开始 | boolean | - | ✅ |\r\n| showDayStragglers | 跨月日填充 | boolean | - | ✅ |\r\n| firstDay | 起始日 | 0-6 | - | ✅ |\r\n| weekdays | 自定义星期标签 | Array(7) | - | ✅ |\r\n| months | 自定义月份名 | Array(12) | - | ✅ |\r\n| initialDate | 初始日期 | Date | - | ✅ |\r\n| initialView | 初始视图 | 'days'\\|'months'\\|'years' | - | ✅ |\r\n| customDatesStyles | 自定义日期样式 | Array \\| Func | - | ✅ |\r\n| customDayHeaderStyles | 自定义表头样式 | Func | - | ✅ |\r\n| disabledDates | 禁用日期 | Array \\| Func | - | ✅ |\r\n| disabledDatesTextStyle | 禁用日期文本样式 | TextStyle | - | ✅ |\r\n| selectedStartDate | 选中开始日期 | Date | - | ✅ |\r\n| selectedEndDate | 选中结束日期 | Date | - | ✅ |\r\n| selectedDayColor | 选中日背景色 | string | - | ✅ |\r\n| selectedDayTextColor | 选中日文本色 | string | - | ✅ |\r\n| selectedDayStyle | 选中日样式 | ViewStyle | - | ✅ |\r\n| selectedDayTextStyle | 选中日文本样式 | TextStyle | - | ✅ |\r\n| selectedRangeStartStyle | 范围起始样式 | ViewStyle | - | ✅ |\r\n| selectedRangeEndStyle | 范围结束样式 | ViewStyle | - | ✅ |\r\n| selectedRangeStyle | 范围内样式 | ViewStyle | - | ✅ |\r\n| selectedRangeStartTextStyle | 范围起始文本样式 | TextStyle | - | ✅ |\r\n| selectedRangeEndTextStyle | 范围结束文本样式 | TextStyle | - | ✅ |\r\n| selectedDisabledDatesTextStyle | 选中禁用日文本样式 | TextStyle | - | ✅ |\r\n| todayBackgroundColor | 今日背景色 | string | - | ✅ |\r\n| todayTextStyle | 今日文本样式 | TextStyle | - | ✅ |\r\n| textStyle | 全局文本样式 | TextStyle | - | ✅ |\r\n| dayShape | 日期形状 | 'circle'\\|'square' | - | ✅ |\r\n| scaleFactor | 缩放因子 | number | - | ✅ |\r\n| width | 容器宽度 | number | - | ✅ |\r\n| height | 容器高度 | number | - | ✅ |\r\n| headingLevel | 无障碍标题级别 | number | - | ✅（web 专属，鸿蒙无影响） |\r\n| selectMonthTitle | 月份选择标题 | string | - | ✅ |\r\n| selectYearTitle | 年份选择标题 | string | - | ✅ |\r\n| dayLabelsWrapper | 星期标签容器样式 | ViewStyle | - | ✅ |\r\n| monthYearHeaderWrapperStyle | 月年头部容器样式 | ViewStyle | - | ✅ |\r\n| headerWrapperStyle | 整个头部容器样式 | ViewStyle | - | ✅ |\r\n| monthTitleStyle | 月份标题样式 | TextStyle | - | ✅ |\r\n| yearTitleStyle | 年份标题样式 | TextStyle | - | ✅ |\r\n| previousTitle | 上月按钮文字 | string | - | ✅ |\r\n| nextTitle | 下月按钮文字 | string | - | ✅ |\r\n| previousTitleStyle | 上月按钮样式 | TextStyle | - | ✅ |\r\n| nextTitleStyle | 下月按钮样式 | TextStyle | - | ✅ |\r\n| previousComponent | 上月自定义组件 | ReactNode | - | ✅ |\r\n| nextComponent | 下月自定义组件 | ReactNode | - | ✅ |\r\n| fontScaling | 字体缩放 | boolean | - | ✅ |\r\n| goToDate (ref) | 编程式跳转日期 | (date, options?) | void | ✅ |\r\n| resetSelections (ref) | 清除选择 | () | void | ✅ |\r\n\r\n## 快速验证（运行 Example）\r\n\r\n### 前置条件\r\n\r\n| 依赖 | 版本要求 |\r\n|------|----------|\r\n| Node.js | >= 18 |\r\n| DevEco Studio | 5.0+ / 6.0+ |\r\n| HarmonyOS SDK | API 17+ |\r\n\r\n### 运行步骤\r\n\r\n**1. 克隆仓库**\r\n\r\n```bash\r\ngit clone <仓库地址>\r\ncd <仓库目录>\r\n```\r\n\r\n**2. 安装依赖并构建**\r\n\r\n```bash\r\nnpm install --legacy-peer-deps\r\nnpm pack           # 生成 tgz 包\r\n```\r\n\r\n**3. 进入 example 目录，安装依赖**\r\n\r\n```bash\r\ncd example\r\nnpm install --legacy-peer-deps\r\n```\r\n\r\n**4. 生成 JS Bundle**\r\n\r\n```bash\r\nnpm run dev\r\n```\r\n\r\n产物：`harmony/entry/src/main/resources/rawfile/bundle.harmony.js`\r\n\r\n**5. 用 DevEco Studio 打开鸿蒙工程**\r\n\r\n- 打开 DevEco Studio\r\n- 选择 `example/harmony` 目录\r\n- 等待 Sync 完成\r\n\r\n**6. 编译并运行 HAP**\r\n\r\n在 DevEco Studio 中点击运行按钮，将 HAP 安装到设备/模拟器。\r\n\r\n## 约束与限制\r\n\r\n### 兼容性\r\n\r\n- RNOH: 0.72+\r\n- HarmonyOS SDK: API 17+\r\n- DevEco Studio: 5.0+\r\n\r\n### 已知差异\r\n\r\n1. **ScrollView 减速行为**：鸿蒙平台 ScrollView 采用最小二乘法拟合瞬时速度，与 Android 有差异，`scrollable` 模式滚动手感可能略有不同。\r\n2. **`Platform.OS === 'android'` 分支**：`Scroller.js` 中有一个 Android 专属的 bug 规避逻辑（首次选日期跳回上月），鸿蒙端不触发。如鸿蒙端出现类似问题，需在 Example 运行时验证。\r\n3. **`Text.defaultProps` 全局修改**：库在构造函数中设置 `Text.defaultProps.allowFontScaling`，属已弃用模式，可能产生告警但不影响功能。\r\n4. **属性命名**：`scrollDecelarationRate`（原库拼写，应为 `scrollDecelerationRate`）保持与原库一致，不做修正。\r\n5. **`goToDate` 在 scrollable 模式下不支持**：原库 `index.js` 中 `goToDate` 在 `scrollable=true` 时会 `console.error` 并直接返回（原库行为，非鸿蒙特有）。需调用 `goToDate` 时请先设置 `scrollable=false`，或使用 `handleOnPressNext`/`handleOnPressPrevious` 编程式翻月。\r\n\r\n## 开源协议\r\n\r\n本项目基于 [MIT 协议](https://github.com/stephy/CalendarPicker)，详见 [LICENSE](./LICENSE) 文件。\r\n","readmeFilename":"README.md"}