{"_id":"@arcifius/react-native-ui-datepicker","_rev":"3-096f1c2cc52a9db420f5c1558136ffcb","name":"@arcifius/react-native-ui-datepicker","description":"Customizable date picker for React Native","dist-tags":{"latest":"2.1.2"},"versions":{"2.1.0":{"name":"@arcifius/react-native-ui-datepicker","version":"2.1.0","keywords":["react-native","ios","android","react-native-ui-datetpicker","react-native-datetime","react-native-datetime-picker","react-native-datetpicker","react-native-datet-picker","react-native-timepicker","react-native-time-picker","react-native-calendar","react-native-daterange","datetime","datetime-picker","datepicker","datet-picker","timepicker","time-picker","calendar","daterange"],"author":{"url":"https://github.com/farhoudshapouran","name":"Farhoud Shapouran","email":"shapouran@gmail.com"},"license":"MIT","_id":"@arcifius/react-native-ui-datepicker@2.1.0","homepage":"https://github.com/farhoudshapouran/react-native-ui-datepicker#readme","bugs":{"url":"https://github.com/farhoudshapouran/react-native-ui-datepicker/issues"},"dist":{"shasum":"2a59aaac9c1abeb82b28c8d3b8aaa1ce70343b60","tarball":"https://registry.npmjs.org/@arcifius/react-native-ui-datepicker/-/react-native-ui-datepicker-2.1.0.tgz","fileCount":132,"integrity":"sha512-+BumOdVGyqLjcQ1OflvYHEjS5NB2rhYNEwCnsK9YaFovwIqKUILFQVRF0YwpJHT65o2bifoa76xCHk8Aiafzqg==","signatures":[{"sig":"MEUCIQDh01HMxcOox9bKkw2UjabM4dCgxhwgBd8d0iM9IFpc1gIgRyJk+DBkAdsYtBJQsITprL2EsLJDeU1Dlgs+TnEYfkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354594},"main":"lib/commonjs/index","types":"lib/typescript/src/index.d.ts","module":"lib/module/index","source":"src/index","engines":{"node":">= 16.0.0"},"gitHead":"d6f823de16926e376d0b4b2f816e1441445236d2","scripts":{"lint":"eslint .","test":"jest","example":"yarn --cwd example","prepack":"bob build","release":"release-it","bootstrap":"yarn example && yarn install","typecheck":"tsc --noEmit"},"_npmUser":{"name":"arcifius","email":"arcifius@gmail.com"},"prettier":{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"tagName":"v${version}","commitMessage":"chore: release ${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"repository":{"url":"git+https://github.com/farhoudshapouran/react-native-ui-datepicker.git","type":"git"},"_npmVersion":"10.1.0","description":"Customizable date picker for React Native","directories":{},"resolutions":{"@types/react":"17.0.43"},"_nodeVersion":"20.8.1","dependencies":{"dayjs":"^1.11.10","lodash":"^4.17.21","uninstall":"^0.0.0","react-native-wheely":"^0.6.0"},"eslintConfig":{"root":true,"rules":{"prettier/prettier":["error",{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"}]},"extends":["@react-native-community","prettier"]},"eslintIgnore":["node_modules/","lib/"],"react-native":"src/index","publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^28.1.3","react":"^18.2.0","eslint":"^8.4.1","del-cli":"^5.0.0","ts-node":"^10.9.1","prettier":"^2.0.5","commitlint":"^17.0.2","release-it":"^15.4.1","typescript":"^4.5.2","@types/jest":"^28.1.8","pod-install":"^0.1.0","@types/react":"~17.0.21","react-native":"^0.71.0","@types/lodash":"^4.14.202","@types/react-native":"0.70.0","react-test-renderer":"^18.2.0","@evilmartians/lefthook":"^1.2.2","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.0.0","react-native-builder-bob":"^0.20.0","@types/react-test-renderer":"^18.0.5","@testing-library/jest-native":"^5.4.3","@testing-library/react-native":"^12.3.2","@commitlint/config-conventional":"^17.0.2","@release-it/conventional-changelog":"^5.0.0","@react-native-community/eslint-config":"^3.0.2"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-ui-datepicker_2.1.0_1719430698259_0.4703418691123433","host":"s3://npm-registry-packages"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]}},"2.1.1":{"name":"@arcifius/react-native-ui-datepicker","version":"2.1.1","keywords":["react-native","ios","android","react-native-ui-datetpicker","react-native-datetime","react-native-datetime-picker","react-native-datetpicker","react-native-datet-picker","react-native-timepicker","react-native-time-picker","react-native-calendar","react-native-daterange","datetime","datetime-picker","datepicker","datet-picker","timepicker","time-picker","calendar","daterange"],"author":{"url":"https://github.com/farhoudshapouran","name":"Farhoud Shapouran","email":"shapouran@gmail.com"},"license":"MIT","_id":"@arcifius/react-native-ui-datepicker@2.1.1","homepage":"https://github.com/farhoudshapouran/react-native-ui-datepicker#readme","bugs":{"url":"https://github.com/farhoudshapouran/react-native-ui-datepicker/issues"},"dist":{"shasum":"36c4428bf6eeaf2fdd0493ee31044281cc544b4a","tarball":"https://registry.npmjs.org/@arcifius/react-native-ui-datepicker/-/react-native-ui-datepicker-2.1.1.tgz","fileCount":132,"integrity":"sha512-1/eJLnUlbyuL4jOe6Nga2pRNHCe3TIcrXTJUe4wQiKvjGcQcsVRtMl7sFQChAnvX4Xrngg+3L0Rxstyp6TJzqw==","signatures":[{"sig":"MEUCIQCUor03YccLJi+ZYevGVP64kKED8tSEHsbiqcMIlM++1wIgfoHU7drvlhyNRyasUW9KEv1KUFc/fph3hU5HV/rPMtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":354225},"main":"lib/commonjs/index","types":"lib/typescript/src/index.d.ts","module":"lib/module/index","source":"src/index","engines":{"node":">= 16.0.0"},"gitHead":"859e3ae485b20cc5782a0f32f7f8595ed4aa376b","scripts":{"lint":"eslint .","test":"jest","example":"yarn --cwd example","prepack":"bob build","release":"release-it","bootstrap":"yarn example && yarn install","typecheck":"tsc --noEmit"},"_npmUser":{"name":"arcifius","email":"arcifius@gmail.com"},"prettier":{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"tagName":"v${version}","commitMessage":"chore: release ${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"repository":{"url":"git+https://github.com/farhoudshapouran/react-native-ui-datepicker.git","type":"git"},"_npmVersion":"10.1.0","description":"Customizable date picker for React Native","directories":{},"resolutions":{"@types/react":"17.0.43"},"_nodeVersion":"20.8.1","dependencies":{"dayjs":"^1.11.10","lodash":"^4.17.21","uninstall":"^0.0.0","react-native-wheely":"^0.6.0"},"eslintConfig":{"root":true,"rules":{"prettier/prettier":["error",{"useTabs":false,"tabWidth":2,"quoteProps":"consistent","singleQuote":true,"trailingComma":"es5"}]},"extends":["@react-native-community","prettier"]},"eslintIgnore":["node_modules/","lib/"],"react-native":"src/index","publishConfig":{"registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^28.1.3","react":"^18.2.0","eslint":"^8.4.1","del-cli":"^5.0.0","ts-node":"^10.9.1","prettier":"^2.0.5","commitlint":"^17.0.2","release-it":"^15.4.1","typescript":"^4.5.2","@types/jest":"^28.1.8","pod-install":"^0.1.0","@types/react":"~17.0.21","react-native":"^0.71.0","@types/lodash":"^4.14.202","@types/react-native":"0.70.0","react-test-renderer":"^18.2.0","@evilmartians/lefthook":"^1.2.2","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.0.0","react-native-builder-bob":"^0.20.0","@types/react-test-renderer":"^18.0.5","@testing-library/jest-native":"^5.4.3","@testing-library/react-native":"^12.3.2","@commitlint/config-conventional":"^17.0.2","@release-it/conventional-changelog":"^5.0.0","@react-native-community/eslint-config":"^3.0.2"},"peerDependencies":{"react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-native-ui-datepicker_2.1.1_1719494758597_0.8461635111176007","host":"s3://npm-registry-packages"},"react-native-builder-bob":{"output":"lib","source":"src","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]}},"2.1.2":{"name":"@arcifius/react-native-ui-datepicker","version":"2.1.2","description":"Customizable date picker for React Native","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/src/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"test":"jest","typecheck":"tsc --noEmit","lint":"eslint .","prepack":"bob build","release":"release-it","example":"yarn --cwd example","bootstrap":"yarn example && yarn install"},"keywords":["react-native","ios","android","react-native-ui-datetpicker","react-native-datetime","react-native-datetime-picker","react-native-datetpicker","react-native-datet-picker","react-native-timepicker","react-native-time-picker","react-native-calendar","react-native-daterange","datetime","datetime-picker","datepicker","datet-picker","timepicker","time-picker","calendar","daterange"],"repository":{"type":"git","url":"git+https://github.com/farhoudshapouran/react-native-ui-datepicker.git"},"author":{"name":"Farhoud Shapouran","email":"shapouran@gmail.com","url":"https://github.com/farhoudshapouran"},"license":"MIT","bugs":{"url":"https://github.com/farhoudshapouran/react-native-ui-datepicker/issues"},"homepage":"https://github.com/farhoudshapouran/react-native-ui-datepicker#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@commitlint/config-conventional":"^17.0.2","@evilmartians/lefthook":"^1.2.2","@react-native-community/eslint-config":"^3.0.2","@release-it/conventional-changelog":"^5.0.0","@testing-library/jest-native":"^5.4.3","@testing-library/react-native":"^12.3.2","@types/jest":"^28.1.8","@types/lodash":"^4.14.202","@types/react":"~17.0.21","@types/react-native":"0.70.0","@types/react-test-renderer":"^18.0.5","commitlint":"^17.0.2","del-cli":"^5.0.0","eslint":"^8.4.1","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.0.0","jest":"^28.1.3","pod-install":"^0.1.0","prettier":"^2.0.5","react":"^18.2.0","react-native":"^0.71.0","react-native-builder-bob":"^0.20.0","react-test-renderer":"^18.2.0","release-it":"^15.4.1","ts-node":"^10.9.1","typescript":"^4.5.2"},"resolutions":{"@types/react":"17.0.43"},"peerDependencies":{"react":"*","react-native":"*"},"engines":{"node":">= 16.0.0"},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"dependencies":{"dayjs":"^1.11.10","lodash":"^4.17.21","react-native-wheely":"^0.6.0","uninstall":"^0.0.0"},"_id":"@arcifius/react-native-ui-datepicker@2.1.2","gitHead":"9d09c330ccac9e2c83a73c0112f79a6c9bba06da","_nodeVersion":"20.8.1","_npmVersion":"10.1.0","dist":{"integrity":"sha512-Sm/txMLIYww4WlPul9yOWRwJgPua7Il4uMUB4ZY3DkLPmSC98I0Ppb9ea8wlJqyJKseH4FroMCPmlX9vmRz85Q==","shasum":"2a51f30a738d124a76d58bda0b555244d084e46d","tarball":"https://registry.npmjs.org/@arcifius/react-native-ui-datepicker/-/react-native-ui-datepicker-2.1.2.tgz","fileCount":137,"unpackedSize":354949,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwVsRJ74NOR6ozObUGMRnw9mcjj0qzsMM4dJiOESF+qAIgYqqS4/3QD3ujypjRYg3N/UASS14GWkH34NOD8aKkykY="}]},"_npmUser":{"name":"arcifius","email":"arcifius@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-ui-datepicker_2.1.2_1719495316185_0.2213344973858844"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-26T19:38:18.258Z","modified":"2024-06-27T13:35:16.588Z","2.1.0":"2024-06-26T19:38:18.461Z","2.1.1":"2024-06-27T13:25:58.852Z","2.1.2":"2024-06-27T13:35:16.410Z"},"maintainers":[{"name":"arcifius","email":"arcifius@gmail.com"}],"author":{"name":"Farhoud Shapouran","email":"shapouran@gmail.com","url":"https://github.com/farhoudshapouran"},"repository":{"type":"git","url":"git+https://github.com/farhoudshapouran/react-native-ui-datepicker.git"},"keywords":["react-native","ios","android","react-native-ui-datetpicker","react-native-datetime","react-native-datetime-picker","react-native-datetpicker","react-native-datet-picker","react-native-timepicker","react-native-time-picker","react-native-calendar","react-native-daterange","datetime","datetime-picker","datepicker","datet-picker","timepicker","time-picker","calendar","daterange"],"license":"MIT","homepage":"https://github.com/farhoudshapouran/react-native-ui-datepicker#readme","bugs":{"url":"https://github.com/farhoudshapouran/react-native-ui-datepicker/issues"},"readme":"\n\n---\n\n# react-native-ui-datepicker\n\n[](https://github.com/prettier/prettier)\n[](https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/LICENSE)\n\nDateTimePicker component for React Native that allows you to create a customizable date and time picker. The component uses [Day.js](https://day.js.org/) library and it contains a set of style props that allows you to change every item of calendar based on your own UI design. Please visit [demo](https://farhoudshapouran.github.io/react-native-ui-datepicker/).\n\n
\n\n
\n\n## Installation\n\n```sh\nnpm install react-native-ui-datepicker\n```\n\nOr\n\n```sh\nyarn add react-native-ui-datepicker\n```\n\n## Usage\n\n```js\nimport DateTimePicker from 'react-native-ui-datepicker';\nimport dayjs from 'dayjs';\n\nexport default function App() {\n const [date, setDate] = useState(dayjs());\n\n return (\n \n setDate(params.date)}\n />\n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: '#F5FCFF',\n },\n});\n```\n\nFor more, take a look at the `/example` directory.\n\n\n\n## Calendar props\n\n| Name | Type | Default | Description |\n| --------------- | ---------- | ------------- | ------------------------------------------------------------------------ |\n| mode | `string` | `'single'` | Defines the DatePicker mode `['single', 'range', 'multiple']` |\n| locale | `string` | `'en'` | Defines the DatePicker locale |\n| minDate | `DateType` | `null` | Defines DatePicker minimum selectable date |\n| maxDate | `DateType` | `null` | Defines DatePicker maximum selectable date |\n| firstDayOfWeek | `number` | `0` | Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday |\n| displayFullDays | `boolean` | `false` | Defines show previous and next month's days in the current calendar view |\n| initialView | `string` | `'day'` | Defines the DatePicker initial view `['day', 'month', 'year', 'time']` |\n| height | `number` | `'undefined'` | Defines the Calendar view heights |\n\n
\n\n
\n\n## Single Mode props\n\n| Name | Type | Default | Description |\n| ------------ | -------------- | ---------------- | -------------------------------------------------------------------------- |\n| date | `DateType` | `undefined` | Date value to display selected date |\n| onChange | `Function` | `({date}) => {}` | Called when the new date selected from DatePicker |\n| timePicker | `boolean` | `false` | Defines show or hide time picker |\n| disabledDays | `DisabledDays` | `'undefined'` | Defines DatePicker disabled weekdays (e.g., disable Sunday from selection) |\n\n## Range Mode props\n\n| Name | Type | Default | Description |\n| --------- | ---------- | ------------------------------ | -------------------------------------------------------------- |\n| startDate | `DateType` | `undefined` | Start date value to display selected start date |\n| endDate | `DateType` | `undefined` | End date value to display selected end date |\n| onChange | `Function` | `({startDate, endDate}) => {}` | Called when the new start or end date selected from DatePicker |\n\n## Multiple Mode props\n\n| Name | Type | Default | Description |\n| -------- | ------------ | ----------------- | -------------------------------------------------- |\n| dates | `DateType[]` | `[]` | Dates array to display selected dates |\n| onChange | `Function` | `({dates}) => {}` | Called when the new dates selected from DatePicker |\n\n## Styling props\n\n| Name | Type | Default | Description |\n| -------------------------- | ------------------------------ | ----------- | --------------------------------------------------------------------------------------------- |\n| calendarTextStyle | `TextStyle` | `null` | Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes) |\n| selectedTextStyle | `TextStyle` | `null` | Defines selected (Day, Month, Year) text styles |\n| selectedItemColor | `string` | `'#0047FF'` | Defines selected (Day, Month, Year) background and border colors |\n| headerContainerStyle | `ViewStyle` | `null` | Defines calendar header container style |\n| headerTextContainerStyle | `ViewStyle` | `null` | Defines calendar header texts (Month, Year, Time) containers style |\n| headerTextStyle | `TextStyle` | `null` | Defines calendar header text styles (Month, Year, Time) |\n| headerButtonStyle | `ViewStyle` | `null` | Defines calendar header \"prev and next buttons\" containers style |\n| headerButtonColor | `string` | `null` | Defines calendar header \"prev and next buttons\" icon color |\n| headerButtonSize | `number` | `18` | Defines calendar header \"prev and next buttons\" icon size |\n| headerButtonsPosition | `string` | `'around'` | Defines calendar header \"prev and next buttons\" positions `['around', 'right', 'left']` |\n| buttonPrevIcon | `ReactNode` | `undefined` | Defines calendar header \"prev button\" custom icon |\n| buttonNextIcon | `ReactNode` | `undefined` | Defines calendar header \"next button\" custom icon |\n| dayContainerStyle | `ViewStyle` | `null` | Defines days containers style |\n| todayContainerStyle | `ViewStyle` | `null` | Defines today container style |\n| todayTextStyle | `TextStyle` | `null` | Defines today text style |\n| monthContainerStyle | `ViewStyle` | `null` | Defines months containers style |\n| yearContainerStyle | `ViewStyle` | `null` | Defines years containers style |\n| weekDaysContainerStyle | `ViewStyle` | `null` | Defines weekdays container style |\n| weekDaysTextStyle | `TextStyle` | `null` | Defines weekdays texts style |\n| timePickerContainerStyle | `ViewStyle` | `null` | Defines time picker container style |\n| timePickerTextStyle | `TextStyle` | `null` | Defines time picker (Hours, Minutes) texts style |\n| timePickerIndicatorStyle | `ViewStyle` | `null` | Defines selected time indicator style |\n| timePickerDecelerationRate | `'normal'`, `'fast'`, `number` | `'fast'` | Defines how quickly the underlying scroll view decelerates after the user lifts their finger. |\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/farhoudshapouran/react-native-ui-datepicker)\n\nIf you are using the library in one of your projects, please consider supporting it with a star.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}
![](\"/.github/images/react-native-ui-datepicker-example.gif\")
\n![](\"/.github/images/modes-screenshot.png\")
\n