rnd

react-native-date-ranges

idea from react-native-dates >

Showing:

Popularity

Downloads/wk

116

GitHub Stars

52

Maintenance

Last Commit

8mos ago

Contributors

7

Package

Dependencies

4

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

react-native-date-ranges

npm version npm downloads

Getting started

$ npm install react-native-date-ranges --save

alt text

Usage

import DatePicker from 'react-native-date-ranges';

//range picker
<DatePicker
    style={ { width: 350, height: 45 } }
    customStyles = { {
        placeholderText:{ fontSize:20 } // placeHolder style
        headerStyle : {  },         // title container style
        headerMarkTitle : { }, // title mark style 
        headerDateTitle: { }, // title Date style
        contentInput: {}, //content text container style
        contentText: {}, //after selected text Style
    } } // optional 
    centerAlign // optional text will align center or not
    allowFontScaling = {false} // optional
    placeholder={'Apr 27, 2018 → Jul 10, 2018'}
    mode={'range'}
/>

//single picker
<DatePicker
    style={ { width: 350, height: 45 } } // default width will be equal to placeholder text width
    customStyles = { {
        placeholderText:{ fontSize:20 }, // placeHolder style
        headerStyle : {  },         // title container style
        headerMarkTitle : { }, // title mark style 
        headerDateTitle: { }, // title Date style
        contentInput: {}, //content text container style
        contentText: {}, //after selected text style
                monthPickerText: {}, //focused month picker text style
                datePickerText: {}, //calendar dates text style
                dayNameText: {} //day of week title text style (M, T, W, T, F, S, S)
    } } // optional 
    centerAlign // optional text will align center or not
    allowFontScaling = {false} // optional
    placeholder={'Apr 27, 2018'}
    selectedBgColor="black"
    selectedTextColor="blue"
        calendarBgColor="black"
/>


//customButton usage...
export default class NewPicker extends React.Component{
    
    customButton = (onConfirm) => (
        <Button
            onPress={onConfirm}
            style={{ container:{ width:'80%', marginHorizontal:'3%' }, text:{ fontSize: 20 } }}
            primary
            text={'送出'}
        />
    )

  render(){
    const {
      ...rest
    } = this.props;
    return(
      <DatePicker
        ref = {(ref)=> this.picker = ref}
        {...rest}
        customButton = {this.customButton}
      />
    )
  }
} 

Props

PropTypeDescription
placeholderStringoptional.
customStylesObjectoptional. customize style e.g.({ placeholderText:{}, headerStyle:{} ... })
styleObjectOptional. date picker's style
onConfirmFunctionOptional. call function after click button, that would return a date object {startDate:'', endDate:''} e.g( value=>console.log(value))
calendarBgColorStringOptional. custom the calendar view background color e.g {"black"}
selectedBgColorStringOptional. custom your selected date background color e.g {"black"}
selectedTextColorStringOptional. custom your selected date text color e.g {"black"}
ButtonStyleObjectOptional. custom your save button container style
ButtonTextStyleObjectOptional. custom your save button Text style
returnFormatStringOptional. custom your datetime format e.g.('YYYY/MM/DD') at onConfirm
headFormatStringOptional. custom your datetime format showing at headBlock e.g.('YYYY/MM/DD')
outFormatStringOptional. custom your datetime format showing at outline touchable filed e.g.('YYYY/MM/DD')
modeStringone of ['range', 'single'] , default as single
customButtoncomponentOptional (total custom your button component)e.g.(<Button></Button>)
blockBeforeBooloptional. default is false, decide blocke date before today or not
markTextStringoptional. default is "選擇日期", you can custom this prop to label text with ur own
buttonTextStringoptional. you can modify default button't label with your own
blockAfterBooloptional. default is false, decide blocke date after today or not
dateSplitterStringoptional. default is '->', decide custom dateSplitter with String

....

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100

Alternatives

react-native-datepickerreact native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS
User Rating
5.0/ 5
1
Top Feedback
1Great Documentation
1Easy to Use
1Abandoned
GitHub Stars
2K
Weekly Downloads
22K
nmd
nativescript-modal-datetimepickerA nice looking modal date time picker.
User RatingN/A
Top Feedback
1Great Documentation
1Easy to Use
1Highly Customizable
GitHub Stars
60
Weekly Downloads
214
rnc
react-native-calendar-selectA component to select period from calendar like Airbnb
User RatingN/A
Top Feedback
N/A
GitHub Stars
288
Weekly Downloads
38
rnd
react-native-date-pickerReact Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's written with native code to achieve the best possible look, feel and performance.
User Rating
5.0/ 5
5
Top Feedback
5Great Documentation
3Easy to Use
2Highly Customizable
GitHub Stars
976
Weekly Downloads
39K
rnm
react-native-modal-datetime-pickerA React-Native datetime-picker for Android and iOS
User RatingN/A
Top Feedback
1Great Documentation
1Bleeding Edge
GitHub Stars
2K
Weekly Downloads
125K
See 10 Alternatives