update persian example - use jalali date in inputs - change direction to RTL

examples/DateRangePickerWrapper.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import momentPropTypes from 'react-moment-proptypes';
 import moment from 'moment';
+import momentJalaali from 'moment-jalaali';
 import omit from 'lodash/omit';
 
 import DateRangePicker from '../src/components/DateRangePicker';
@@ -15,6 +16,7 @@ const propTypes = {
   // example props for the demo
   autoFocus: PropTypes.bool,
   autoFocusEndDate: PropTypes.bool,
+  isPersianDateRangePicker: PropTypes.bool,
   initialStartDate: momentPropTypes.momentObj,
   initialEndDate: momentPropTypes.momentObj,
 
@@ -31,6 +33,7 @@ const defaultProps = {
   // example props for the demo
   autoFocus: false,
   autoFocusEndDate: false,
+  isPersianDateRangePicker: false,
   initialStartDate: null,
   initialEndDate: null,
 
@@ -108,7 +111,14 @@ class DateRangePickerWrapper extends React.Component {
   }
 
   onDatesChange({ startDate, endDate }) {
-    this.setState({ startDate, endDate });
+    if (this.props.isPersianDateRangePicker) {
+      this.setState({
+        startDate: startDate && momentJalaali(startDate),
+        endDate: endDate && momentJalaali(endDate),
+      });
+    } else {
+      this.setState({ startDate, endDate });
+    }
   }
 
   onFocusChange(focusedInput) {
@@ -126,6 +136,7 @@ class DateRangePickerWrapper extends React.Component {
       'autoFocusEndDate',
       'initialStartDate',
       'initialEndDate',
+      'isPersianDateRangePicker',
     ]);
 
     return (

stories/DateRangePicker.js

@@ -84,8 +84,11 @@ storiesOf('DateRangePicker (DRP)', module)
   })
   .addWithInfo('non-english locale (Persian)', () => {
     moment.locale('fa');
+    momentJalaali.loadPersian({ dialect: 'persian-modern', usePersianDigits: true });
     return (
       <DateRangePickerWrapper
+        isRTL
+        isPersianDateRangePicker
         renderMonth={month => momentJalaali(month).format('jMMMM jYYYY')}
         renderDayContents={day => momentJalaali(day).format('jD')}
       />