@manishcodefire/date-picker
v1.0.3
Published
Date Picker by manishcodefire
Downloads
5
Readme
This is a DatePicker Library.
Installation
1.Install the package via npm:
npm install @manishcodefire/date-picker
Code snippets:
2.Here's an example of how you can use the component
import React, {useState} from 'react';
import {View} from 'react-native';
import {SingleDatePicker} from '@manishcodefire/date-picker';
const App = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
const handleDateChange = date => {
setSelectedDate(date);
};
const calendarImage = require('../../assets/calendar.png');
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<SingleDatePicker
initialDate={selectedDate}
onDateChange={handleDateChange}
visible={false}
onRequestClose={() => console.log('Modal Closed')}
dateFormat="DD/MM/YYYY"
separator="/"
customCalendarImage={calendarImage}
width={'85%'}
/>
</View>
);
};
export default App;
Single Date-Picker Props
| Props Name | Params | isRequire | Description | | ----------------------------- | ----------- | --------- | ------------------------------------------------ | | initialDate | Date | Yes | Initial selected date. | | onDateChange | function | Yes | Callback function when date is selected. | | visible | boolean | Yes | Whether the date picker is visible. | | onRequestClose | function | Yes | Callback function when modal is closed. | | dateFormat | string | Yes | Format for displaying the date. | | separator | string | Yes | Separator character for date format. | | width | string | No | Width of the date picker container. | | height | Number | No | Height of the date picker container. | | borderWidth | Number | No | Width of the border around the date picker. | | borderColor | String | No | Color of the border around the date picker. | | borderRadius | Number | No | Border radius of the date picker container. | | placeholder | String | No | Placeholder text when no date is selected. | | paddingHorizontal | Number | No | Horizontal padding of the date picker container. | | placeholderTextColor | String | No | Text color of the placeholder. | | placeholderTextFontSize | Number | No | Font size of the placeholder text. | | placeholderFontWeight | String | No | Font weight of the placeholder text. | | iconWidth | Number | No | Width of the calendar icon. | | iconHeight | Number | No | Height of the calendar icon. | | iconTintColor | String | No | Tint color of the calendar icon. | | defaultCalendarSize | Number | No | Size of the default calendar icon. | | customCalendarImage | ImageSource | No | Custom image for the calendar icon. | | calenderDateBorderColor | String | No | Border color for each date cell. | | calenderDateBorderRadius | Number | No | Border radius for each date cell. | | calendarContainerWidth | Number | No | Width of the calendar container. | | calendarContainerBg | String | No | Background color of the calendar container. | | calendarContainerBorderRadius | Number | No | Border radius of the calendar container. | | monthYearHeaderFontWeight | String | No | Font weight of the month-year header. | | monthYearHeaderTextColor | String | No | Text color of the month-year header. | | monthYearHeaderFontSize | Number | No | Font size of the month-year header. | | todayTextFontSize | Number | No | Font size of the "Today" button. | | todayTextColor | String | No | Text color of the "Today" button. | | arrowSize | Number | No | Size of the navigation arrows. | | arrowColor | String | No | Color of the navigation arrows. | | weekdayFontWeight | String | No | Font weight of the weekday labels. | | weekdayColor | String | No | Text color of the weekday labels. | | buttonFontSize | Number | No | Font size of the action buttons. | | buttonFontWeight | String | No | Font weight of the action buttons. | | buttonColor | String | No | Text color of the action buttons. | | dateFontSize | Number | No | Font size of the date cells. | | dateFontWeight | String | No | Font weight of the date cells. | | dateColor | String | No | Text color of the date cells. |
Code snippets:
2.Here's an example of how you can use the Date Range Picker component
import React, {useState} from 'react';
import {View} from 'react-native';
import {DateRangePicker} from '@manishcodefire/date-picker';
const App = () => {
const calendarImage = require('../../assets/calendar.png')
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const handleDatesChange = (start, end) => {
setStartDate(start);
setEndDate(end);
console.log(`${start}-${end}`);
};
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<DateRangePicker
initialStartDate={startDate}
initialEndDate={endDate}
onDatesChange={handleDatesChange}
dateFormat="DD/MM/YYYY"
separator="/"
customCalendarImage={calendarImage}
/>
</View>
);
};
export default App;
Date-Range-Picker Props
| Props Name | Params | isRequire | Description | | ----------------------------- | ----------- | --------- | ------------------------------------------------ | | initialStartDate | Date | Yes | Initial selected start date. | | initialEndDate | Date | Yes | Initial selected end date. | | onDatesChange | function | Yes | Callback function when dates are selected. | | dateFormat | String | Yes | Format for displaying the date. | | separator | string | Yes | Separator character for date format. | | width | string | No | Width of the date picker container. | | height | Number | No | Height of the date picker container. | | borderWidth | Number | No | Width of the border around the date picker. | | borderColor | String | No | Color of the border around the date picker. | | borderRadius | Number | No | Border radius of the date picker container. | | paddingHorizontal | Number | No | Horizontal padding of the date picker container. | | placeholderTextColor | String | No | Text color of the placeholder. | | placeholderTextFontSize | Number | No | Font size of the placeholder text. | | placeholderFontWeight | String | No | Font weight of the placeholder text. | | iconWidth | Number | No | Width of the calendar icon. | | iconHeight | Number | No | Height of the calendar icon. | | iconTintColor | String | No | Tint color of the calendar icon. | | defaultCalendarSize | Number | No | Size of the default calendar icon. | | customCalendarImage | ImageSource | No | Custom image for the calendar icon. | | calenderDateBorderColor | String | No | Border color for each date cell. | | calenderDateBorderRadius | Number | No | Border radius for each date cell. | | calendarContainerWidth | Number | No | Width of the calendar container. | | calendarContainerBg | String | No | Background color of the calendar container. | | calendarContainerBorderRadius | Number | No | Border radius of the calendar container. | | monthYearHeaderFontWeight | String | No | Font weight of the month-year header. | | monthYearHeaderTextColor | String | No | Text color of the month-year header. | | monthYearHeaderFontSize | Number | No | Font size of the month-year header. | | todayTextFontSize | Number | No | Font size of the "Today" button. | | todayTextColor | String | No | Text color of the "Today" button. | | arrowSize | Number | No | Size of the navigation arrows. | | arrowColor | String | No | Color of the navigation arrows. | | weekdayFontWeight | String | No | Font weight of the weekday labels. | | weekdayColor | String | No | Text color of the weekday labels. | | buttonFontSize | Number | No | Font size of the action buttons. | | buttonFontWeight | String | No | Font weight of the action buttons. | | buttonColor | String | No | Text color of the action buttons. | | dateFontSize | Number | No | Font size of the date cells. | | dateFontWeight | String | No | Font weight of the date cells. | | dateColor | String | No | Text color of the date cells. |