Merge branch 'master' of github.com:ParadeTo/react-date-range

Author: burakcan

demo/build.js

@@ -4,7 +4,7 @@ var UglifyJsPlugin      = webpack.optimize.UglifyJsPlugin;
 var path                = require('path');
 var DefinePlugin        = webpack.DefinePlugin;
 var WebpackDevServer    = require("webpack-dev-server");
-var NODE_ENV            = process.env.NODE_ENV || 'production';
+var NODE_ENV            = process.env.NODE_ENV.trim() || 'production';
 
 var config = {
   entry                 : {

demo/package.json

@@ -6,11 +6,14 @@
   "scripts": {
     "build": "node build.js",
     "start-dev": "NODE_ENV=development npm run build",
-    "build-prod": "NODE_ENV=production npm run build"
+    "start-dev-windows": "set NODE_ENV=development & npm run build",
+    "build-prod": "NODE_ENV=production npm run build",
+    "build-prod-windows": "set NODE_ENV=production & npm run build"
   },
   "keywords": [],
   "author": "Burak Can <[email protected]>",
   "dependencies": {
+    "moment": "^2.17.0",
     "normalize.css": "^3.0.3",
     "react": "^0.14.0",
     "react-dom": "^0.14.0"

demo/src/components/Main.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import moment from 'moment';
 import { defaultRanges, Calendar, DateRange } from '../../../lib';
 import Section from 'components/Section';
 
@@ -100,6 +101,23 @@ export default class Main extends Component {
           />
         </Section>
 
+        <Section title='Date Picker, chinese.'>
+          <div>
+            <input
+              type='text'
+              readOnly
+              value={ datePicker && datePicker.format(format).toString() }
+            />
+          </div>
+          <Calendar
+            disableDaysBeforeToday={true}
+            lang={'jp'}
+            date={ now => { return now } }
+            onInit={ this.handleChange.bind(this, 'datePicker') }
+            onChange={ this.handleChange.bind(this, 'datePicker') }
+          />
+        </Section>
+
         <Section title='Date Picker (Monday First)'>
           <div>
             <input
@@ -193,6 +211,34 @@ export default class Main extends Component {
             }}
           />
         </Section>
+
+        <Section title='Mobile Datepicker'>
+          <div>
+            <input
+              type='text'
+              readOnly
+              value={ rangePicker['startDate'] && rangePicker['startDate'].format(format).toString() }
+            />
+            <input
+              type='text'
+              readOnly
+              value={ rangePicker['endDate'] && rangePicker['endDate'].format(format).toString() }
+            />
+          </div>
+          <div className={styles['Mobile-Container']}>
+            <DateRange
+              startDate={ now => {return now.add(1,'month')}}
+              endDate={ now => {return now.add(1,'month').add(3,'days')}}
+              shownDate={moment()}
+              offsetPositive={true}
+              disableDaysBeforeToday={true}
+              showMonthArrow={false}
+              calendars={4}
+              onInit={ this.handleChange.bind(this, 'rangePicker') }
+              onChange={ this.handleChange.bind(this, 'rangePicker') }
+            />
+          </div>
+        </Section>
       </main>
     )
   }

demo/src/styles/main.css

@@ -47,3 +47,10 @@
   border-radius: 2px;
   font-size: 1.2rem;
 }
+
+:local(.Mobile-Container) {
+  height: 500px;
+  overflow-y: scroll;
+  width: 296px;
+  margin: 0 auto;
+}

lib/Calendar.js

@@ -32,6 +32,10 @@ var _DayCellJs = require('./DayCell.js');
 
 var _DayCellJs2 = _interopRequireDefault(_DayCellJs);
 
+var _LangDicJs = require('./LangDic.js');
+
+var _LangDicJs2 = _interopRequireDefault(_LangDicJs);
+
 var _stylesJs = require('./styles.js');
 
 var _stylesJs2 = _interopRequireDefault(_stylesJs);
@@ -69,11 +73,12 @@ var Calendar = (function (_Component) {
     var theme = props.theme;
     var offset = props.offset;
     var firstDayOfWeek = props.firstDayOfWeek;
+    var shownDate = props.shownDate;
 
     var date = (0, _utilsParseInputJs2['default'])(props.date, format, 'startOf');
     var state = {
       date: date,
-      shownDate: (range && range['endDate'] || date).clone().add(offset, 'months'),
+      shownDate: (shownDate || range && range['endDate'] || date).clone().add(offset, 'months'),
       firstDayOfWeek: firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek()
     };
 
@@ -149,19 +154,24 @@ var Calendar = (function (_Component) {
       var month = _moment2['default'].months(shownDate.month());
       var year = shownDate.year();
       var styles = this.styles;
-      var onlyClasses = this.props.onlyClasses;
+      var _props4 = this.props;
+      var onlyClasses = _props4.onlyClasses;
+      var lang = _props4.lang;
+      var showMonthArrow = _props4.showMonthArrow;
+
+      month = lang ? _LangDicJs2['default'][lang][month.toLowerCase()] : month;
 
       return _react2['default'].createElement(
         'div',
         { style: onlyClasses ? undefined : styles['MonthAndYear'], className: classes.monthAndYearWrapper },
-        _react2['default'].createElement(
+        showMonthArrow ? _react2['default'].createElement(
           'button',
           {
             style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'left' }),
             className: classes.prevButton,
             onClick: this.changeMonth.bind(this, -1) },
           _react2['default'].createElement('i', { style: onlyClasses ? undefined : _extends({}, styles['MonthArrow'], styles['MonthArrowPrev']) })
-        ),
+        ) : null,
         _react2['default'].createElement(
           'span',
           null,
@@ -181,14 +191,14 @@ var Calendar = (function (_Component) {
             year
           )
         ),
-        _react2['default'].createElement(
+        showMonthArrow ? _react2['default'].createElement(
           'button',
           {
             style: onlyClasses ? undefined : _extends({}, styles['MonthButton'], { float: 'right' }),
             className: classes.nextButton,
             onClick: this.changeMonth.bind(this, +1) },
           _react2['default'].createElement('i', { style: onlyClasses ? undefined : _extends({}, styles['MonthArrow'], styles['MonthArrowNext']) })
-        )
+        ) : null
       );
     }
   }, {
@@ -197,11 +207,13 @@ var Calendar = (function (_Component) {
       var dow = this.state.firstDayOfWeek;
       var weekdays = [];
       var styles = this.styles;
-      var onlyClasses = this.props.onlyClasses;
+      var _props5 = this.props;
+      var onlyClasses = _props5.onlyClasses;
+      var lang = _props5.lang;
 
       for (var i = dow; i < 7 + dow; i++) {
         var day = _moment2['default'].weekdaysMin(i);
-
+        day = lang ? _LangDicJs2['default'][lang][day.toLowerCase()] : day;
         weekdays.push(_react2['default'].createElement(
           'span',
           { style: onlyClasses ? undefined : styles['Weekday'], className: classes.weekDay, key: day },
@@ -218,12 +230,13 @@ var Calendar = (function (_Component) {
 
       // TODO: Split this logic into smaller chunks
       var styles = this.styles;
-      var _props4 = this.props;
-      var range = _props4.range;
-      var minDate = _props4.minDate;
-      var maxDate = _props4.maxDate;
-      var format = _props4.format;
-      var onlyClasses = _props4.onlyClasses;
+      var _props6 = this.props;
+      var range = _props6.range;
+      var minDate = _props6.minDate;
+      var maxDate = _props6.maxDate;
+      var format = _props6.format;
+      var onlyClasses = _props6.onlyClasses;
+      var disableDaysBeforeToday = _props6.disableDaysBeforeToday;
 
       var shownDate = this.getShownDate();
       var _state = this.state;
@@ -255,7 +268,13 @@ var Calendar = (function (_Component) {
       // Current month's days
       for (var i = 1; i <= dayCount; i++) {
         var dayMoment = shownDate.clone().date(i);
-        days.push({ dayMoment: dayMoment });
+        // set days before today to isPassive
+        var _today = (0, _moment2['default'])();
+        if (disableDaysBeforeToday && Number(dayMoment.diff(_today, "days")) <= -1) {
+          days.push({ dayMoment: dayMoment, isPassive: true });
+        } else {
+          days.push({ dayMoment: dayMoment });
+        }
       }
 
       // Next month's days
@@ -298,9 +317,9 @@ var Calendar = (function (_Component) {
     key: 'render',
     value: function render() {
       var styles = this.styles;
-      var _props5 = this.props;
-      var onlyClasses = _props5.onlyClasses;
-      var classNames = _props5.classNames;
+      var _props7 = this.props;
+      var onlyClasses = _props7.onlyClasses;
+      var classNames = _props7.classNames;
 
       var classes = _extends({}, _stylesJs.defaultClasses, classNames);
 
@@ -332,11 +351,16 @@ var Calendar = (function (_Component) {
 Calendar.defaultProps = {
   format: 'DD/MM/YYYY',
   theme: {},
+  showMonthArrow: true,
+  disableDaysBeforeToday: false,
   onlyClasses: false,
   classNames: {}
 };
 
 Calendar.propTypes = {
+  showMonthArrow: _react.PropTypes.bool,
+  disableDaysBeforeToday: _react.PropTypes.bool,
+  lang: _react.PropTypes.string,
   sets: _react.PropTypes.string,
   range: _react.PropTypes.shape({
     startDate: _react.PropTypes.object,

lib/DateRange.js

@@ -173,6 +173,11 @@ var DateRange = (function (_Component) {
       var maxDate = _props.maxDate;
       var classNames = _props.classNames;
       var onlyClasses = _props.onlyClasses;
+      var lang = _props.lang;
+      var disableDaysBeforeToday = _props.disableDaysBeforeToday;
+      var offsetPositive = _props.offsetPositive;
+      var shownDate = _props.shownDate;
+      var showMonthArrow = _props.showMonthArrow;
       var _state = this.state;
       var range = _state.range;
       var link = _state.link;
@@ -193,10 +198,15 @@ var DateRange = (function (_Component) {
           classNames: classes }),
         (function () {
           var _calendars = [];
+          var _method = offsetPositive ? 'unshift' : 'push';
           for (var i = Number(calendars) - 1; i >= 0; i--) {
-            _calendars.push(_react2['default'].createElement(_CalendarJs2['default'], {
+            _calendars[_method](_react2['default'].createElement(_CalendarJs2['default'], {
+              showMonthArrow: showMonthArrow,
+              shownDate: shownDate,
+              disableDaysBeforeToday: disableDaysBeforeToday,
+              lang: lang,
               key: i,
-              offset: -i,
+              offset: offsetPositive ? i : -i,
               link: linkedCalendars && link,
               linkCB: _this.handleLinkChange.bind(_this),
               range: range,
@@ -224,6 +234,7 @@ DateRange.defaultProps = {
   format: 'DD/MM/YYYY',
   calendars: 2,
   onlyClasses: false,
+  offsetPositive: false,
   classNames: {}
 };
 
@@ -242,6 +253,7 @@ DateRange.propTypes = {
   onInit: _react.PropTypes.func,
   onChange: _react.PropTypes.func,
   onlyClasses: _react.PropTypes.bool,
+  offsetPositive: _react.PropTypes.bool,
   classNames: _react.PropTypes.object
 };
 

lib/LangDic.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+exports['default'] = {
+  'cn': { // chinese
+    'january': '一月',
+    'february': '二月',
+    'march': '三月',
+    'april': '四月',
+    'may': '五月',
+    'june': '六月',
+    'july': '七月',
+    'august': '八月',
+    'september': '九月',
+    'october': '十月',
+    'november': '十一月',
+    'december': '十二月',
+    'su': '日',
+    'mo': '一',
+    'tu': '二',
+    'we': '三',
+    'th': '四',
+    'fr': '五',
+    'sa': '六'
+  },
+  'jp': { // japanese
+    'january': 'むつき',
+    'february': 'きさらぎ',
+    'march': 'やよい',
+    'april': 'うづき',
+    'may': 'さつき',
+    'june': 'みなづき',
+    'july': 'ふみづき',
+    'august': 'はづき',
+    'september': 'ながつき',
+    'october': 'かんなづき',
+    'november': 'しもつき',
+    'december': 'しわす',
+    'su': '日',
+    'mo': '月',
+    'tu': '火',
+    'we': '水',
+    'th': '木',
+    'fr': '金',
+    'sa': '土'
+  }
+};
+module.exports = exports['default'];