You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-native-date-ranges

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-date-ranges

[![npm version](https://img.shields.io/npm/v/react-native-date-ranges.svg?style=flat-square)](https://www.npmjs.com/package/react-native-date-ranges) [![npm downloads](https://img.shields.io/npm/dm/react-native-date-ranges.svg?style=flat-square)](https://


Version published
Maintainers
1
Created

Readme

Source

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, 2018Jul 10, 2018'}
	mode={'range'}
/>

//single 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'}
	selectedBgColor="black"
	selectedTextColor="blue"
/>


//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))
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
....

Keywords

FAQs

Package last updated on 25 Jul 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc