Skip to content

Latest commit

 

History

History
79 lines (68 loc) · 4.38 KB

README.md

File metadata and controls

79 lines (68 loc) · 4.38 KB

React Native Light DatePicker

install size dependencies Status Test Coverage Maintainability Build Status

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