removed css-modules dependency.

README.md

@@ -47,5 +47,3 @@ const MyComponent = () => (
 ```
 
 For more examples [take a look at here](https://github.com/evandhq/react-persian-datepicker/blob/master/examples/src/components/App.js#L43).
-
-Note that you need `css-loader` for `/\.css$/` files enabled to have the styles working as we use css modules to put classnames in place. Otherwise, you'll have to pass an object of class names (like a css module) as `styles` prop. This way, you can develop your own stylesheet for the calendar according to the [basic one](https://github.com/evandhq/react-persian-datepicker/blob/master/src/styles/basic.css). The only thing that you will need to do is to require the css file that you made and pass it as `styles` prop to either `Calendar` or `DatePicker`.

src/components/Calendar.js

@@ -6,6 +6,7 @@ import Day from './Day';
 import { getDaysOfMonth } from '../utils/moment-helper';
 import moment from 'moment-jalali';
 import onClickOutside from 'react-onclickoutside';
+import { defaultStyles } from './DefaultStyles';
 
 // Load Persian localisation
 moment.loadPersian();
@@ -30,7 +31,7 @@ export class Calendar extends Component {
   };
 
   static defaultProps = {
-    styles: require('../styles/basic.css'),
+    styles: { ...defaultStyles, ...require('../styles/basic.css') },
     containerProps: {}
   };
 

src/components/DatePicker.js

@@ -20,12 +20,14 @@ export default class DatePicker extends Component {
     inputFormat: PropTypes.string,
     removable: PropTypes.bool,
     timePickerComponent: PropTypes.func,
+    styles: PropTypes.object,
     calendarStyles: PropTypes.object,
     calendarContainerProps: PropTypes.object
   };
 
   static defaultProps = {
     inputFormat: 'jYYYY/jM/jD',
+    styles: require('../styles/basic.css'),
     calendarStyles: require('../styles/basic.css'),
     calendarContainerProps: {}
   };
@@ -129,10 +131,10 @@ export default class DatePicker extends Component {
           className={className}
           type="text"
           ref="input"
-          onFocus={this.handleFocus.bind(this) }
-          onBlur={this.handleBlur.bind(this) }
-          onChange={this.handleInputChange.bind(this) }
-          onClick={this.handleInputClick.bind(this) }
+          onFocus={this.handleFocus.bind(this)}
+          onBlur={this.handleBlur.bind(this)}
+          onChange={this.handleInputChange.bind(this)}
+          onClick={this.handleInputClick.bind(this)}
           value={inputValue}
         />
       </div>
@@ -142,6 +144,7 @@ export default class DatePicker extends Component {
   renderCalendar() {
     const { momentValue } = this.state;
     const { timePickerComponent: TimePicker, onChange, min, max, defaultMonth, calendarStyles, calendarContainerProps } = this.props;
+    const styles = this.props.styles || calendarStyles;
 
     return (
       <div>
@@ -150,10 +153,10 @@ export default class DatePicker extends Component {
           max={max}
           selectedDay={momentValue}
           defaultMonth={defaultMonth}
-          onSelect={this.handleSelectDay.bind(this) }
-          onClickOutside={this.handleClickOutsideCalendar.bind(this) }
+          onSelect={this.handleSelectDay.bind(this)}
+          onClickOutside={this.handleClickOutsideCalendar.bind(this)}
           outsideClickIgnoreClass={outsideClickIgnoreClass}
-          styles={calendarStyles}
+          styles={styles}
           containerProps={calendarContainerProps}
         >
           {
@@ -162,7 +165,7 @@ export default class DatePicker extends Component {
                 min={min}
                 max={max}
                 momentValue={momentValue}
-                setMomentValue={this.setMomentValue.bind(this) }
+                setMomentValue={this.setMomentValue.bind(this)}
               />
             ) : null
           }
@@ -172,7 +175,7 @@ export default class DatePicker extends Component {
   }
 
   removeDate() {
-    const {onChange} = this.props;
+    const { onChange } = this.props;
     if (onChange) {
       onChange('');
     }
@@ -187,8 +190,8 @@ export default class DatePicker extends Component {
 
     return (
       <TetherComponent attachment="top center">
-        { this.renderInput() }
-        { isOpen ? this.renderCalendar() : null }
+        {this.renderInput()}
+        {isOpen ? this.renderCalendar() : null}
       </TetherComponent>
     );
   }

src/components/DefaultStyles.js

@@ -0,0 +1,13 @@
+export const defaultStyles = {
+  calendarContainer: 'calendarContainer',
+  heading: 'heading',
+  prev: 'prev',
+  next: 'next',
+  title: 'title',
+  dayWrapper: 'dayWrapper',
+  currentMonth: 'currentMonth',
+  daysOfWeek: 'daysOfWeek',
+  monthsList: 'monthsList',
+  selected: 'selected',
+  dayPickerContainer: 'dayPickerContainer'
+};