- {showIcon && icon}
+
+ {showIcon &&
+ openDatePicker()} />
+ }
);
-}
-;
+};
export default TMDatePicker;
TMDatePicker.propTypes = {
value: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
onChange: PropTypes.func.isRequired,
- type: PropTypes.string.isRequired,
selected: PropTypes.instanceOf(Date),
showMonthDropdown: PropTypes.bool,
showYearDropdown: PropTypes.bool,
placeholderText: PropTypes.string,
selectsRange: PropTypes.bool,
showIcon: PropTypes.bool,
- icon: PropTypes.element,
+ useStandardInputWidth: PropTypes.bool,
+ condensed: PropTypes.bool,
isClearable: PropTypes.bool,
showTimeSelect: PropTypes.bool,
excludeDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
@@ -79,7 +89,8 @@ TMDatePicker.defaultProps = {
placeholderText: 'Select Date',
selectsRange: false,
showIcon: false,
- icon:
,
+ useStandardInputWidth: false,
+ condensed: false,
isClearable: false,
showTimeSelect: false,
excludeDates: [],
diff --git a/src/sass/_common.scss b/src/sass/_common.scss
index 14b8d43ce9..0936158757 100644
--- a/src/sass/_common.scss
+++ b/src/sass/_common.scss
@@ -87,9 +87,13 @@ $values in $filters-sizing-config {
}
.picky,
- .tm-datepicker-wrapper {
+ .react-datepicker-wrapper {
color: $color-black;
- width: $picky-width;
+ width: $picky-width !important;
+ }
+
+ .tm-datepicker {
+ width: auto;
}
}
}
diff --git a/src/sass/_datePicker.scss b/src/sass/_datePicker.scss
index a04c2e0be8..b5dbce0cee 100644
--- a/src/sass/_datePicker.scss
+++ b/src/sass/_datePicker.scss
@@ -43,8 +43,6 @@
}
-$date-picker-width: 300px;
-
.date-wrapper-react {
padding-left: 10px;
@@ -67,7 +65,7 @@ $date-picker-width: 300px;
.fa-times-circle {
color: $color-red;
font-size: 20px;
- left: $date-picker-width - 50;
+ left: $standard-input-width - 50;
position: relative;
top: 0;
z-index: 9;
@@ -81,7 +79,7 @@ $date-picker-width: 300px;
.react-datepicker-wrapper,
.react-datepicker__input-container {
margin-inline-start: -22px;
- width: $date-picker-width !important;
+ width: $standard-input-width !important;
>* {
cursor: pointer !important;
@@ -132,7 +130,7 @@ $date-picker-width: 300px;
}
}
-.tm-datepicker-wrapper {
+.tm-datepicker-wrapper-1 {
width: 100%;
.tm-datepicker::placeholder {
@@ -166,8 +164,141 @@ $date-picker-width: 300px;
}
}
-.form-date-picker {
+.tm-datepicker {
+ width: 100%;
+
+ // Date Icons: Calendar
+ .fa-calendar {
+ color: $blue-primary;
+ font-size: 20px;
+ left: 13px;
+ position: relative;
+ top: 0px;
+ z-index: 9;
+ cursor: pointer !important;
+
+ &:before {
+ content: "\f133" !important;
+ }
+ }
+
+ // Date Icons: Clear Button
+ .react-datepicker__close-icon {
+ padding: 0px;
+ margin: 0px 10px 0px 0px;
+
+ &::after {
+ font-size: 20px;
+ color: $alert-red;
+ line-height: unset;
+ background-color: transparent;
+ }
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+
+ // Date Input
.react-datepicker-wrapper {
- width: 300px;
+ width: $standard-input-width !important;
+
+ input {
+ cursor: pointer !important;
+
+ &::placeholder {
+ color: $bg-gray-dark-2;
+ }
+ }
+ }
+
+ // Date Popper
+ .react-datepicker-popper {
+ z-index: 10;
+
+ .react-datepicker {
+ font-size: 14px;
+ }
+
+ // Date Popper: Left and Right Arrows
+ .react-datepicker__navigation {
+ border: none;
+ top: .5em;
+ border: 0.45em solid transparent;
+
+ .react-datepicker__navigation--previous {
+ left: 10px;
+ }
+
+ .react-datepicker__navigation--next {
+ right: 10px;
+ }
+
+ .react-datepicker__navigation-icon::before {
+ border-color: $primary-blue;
+ }
+ }
+
+ // Date Popper: Month and Year Dropdowns
+ .react-datepicker__header {
+ padding-top: 1.8em;
+
+ .react-datepicker__current-month {
+ font-size: 14px;
+ }
+ }
+
+ // Date Popper: Calendar Select
+ .react-datepicker__month {
+ margin: 0.4em 1em;
+
+ .react-datepicker__day-name,
+ .react-datepicker__day {
+ width: 1.9em;
+ line-height: 1.9em;
+ margin: 0.166em;
+ }
+ }
+
+ }
+
+ // Use Calendar Icon
+ &.show-icon {
+ input {
+ padding-inline-start: 42px;
+ }
+
+ .react-datepicker-wrapper,
+ .react-datepicker__input-container {
+ margin-inline-start: -9px;
+ }
+ }
+
+ // Use Condensed Styling (Typical for Filters)
+ &.condensed {
+ &.show-icon {
+ .fa-calendar {
+ font-size: 15px;
+ left: 12px;
+ }
+
+ .react-datepicker__input-container {
+ margin-inline-start: -5px;
+
+ input {
+ padding-inline-start: 36px;
+ }
+ }
+ }
+
+ .react-datepicker__input-container {
+ margin-top: 3px;
+
+ input {
+ font-size: 13px;
+ height: 28px;
+ border: 1px solid $bg-gray-dark-2;
+ }
+ }
}
}
diff --git a/src/sass/_positionContent.scss b/src/sass/_positionContent.scss
index bf4cb8bb5a..81eedaee2c 100644
--- a/src/sass/_positionContent.scss
+++ b/src/sass/_positionContent.scss
@@ -333,18 +333,16 @@
}
}
- $select-width: 300px;
-
.position-form--inputs {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax($select-width + 50, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax($standard-input-width + 50, 1fr));
.position-form--label-input-container {
align-self: end;
select,
input {
- width: $select-width;
+ width: $standard-input-width;
}
.react-datepicker {
@@ -362,7 +360,7 @@
select,
input {
- width: $select-width;
+ width: $standard-input-width;
}
}
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 865934e85e..7fbee6cd6d 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -420,6 +420,8 @@ $filters-sizing-config: (
),
);
+$standard-input-width: 300px;
+
//**
//* Loading Animation Times
//*