{"id":22199147,"url":"https://github.com/limintao/react-native-date-picker","last_synced_at":"2026-01-21T07:53:33.475Z","repository":{"id":250947597,"uuid":"835091728","full_name":"limintao/react-native-date-picker","owner":"limintao","description":"适用于 Android、iOS 和 Web 的可定制 React Native Date Picker 组件。它包括单选、范围选择、wheel选择和多种模式，并支持不同的语言设置。","archived":false,"fork":false,"pushed_at":"2024-11-14T06:21:11.000Z","size":1349,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-14T07:19:51.794Z","etag":null,"topics":["calendar","date","datepicker","datetime","picker","react-native","wheel"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/limintao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-29T06:29:43.000Z","updated_at":"2024-11-14T06:18:08.000Z","dependencies_parsed_at":"2024-11-14T07:29:24.664Z","dependency_job_id":null,"html_url":"https://github.com/limintao/react-native-date-picker","commit_stats":null,"previous_names":["limintao/react-native-date-picker"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limintao%2Freact-native-date-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limintao%2Freact-native-date-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limintao%2Freact-native-date-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/limintao%2Freact-native-date-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/limintao","download_url":"https://codeload.github.com/limintao/react-native-date-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227750225,"owners_count":17814129,"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":["calendar","date","datepicker","datetime","picker","react-native","wheel"],"created_at":"2024-12-02T15:13:31.127Z","updated_at":"2025-10-27T04:02:22.354Z","avatar_url":"https://github.com/limintao.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![react-native-date-picker](/screenshot/all-screenshot.png)\n\n---\n\n# react-native-date-picker\n\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/limintao/react-native-dates-picker/blob/main/LICENSE)\n[![npm version](https://img.shields.io/npm/v/react-native-dates-picker.svg?style=flat)](https://www.npmjs.com/package/react-native-dates-picker)\n[![npm](https://img.shields.io/npm/dt/react-native-dates-picker.svg)](https://www.npmjs.com/package/react-native-dates-picker)\n\nReact Native 的 DateTimePicker 组件，允许你创建一个可自定义的日期和时间选择器。该组件使用 [Day.js](https://day.js.org/) 库，并包含一组样式属性，使你可以根据自己的 UI 设计更改日历的每一项。\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"/screenshot/react-native-date-picker-example.gif\" height=\"500\" /\u003e\n\u003c/p\u003e\n\n## 安装\n\n```sh\n# 如果你没有在项目中使用dayjs则需要安装\n# npm install dayjs react-native-dates-picker\nnpm install react-native-dates-picker\n```\n\n如果你使用Yarn\n\n```sh\n# 如果你没有在项目中使用dayjs则需要安装\n# yarn add dayjs react-native-dates-picker\nyarn add react-native-dates-picker\n```\n\n或者你使用pnpm\n\n```sh\n# 如果你没有在项目中使用dayjs则需要安装\n# pnpm install dayjs react-native-dates-picker\npnpm install react-native-dates-picker\n```\n\n## 用法说明\n\n```js\nimport DateTimePicker from 'react-native-dates-picker';\nimport dayjs from 'dayjs';\n\nexport default function App() {\n  const [date, setDate] = useState(dayjs());\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cDateTimePicker\n        mode=\"single\"\n        date={date}\n        onChange={(params) =\u003e setDate(params.date)}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F5FCFF',\n  },\n});\n```\n\n欲了解更多信息，请查看 `/example` 目录。\n\n![react-native-date-picker-styles](/screenshot/customizable-screenshot.jpg)\n\n## Calendar props\n\n| Name            | Type       | Default                 | Description                                                       |\n| --------------- | ---------- | ----------------------- | ----------------------------------------------------------------- |\n| mode            | `string`   | `'single'`              | 定义 DatePicker 的模式 `['single', 'range', 'multiple', 'wheel']` |\n| locale          | `string`   | `'zh-cn'`               | 定义 DatePicker 的语言环境，使用其他语言需要从dayjs引入语言包     |\n| minDate         | `DateType` | `null`                  | 定义 DatePicker 的最小可选日期                                    |\n| maxDate         | `DateType` | `null`                  | 定义 DatePicker 的最大可选日期                                    |\n| firstDayOfWeek  | `number`   | `0`                     | 定义一周的起始日，范围为 0-6，其中 0 表示星期天，6 表示星期六     |\n| displayFullDays | `boolean`  | `false`                 | 定义是否在当前日历视图中显示上个月和下个月的日期                  |\n| initialView     | `string`   | `'day'`                 | 定义 DatePicker 的初始视图 `['day', 'month', 'year', 'time']`     |\n| height          | `number`   | `'undefined'`           | 定义日历视图的高度                                                |\n| format          | `string`   | `'YYYY/MM/DD HH:mm:ss'` | 设置日期格式                                                      |\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"/screenshot/modes-screenshot.png\" /\u003e\n\u003c/p\u003e\n\n## Single Mode props\n\n| Name       | Type       | Default          | Description                       |\n| ---------- | ---------- | ---------------- | --------------------------------- |\n| date       | `DateType` | `undefined`      | 选中的日期                          |\n| onChange   | `Function` | `({date}) =\u003e {}` | 当从 DatePicker 选择新日期时调用     |\n| timePicker | `boolean`  | `false`          | 定义是否显示时间选择器                |\n\n## Range Mode props\n\n| Name      | Type       | Default                        | Description                                |\n| --------- | ---------- | ------------------------------ | ------------------------------------------ |\n| startDate | `DateType` | `undefined`                    | 用于显示选定的开始日期                         |\n| endDate   | `DateType` | `undefined`                    | 用于显示选定的结束日期                         |\n| onChange  | `Function` | `({startDate, endDate}) =\u003e {}` | 当从 DatePicker 选择新开始日期或结束日期时调用   |\n\n## Multiple Mode props\n\n| Name     | Type         | Default           | Description                      |\n| -------- | ------------ | ----------------- | -------------------------------- |\n| dates    | `DateType[]` | `[]`              | 用于显示已选日期的日期数组           |\n| onChange | `Function`   | `({dates}) =\u003e {}` | 当从 DatePicker 选择新日期时调用    |\n\n## Wheel Mode props\n\n| Name     | Type       | Default                    | Description                                                              |\n| -------- | ---------- | -------------------------- | ------------------------------------------------------------------------ |\n| date     | `DateType` | `undefined`                | 选中的日期              |\n| columns  | `string[]` | `['year', 'month', 'day']` | 定义滚轮视图展示的列 `['year', 'month', 'day', 'hour', 'minute', 'second']`  |\n| onChange | `Function` | `({date}) =\u003e {}`           | 当从 DatePicker 选择新日期时调用                                             |\n\n## Styling props\n\n| Name                                 | Type                           | Default       | Description                                                       |\n| ------------------------------------ | ------------------------------ | ------------- | ----------------------------------------------------------------- |\n| calendarTextStyle                    | `TextStyle`                    | `null`        | 定义日历内部所有文本的样式（包括日、月、年、时、分和秒）             |\n| selectedTextStyle                    | `TextStyle`                    | `null`        | 定义选中（日、月、年）文本的样式                                     |\n| selectedItemColor                    | `string`                       | `'#0047FF'` | 定义选中（日、月、年）项的背景和边框颜色                             |\n| selectedRangeBackgroundColor         | `string`                       | `undefined`   | 定义选中范围的背景颜色                                               |\n| headerContainerStyle                 | `ViewStyle`                    | `null`        | 定义日历头部容器的样式                                               |\n| headerTextContainerStyle             | `ViewStyle`                    | `null`        | 定义日历头部文本（月、年、时间）容器的样式                           |\n| headerTextStyle                      | `TextStyle`                    | `null`        | 定义日历头部文本的样式（月、年、时间）                               |\n| headerButtonStyle                    | `ViewStyle`                    | `null`        | 定义日历头部“上一个和下一个按钮”容器的样式                           |\n| headerButtonColor                    | `string`                       | `null`        | 定义日历头部“上一个和下一个按钮”图标的颜色                           |\n| headerButtonSize                     | `number`                       | `18`          | 定义日历头部“上一个和下一个按钮”图标的大小                           |\n| headerButtonsPosition                | `string`                       | `'around'`    | 定义日历头部“上一个和下一个按钮”的位置 `['around', 'right', 'left']` |\n| buttonPrevIcon                       | `ReactNode`                    | `undefined`   | 定义日历头部“上一个按钮”的自定义图标                                 |\n| buttonNextIcon                       | `ReactNode`                    | `undefined`   | 定义日历头部“下一个按钮”的自定义图标                                 |\n| daysPanelStyle                       | `ViewStyle`                    | `null`        | 定义日期选择面板的样式                                               |\n| dayContainerStyle                    | `ViewStyle`                    | `null`        | 定义每个日期的容器样式                                               |\n| todayContainerStyle                  | `ViewStyle`                    | `null`        | 定义“今天”容器的样式                                                 |\n| todayTextStyle                       | `TextStyle`                    | `null`        | 定义“今天”文本的样式                                                 |\n| monthContainerStyle                  | `ViewStyle`                    | `null`        | 定义月份容器的样式                                                   |\n| yearContainerStyle                   | `ViewStyle`                    | `null`        | 定义年份容器的样式                                                   |\n| weekDaysContainerStyle               | `ViewStyle`                    | `null`        | 定义星期容器的样式                                                   |\n| weekDaysTextStyle                    | `TextStyle`                    | `null`        | 定义星期文本的样式                                                   |\n| wheelPickerContainerStyle            | `ViewStyle`                    | `null`        | 定义滚轮选择容器的样式                                               |\n| wheelPickerTextStyle                 | `TextStyle`                    | `null`        | 定义滚轮选择器文本（年、月、日、时、分、秒）的样式                   |\n| wheelPickerItemStyle                 | `TextStyle`                    | `null`        | 定义滚轮选择器选项容器的样式                                         |\n| wheelPickerSelectedIndicatorStyle    | `ViewStyle`                    | `null`        | 定义选中滚轮指示器的样式                                             |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## Consider supporting with a ⭐️ [Star on GitHub](https://github.com/limintao/react-native-date-picker)\n\n如果你在项目中使用了该库，请考虑为其点赞支持。\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimintao%2Freact-native-date-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flimintao%2Freact-native-date-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimintao%2Freact-native-date-picker/lists"}