react-daypicker - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

lib/DayPicker.js

@@ -32,5 +32,5 @@ "use strict";
 
-var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'Octoboer', 'November', 'December'];
-var DAYS_LONG = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-var DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "Octoboer", "November", "December"];
+var DAYS_LONG = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var DAYS_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
@@ -87,8 +87,8 @@ var DayPicker =
       return _react.default.createElement("td", {
-        className: ['day', isActive ? 'active' : null, !day ? 'empty' : null, isToday ? 'today' : null].filter(function (v) {
+        className: ["day", isActive ? "active" : null, !day ? "empty" : null, isToday ? "today" : null].filter(function (v) {
           return v;
-        }).join(' '),
+        }).join(" "),
         key: "".concat(year, ".").concat(month, ".day.").concat(index),
         onClick: _this.onDayClick(day)
-      }, day ? day.getDate() : '');
+      }, day ? day.getDate() : "");
     });
@@ -95,0 +95,0 @@

package.json

 {
   "name": "react-daypicker",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A simple datepicker inspired by Pikaday.",
@@ -5,0 +5,0 @@ "main": "lib/DayPicker.js",

README.md

@@ -74,2 +74,28 @@ # react-daypicker
 
+## Passing in custom month and day names
+
+A couple of optional props allow passing in custom month, day and short day names. There isn't any
+error handling around these props yet so be sure that you pass in 12 months and 7 days. The props are:
+
+### monthNames
+
+Set `monthNames` prop to an Array of 12 strings which will be used for the month names.
+
+Default: `['January', ... , 'December']`
+
+### longDayNames
+
+Set `longDayNames` prop to an Array of 7 strings which will be used for the long day names. Note that
+you need to hover over the short day name to see this long day name. Note the first day must be the
+equivalent of Sunday.
+
+Default: `['Sunday', ..., 'Saturday']`
+
+### shortDayNames
+
+Set `shortDayNames` prop to an Array of 7 strings which will be used for the short day names.  Note
+the first day must be the equivalent of Sunday.
+
+Default: `['Sun', ..., 'Sat']`
+
 ## Options on styling
@@ -76,0 +102,0 @@

src/DayPicker.js

@@ -1,37 +0,29 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 const MONTHS = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'Octoboer',
-  'November',
-  'December',
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "Octoboer",
+  "November",
+  "December"
 ];
 
 const DAYS_LONG = [
-  'Sunday',
-  'Monday',
-  'Tuesday',
-  'Wednesday',
-  'Thursday',
-  'Friday',
-  'Saturday',
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday"
 ];
 
-const DAYS_SHORT = [
-  'Sun',
-  'Mon',
-  'Tue',
-  'Wed',
-  'Thu',
-  'Fri',
-  'Sat',
-];
+const DAYS_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
@@ -48,3 +40,3 @@ export default class DayPicker extends Component {
       today: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
-      year: now.getFullYear(),
+      year: now.getFullYear()
     };
@@ -107,10 +99,6 @@ }
     this.setState({
-      month: month !== 0
-        ? month - 1
-        : 11,
-      year: month !== 0
-        ? year
-        : year - 1,
-    })
-  }
+      month: month !== 0 ? month - 1 : 11,
+      year: month !== 0 ? year : year - 1
+    });
+  };
 
@@ -121,17 +109,13 @@ nextMonth = () => {
     this.setState({
-      month: month !== 11
-        ? month + 1
-        : 0,
-      year: month !== 11
-        ? year
-        : year + 1,
+      month: month !== 11 ? month + 1 : 0,
+      year: month !== 11 ? year : year + 1
     });
-  }
+  };
 
-  onDayClick = (day) => () => {
+  onDayClick = day => () => {
     this.props.onDayClick(day);
-  }
+  };
 
   renderDay = (day, index) => {
-    const { date, month, today, year} = this.state;
+    const { date, month, today, year } = this.state;
     const { active } = this.props;
@@ -144,17 +128,17 @@
       <td
-        className={
-          [
-            'day',
-            isActive ? 'active' : null,
-            !day ? 'empty' : null,
-            isToday ? 'today' : null,
-          ]
-            .filter(v => v)
-            .join(' ')
-        }
+        className={[
+          "day",
+          isActive ? "active" : null,
+          !day ? "empty" : null,
+          isToday ? "today" : null
+        ]
+          .filter(v => v)
+          .join(" ")}
         key={`${year}.${month}.day.${index}`}
         onClick={this.onDayClick(day)}
-      >{day ? day.getDate() : ''}</td>
+      >
+        {day ? day.getDate() : ""}
+      </td>
     );
-  }
+  };
 
@@ -165,9 +149,5 @@ renderWeek = (days, index) => {
     return (
-      <tr
-        key={`${year}.${month}.week.${index}`}
-      >
-        {days.map(this.renderDay)}
-      </tr>
+      <tr key={`${year}.${month}.week.${index}`}>{days.map(this.renderDay)}</tr>
     );
-  }
+  };
 
@@ -177,3 +157,5 @@ renderDayHeader(dayOfWeek) {
       <th scope="col">
-        <abbr title={this.longDayName(dayOfWeek)}>{this.shortDayName(dayOfWeek)}</abbr>
+        <abbr title={this.longDayName(dayOfWeek)}>
+          {this.shortDayName(dayOfWeek)}
+        </abbr>
       </th>
@@ -189,5 +171,11 @@ );
         <div className="header">
-          <div className="previous-month" onClick={this.previousMonth}>◀</div>
-          <div className="month-year">{this.longMonthName(month)} {year}</div>
-          <div className="next-month" onClick={this.nextMonth}>▶</div>
+          <div className="previous-month" onClick={this.previousMonth}>
+            ◀
+          </div>
+          <div className="month-year">
+            {this.longMonthName(month)} {year}
+          </div>
+          <div className="next-month" onClick={this.nextMonth}>
+            ▶
+          </div>
         </div>
@@ -206,5 +194,3 @@ <table>
           </thead>
-          <tbody>
-            {this.weeks.map(this.renderWeek)}
-          </tbody>
+          <tbody>{this.weeks.map(this.renderWeek)}</tbody>
         </table>
@@ -211,0 +197,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65560

increased by1.25%

Number of lines in readme file

133

increased by24.3%

Worsened metrics

Lines of code

382

decreased by-3.54%

No dependency changes