Rn-lightweight-date-picker NPM

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)