JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 236
  • Score
    100M100P100Q81620F
  • License ISC

Auto Complete React component

Package Exports

  • react-autocomplete-select

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-autocomplete-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-autocomplete-select

[![Travis][build-badge]][build] npm package Coveralls

React Calendar to pick the range between two dates and easily customizable.

readme docs need to be updated ...

Example

Here is the working calendar example.

Functional Guide

Property Name Description Type Short Example
onSelect this method is called, when user selects both start and end date function <Calendar onSelect= (startDate, endDate) => { // do whatever you want to do }
selectedRange date range that will be by default selected, should be of type Array e.g.[startDate,endDate] Array <Calendar selectedRange= {["2019-03-03","2019-03-07"]} />
disabledDates disable the dates those get returned by this method in the array format function <Calendar disabledDates= {() => { return ["2019-03-01","2019-03-02","2019-03-08"] } } />
disablePrevDates disable the previous dates, by default it's value is false boolen

Style Guide

Property Name Description Type Short Example
leftArrowCss This sets the css in 'string' format for left calendar Arrow icon, write css just like normal css you write with some extra things like if you want to put Hover Effect you could implement that just by writing this way &:hover{ // your css when you hover over it } string <Calendar leftArrowCss = "background: white; &:hover { background: green; }" />
rightArrowCss This sets the css in 'string' format for right calendar Arrow icon, write css just like normal css you write usually with hover effect similar to leftArrowCss Prop string <Calendar rightArrowCss = "background: white; &:hover { background: green; }" />
leftMonthYearCss This sets the css in 'string' format for left calendar's Month and Year text, write normal css with hover effect if needed similar to above string type css props string <Calendar leftMonthYearCss = "font-size:14px; }" />
rightMonthYearCss This sets the css in 'string' format for right calendar's Month and Year text, write normal css with hover effect if needed similar to above string type css props string <Calendar rightMonthYearCss = "font-size:14px; }" />
leftCalHeaderCss This sets the css in 'string' format for left calendar's header, write normal css similar to above string type css props string <Calendar leftCalHeaderCss = "background:red; }" />
rightCalHeaderCss This sets the css in 'string' format for right calendar's header, write normal css similar to above string type css props string <Calendar rightCalHeaderCss = "background:red; }" />
thCss This sets the css in 'string' format for both calendar's day headings, write normal css similar to above string type css props string <Calendar thCss = "background:red; }" />
globalCss This sets the css in 'string' format that could get applied on both of the calendars globally, write normal css similar to above string type css props but with functionality to perform any css operation on any point or element of the calendar. Remember! This global css will not be applied on td elements. For that look at cssObj props string <Calendar globalCss = "*{ font-size: 14px } tr{ background: blue; }" />
tdCssObj This sets the css in 'object' format for both calendar's date tds, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element object <Calendar tdCssObj = {{backgroundColor:'white',fontSize: '14px'}} />
onHoverTdCssObj This sets the css in 'object' format for both calendar's date tds those get hovered, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element object <Calendar onHoverTdCssObj = {{backgroundColor:'yellow',fontSize: '14px',color:'brown'}} />
inRangedTdCssObj This sets the css in 'object' format for both calendar's date tds those comes in range after start date, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element object <Calendar inRangedTdCssObj = {{backgroundColor:'green',fontSize: '14px',color:'white'}} />
startDateTdCssObj This sets the css in 'object' format for both calendar's date td that is the start date, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element object <Calendar startDateTdCssObj = {{backgroundColor:'grey',fontSize: '14px',color:'black'}} />
endDateTdCssObj This sets the css in 'object' format for both calendar's date td that is the end date, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element object <Calendar endDateTdCssObj = {{backgroundColor:'grey',fontSize: '14px',color:'black'}} />
disabledDatesTdCssObj This sets the css in 'object' format for both calendar's date td that is the end date, write javascript style css , <DOMElement>.style, you can write any of the javascript style property to style the element object <Calendar disabledDatesTdCssObj = {{backgroundColor:'red',fontSize: '14px',color:'black',opacity:'0.2'}} />
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo