add wrapperClassName and add width style 100% (#1557)

* add wrapperClassName and add width style 100% * revert some unnessary changes * enlarge time container to zh locale * fix duplicate isValidDateSelection
Hacker0x01 · Aug 12, 2019 · 6a3280e · 6a3280e
1 parent 65f1e0f
commit 6a3280e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/src/index.jsx b/src/index.jsx
@@ -163,6 +163,7 @@ export default class DatePicker extends React.Component {
     timeInputLabel: PropTypes.string,
     renderCustomHeader: PropTypes.func,
     renderDayContents: PropTypes.func,
+    wrapperClassName: PropTypes.string,
     inlineFocusSelectedMonth: PropTypes.bool,
     onDayMouseEnter: PropTypes.func,
     onMonthMouseLeave: PropTypes.func
@@ -200,6 +201,7 @@ export default class DatePicker extends React.Component {
       previousMonthButtonLabel: "Previous Month",
       nextMonthButtonLabel: "Next month",
       timeInputLabel: "Time",
+
       renderDayContents(date) {
         return date;
       },
@@ -246,10 +248,10 @@ export default class DatePicker extends React.Component {
     this.props.openToDate
       ? this.props.openToDate
       : this.props.selectsEnd && this.props.startDate
-        ? this.props.startDate
-        : this.props.selectsStart && this.props.endDate
-          ? this.props.endDate
-          : newDate();
+      ? this.props.startDate
+      : this.props.selectsStart && this.props.endDate
+      ? this.props.endDate
+      : newDate();
 
   calcInitialState = () => {
     const defaultPreSelection = this.getPreSelection();
@@ -259,8 +261,8 @@ export default class DatePicker extends React.Component {
       minDate && isBefore(defaultPreSelection, minDate)
         ? minDate
         : maxDate && isAfter(defaultPreSelection, maxDate)
-          ? maxDate
-          : defaultPreSelection;
+        ? maxDate
+        : defaultPreSelection;
     return {
       open: this.props.startOpen || false,
       preventFocus: false,
@@ -703,8 +705,8 @@ export default class DatePicker extends React.Component {
       typeof this.props.value === "string"
         ? this.props.value
         : typeof this.state.inputValue === "string"
-          ? this.state.inputValue
-          : safeDateFormat(this.props.selected, this.props);
+        ? this.state.inputValue
+        : safeDateFormat(this.props.selected, this.props);
 
     return React.cloneElement(customInput, {
       [customInputRef]: input => {
@@ -772,6 +774,7 @@ export default class DatePicker extends React.Component {
     return (
       <PopperComponent
         className={this.props.popperClassName}
+        wrapperClassName={this.props.wrapperClassName}
         hidePopper={!this.isCalendarOpen()}
         popperModifiers={this.props.popperModifiers}
         targetComponent={

diff --git a/src/popper_component.jsx b/src/popper_component.jsx
@@ -8,6 +8,7 @@ export const popperPlacementPositions = placements;
 export default class PopperComponent extends React.Component {
   static propTypes = {
     className: PropTypes.string,
+    wrapperClassName: PropTypes.string,
     hidePopper: PropTypes.bool,
     popperComponent: PropTypes.element,
     popperModifiers: PropTypes.object, // <datepicker/> props
@@ -35,6 +36,7 @@ export default class PopperComponent extends React.Component {
   render() {
     const {
       className,
+      wrapperClassName,
       hidePopper,
       popperComponent,
       popperModifiers,
@@ -70,11 +72,16 @@ export default class PopperComponent extends React.Component {
       popper = React.createElement(this.props.popperContainer, {}, popper);
     }
 
+    const wrapperClasses = classnames(
+      "react-datepicker-wrapper",
+      wrapperClassName
+    );
+
     return (
       <Manager>
         <Reference>
           {({ ref }) => (
-            <div ref={ref} className="react-datepicker-wrapper">
+            <div ref={ref} className={wrapperClasses}>
               {targetComponent}
             </div>
           )}

diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -3,6 +3,8 @@
 
 .react-datepicker-wrapper {
   display: inline-block;
+  padding: 0;
+  border: 0;
 }
 
 .react-datepicker {
@@ -244,7 +246,7 @@
 .react-datepicker__time-container {
   float: right;
   border-left: 1px solid $datepicker__border-color;
-  width: 70px;
+  width: 85px;
 
   &--with-today-button {
     display: inline;
@@ -260,7 +262,7 @@
     background: white;
 
     .react-datepicker__time-box {
-      width: 70px;
+      width: 85px;
       overflow-x: hidden;
       margin: 0 auto;
       text-align: center;
@@ -446,6 +448,7 @@
 .react-datepicker__input-container {
   position: relative;
   display: inline-block;
+  width: 100%;
 }
 
 .react-datepicker__year-read-view,