{"_id":"@amjed-bouhouch/react-native-ui-datepicker","name":"@amjed-bouhouch/react-native-ui-datepicker","dist-tags":{"latest":"2.1.4"},"versions":{"2.1.4":{"name":"@amjed-bouhouch/react-native-ui-datepicker","version":"2.1.4","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":"standard-version","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/amjadbouhouch/react-native-ui-datepicker.git"},"author":{"name":"Amjed Bouhouch","email":"amjedbouhouch@gmail.com","url":"https://github.com/amjadbouhouch"},"license":"MIT","bugs":{"url":"https://github.com/amjadbouhouch/react-native-ui-datepicker/issues"},"homepage":"https://github.com/amjadbouhouch/react-native-ui-datepicker#readme","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"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","standard-version":"^9.5.0","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"},"gitHead":"7b0d0eca1a84e239a26596baad7c1cc266833386","_id":"@amjed-bouhouch/react-native-ui-datepicker@2.1.4","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-TF+ZX5y2Rq+eNh0CjXir0k15SKMB+RSvPcwqqGbemoOFWXBazQO+rTFTFEHEs1CIYMhN63XSg6dnGMdEhxY5bg==","shasum":"52c34e950e9722d35ad7e200dd25dc1c74c8964b","tarball":"https://registry.npmjs.org/@amjed-bouhouch/react-native-ui-datepicker/-/react-native-ui-datepicker-2.1.4.tgz","fileCount":132,"unpackedSize":352967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQ9i1waa+9cS8+/eoPaDtJIEhDq55eGFqB4mc5xZn+CAiASYGB2YaITutxDlPDEB4fSNGYIm8tUAC2baZFBPVcuzw=="}]},"_npmUser":{"name":"amjedbouhouch","email":"amjedbouhouch@gmail.com"},"directories":{},"maintainers":[{"name":"amjedbouhouch","email":"amjedbouhouch@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-ui-datepicker_2.1.4_1723026639924_0.7184786566706209"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-07T10:30:39.832Z","2.1.4":"2024-08-07T10:30:40.165Z","modified":"2024-08-07T10:30:40.423Z"},"maintainers":[{"name":"amjedbouhouch","email":"amjedbouhouch@gmail.com"}],"description":"Customizable date picker for React Native","homepage":"https://github.com/amjadbouhouch/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/amjadbouhouch/react-native-ui-datepicker.git"},"author":{"name":"Amjed Bouhouch","email":"amjedbouhouch@gmail.com","url":"https://github.com/amjadbouhouch"},"bugs":{"url":"https://github.com/amjadbouhouch/react-native-ui-datepicker/issues"},"license":"MIT","readme":"![react-native-ui-datepicker](https://user-images.githubusercontent.com/7857656/227187674-93012672-495d-4955-b4d3-46c3d016684e.jpg)\n\n---\n\n# react-native-ui-datepicker\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/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![react-native-ui-datepicker-styles](https://user-images.githubusercontent.com/7857656/227260476-30ee8c25-f809-4dcf-bccf-cd1ffab8795a.jpg)\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| maxDate | `isDateDisabled` | `undefined` | A function that return if a specific date is `Disabled` |\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| 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| selectedRangeBackgroundColor | `string` | `undefined` | Defines selected range background color. |\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"}