README
react-jsx-highstock-datepickers
React Day Pickers for React JSX Highstock as a drop in replacement for the default Highstock rangeSelector.input
field.
Usage
import DateRangePickers from 'react-jsx-highstock-datepickers';
import 'react-jsx-highstock-datepickers/dist/index.css'; // Optional - default styles
render () {
return (
<HighchartsStockChart>
// Omitted
<DateRangePickers axisId="xAxis" />
</HighchartsStockChart>
);
}
Required props
axisId
In 99% of cases, this will be xAxis
- the default ID for an X axis in React JSX Highstock. You only need to change this if you are using a custom ID for your X axis.
Optional Props
dayFormat
string|array
The date format to be displayed in the Date Picker input boxes
- Defaults to
DD MMM YYYY
i.e. 07 Aug 2017 - Change be any format supported by moment.js
fromLabel
string
The text displayed next to the "From" input box.
- Defaults to Highcharts
lang.rangeSelectorFrom
toLabel
string
The text displayed next to the "To" input box.
- Defaults to Highcharts
lang.rangeSelectorTo
onChangeFromDate
function
Allows you to add a custom callback when the From date is changed
- Defaults to
() => {}
(nothing)
onChangeToDate
function
Allows you to add a custom callback when the To date is changed
- Defaults to
() => {}
(nothing)
datePickerProps
object
Allows you to pass config through to React Day Picker
Localisation props
locale
string|array
The language code for the current locale
- Defaults to
en
months
array
The month names to use
- Defaults to Highcharts
lang.months
weekdaysLong
array
The long weekdays names to use
- Defaults to Highcharts
lang.weekdays
weekdaysShort
array
The short weekdays names to use
- Defaults to Highcharts
lang.shortWeekdays