Txend-react-native-ui-datepicker NPM

txend-react-native-ui-datepicker

DateTimePicker component for React Native that allows you to create a customizable date and time picker. The component uses Day.js 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.

Installation

npm install txend-react-native-ui-datepicker

yarn add txend-react-native-ui-datepicker

Usage

import DateTimePicker from 'txend-react-native-ui-datepicker';
import dayjs from 'dayjs';

export default function App() {
  const [value, setValue] = useState(dayjs());
  
  return (
    <View style={styles.container}>
      <DateTimePicker
        value={value}
        onValueChange={(date) => setValue(date)}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

For more, take a look at the /example directory.

react-native-ui-datepicker-styles

Available props

Name	Type	Default	Description
value	`DateType`	`Dayjs`	DatePicker value to display selected date
onValueChange	`func`	`() => {}`	Called when the new date selected from DatePicker
mode	`string`	`'datetime'`	Defines the DatePicker mode `['datetime', 'date', 'time']`
locale	`string`	`'en'`	Defines the DatePicker locale
minimumDate	`DateType`	`null`	Defines DatePicker minimum selectable date
maximumDate	`DateType`	`null`	Defines DatePicker maximum selectable date
firstDayOfWeek	`number`	`0`	Defines the starting day of week, number 0-6, 0 - Sunday, 6 - Saturday
displayFullDays	`boolean`	`false`	Defines show previous and next month's days in the current calendar view
calendarTextStyle	`TextStyle`	`null`	Defines all text styles inside the calendar (Days, Months, Years, Hours, and Minutes)
selectedTextStyle	`TextStyle`	`null`	Defines selected (Day, Month, Year) text styles
selectedItemColor	`string`	`'#0047FF'`	Defines selected (Day, Month, Year) background and border colors
headerContainerStyle	`ViewStyle`	`null`	Defines calendar header container style
headerTextContainerStyle	`ViewStyle`	`null`	Defines calendar header texts (Month, Year, Time) containers style
headerTextStyle	`TextStyle`	`null`	Defines calendar header text styles (Month, Year, Time)
headerButtonStyle	`ViewStyle`	`null`	Defines calendar header "prev and next buttons" containers style
headerButtonColor	`string`	`null`	Defines calendar header "prev and next buttons" icon color
headerButtonSize	`number`	`18`	Defines calendar header "prev and next buttons" icon size
headerButtonsPosition	`string`	`'around'`	Defines calendar header "prev and next buttons" positions `['around', 'right', 'left']`
buttonPrevIcon	`ReactNode`	`undefined`	Defines calendar header "prev button" custom icon
buttonNextIcon	`ReactNode`	`undefined`	Defines calendar header "next button" custom icon
dayContainerStyle	`ViewStyle`	`null`	Defines days containers style
todayContainerStyle	`ViewStyle`	`null`	Defines today container style
todayTextStyle	`TextStyle`	`null`	Defines today text style
monthContainerStyle	`ViewStyle`	`null`	Defines months containers style
yearContainerStyle	`ViewStyle`	`null`	Defines years containers style
weekDaysContainerStyle	`ViewStyle`	`null`	Defines weekdays container style
weekDaysTextStyle	`TextStyle`	`null`	Defines weekdays texts style
timePickerContainerStyle	`ViewStyle`	`null`	Defines time picker container style
timePickerTextStyle	`TextStyle`	`null`	Defines time picker (Hours, Minutes) texts style