rn-lightweight-date-picker

React Native Light DatePicker

Lightweight date range picker without dependencies for React Native.

Install

$ npm i rn-lightweight-date-picker --save

Example

  state = {
    minDate: new Date(2018, 12, 31)
  }

  onChange(data){
    const { start, end } = data;
    if(start && data) api.fetchSchedule(start, end);
  }
  
  render(){
    return(
      <Calendar
        locale = "ru"
        userStyles = {{ topBar: { controls: 'flex-start' }}}
        userColors = {{ title: 'blue' }}
        maxRange = {10}
        minDate = {this.state.minDate}
        onDateChange={this.onChange}
        format="dd.mm.yyyy"
      />
    )
  }

Contributing

Feel free to open new issues if you have any problems or suggestions.

Properties

All properties are optional

Prop	Type	Default	Desc
locale	String	Device language	Calendar localization.
onDateChange	Function	(date) => {}	Returns chosen date. Range mode: {start: value, end: value}, single: value. value: if date selected - Date object, if selected and format specified - String, if not selected - false.
format	String or false	false	Example: "dddd. mmmm - yyyy". See below for details.
userColors	Object	{}	Override colors. See below for details.
userStyles	Object	{}	Override styles. See below for details.
minRange	Number or false	false	Minimum avaliable size of selected range.
maxRange	Number or false	false	Maximum avaliable size of selected range.
minDate	Date or false	false	Minimum avaliable date to be selected. .
maxDate	Date or false	false	Maximum avaliable date to be selected.
mode	String	range	single or range. Gives opportunity to select only one date or range(If range you can select one date too).
titleFadeDuration	Number	300	Title switching duration in ms.
swipeDuration	Number	300	Month switching duration in ms.
initialDate	Date	new Date()	This date will be shown in calendar on load. Default is Current Time.
showControls	Bool	false	Specified if arrows controls are visible(doesnt disable swipes).
leftControl	Component	<Text>{ "<" }</Text>	Specified left control.
RightControl	Component	<Text>{ ">" }</Text>	Specified right control.
highlightToday	Bool	true	Specified if current date should be highlighted.
rowheight	Number	30	Week height in calendar.
rowPadding	Number	7	Week padding in calendar.

Styles

All styles could be overwritten. If you want you can also easily change only colors. Below you can see what values are responsible for styles or colors, you can override them in userStyles or userColors.(Components are colorized just to facilitate understanding)

Date format

Example dd dddd mmmm : yyyy will become 01 Sunday September : 2019.

Prop	Type	Default	Desc	Default	Desc
dn	T	mn	S	yy	19
d	1-31	m	1-12	yyyy	2019
dd	01-31	mm	01-12
ddd	Thu	mmm	Sep
dddd	Thursday	mmmm	September