{"_id":"@aldiand/react-native-ui-datepicker","name":"@aldiand/react-native-ui-datepicker","dist-tags":{"latest":"2.1.0"},"versions":{"2.1.0":{"name":"@aldiand/react-native-ui-datepicker","version":"2.1.0","private":false,"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","uninstall":"^0.0.0"},"gitHead":"0476121f3308708a44422ad4092edc236ad7c18b","_id":"@aldiand/react-native-ui-datepicker@2.1.0","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-BVR7E/FwEl8e0sy9g8N2YMr51kIcWjr7hEXcjrReUFIkz/3eXtm9FCQZLqSyHaekxJZiNkGhuZL0uGVSWl3D/Q==","shasum":"3b6f0ca8b4fb5958083e25c7e31f1e276a32e694","tarball":"https://registry.npmjs.org/@aldiand/react-native-ui-datepicker/-/react-native-ui-datepicker-2.1.0.tgz","fileCount":118,"unpackedSize":338780,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICijm5KLqNJ1gouiV8x/wD6y2czDBLmEoISHXtUOQI7kAiEAxwxO1Mf/gfNw0QYl0ICjCBsks1IsXcQlNcBSDp4fxPE="}]},"_npmUser":{"name":"aldiand","email":"supersandre@gmail.com"},"directories":{},"maintainers":[{"name":"aldiand","email":"supersandre@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-ui-datepicker_2.1.0_1715648656219_0.7746454461351922"},"_hasShrinkwrap":false}},"time":{"created":"2024-05-14T01:04:16.144Z","2.1.0":"2024-05-14T01:04:16.400Z","modified":"2024-05-14T01:04:16.683Z"},"maintainers":[{"name":"aldiand","email":"supersandre@gmail.com"}],"description":"Customizable date picker for React Native","homepage":"https://github.com/farhoudshapouran/react-native-ui-datepicker#readme","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"},"bugs":{"url":"https://github.com/farhoudshapouran/react-native-ui-datepicker/issues"},"license":"MIT","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\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\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