Skip to content

Commit

Permalink
Merge pull request #1603 from bring/datepicker-background
Browse files Browse the repository at this point in the history 
Datepicker background
  • Loading branch information
@hellehi
hellehi authored May 10, 2021
2 parents 290eb7f + 8209a4d commit 88d8643
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 48 deletions.
22 changes: 10 additions & 12 deletions src/shared/components/datepicker/Datepicker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@
<div class="hw-datepicker__inner">
<input type="text" readonly="readonly" class="hw-input" placeholder="Select a date" />
<i class="hw-datepicker__icon fas fa-calendar-alt"></i>
<!-- Placeholder when native datepicker is used -->
<span class="hw-placeholder">Select a date</span>
</div>
<div class="hw-error hw-error--align-left hw-error--is-hidden">You must select a date</div>
</label>
Expand All @@ -40,8 +38,6 @@
<div class="hw-datepicker__inner">
<input type="text" readonly="readonly" class="hw-input hw-input--error" placeholder="Select a date" />
<i class="hw-datepicker__icon fas fa-calendar-alt"></i>
<!-- Placeholder when native datepicker is used -->
<span class="hw-placeholder">Select a date</span>
</div>
<div class="hw-error hw-error--align-left">You must select a date</div>
</label>
Expand All @@ -55,8 +51,6 @@
<div class="hw-datepicker__inner">
<input type="text" readonly="readonly" class="hw-input" placeholder="Select a date" disabled />
<i class="hw-datepicker__icon fas fa-calendar-alt"></i>
<!-- Placeholder when native datepicker is used -->
<span class="hw-placeholder">Select a date</span>
</div>
<div class="hw-error hw-error--align-left hw-error--is-hidden">You must select a date</div>
</label>
Expand All @@ -73,8 +67,6 @@
<div class="hw-datepicker__inner">
<input type="text" readonly="readonly" class="hw-input" placeholder="Select a date" />
<i class="hw-datepicker__icon fas fa-calendar-alt"></i>
<!-- Placeholder when native datepicker is used -->
<span class="hw-placeholder">Select a date</span>
</div>
<div class="hw-error hw-error--align-left hw-error--is-hidden">You must select a date</div>
</label>
Expand All @@ -88,8 +80,6 @@
<div class="hw-datepicker__inner">
<input type="text" readonly="readonly" class="hw-input hw-input--error" placeholder="Select a date" />
<i class="hw-datepicker__icon fas fa-calendar-alt"></i>
<!-- Placeholder when native datepicker is used -->
<span class="hw-placeholder">Select a date</span>
</div>
<div class="hw-error hw-error--align-left">You must select a date</div>
</label>
Expand All @@ -103,14 +93,22 @@
<div class="hw-datepicker__inner">
<input type="text" readonly="readonly" class="hw-input" placeholder="Select a date" />
<i class="hw-datepicker__icon fas fa-calendar-alt"></i>
<!-- Placeholder when native datepicker is used -->
<span class="hw-placeholder">Select a date</span>
</div>
<div class="hw-error hw-error--align-left hw-error--is-hidden">You must select a date</div>
</label>
```

#### Native

```html|span-3,plain,light
<label class="hw-label hw-datepicker ">
Date picker label
<div class="hw-datepicker__inner hw-datepicker__native">
<input type="date" class="hw-input" />
</div>
<div class="hw-error hw-error--align-left hw-error--is-hidden">You must select a date</div>
</label>
```

## Example javascript

Expand Down
77 changes: 57 additions & 20 deletions src/shared/components/datepicker/datepicker.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,16 @@

&__inner {
position: relative;
& input{

& input {
display: flex;
-webkit-appearance: none;
}
& .hw-placeholder{
& .hw-placeholder {
display: none;
}
&.hw-datepicker__native .hw-placeholder{

&.hw-datepicker__native .hw-placeholder {
display: block;
position: absolute;
top: 3px;
Expand All @@ -39,6 +41,9 @@
color: var(--hw-color-gray-dark);
padding: 10px 15px;
}
&.hw-datepicker__native .hw-datepicker__icon {
display: none;
}
}

/* Don't show the icon for error for datepicker */
Expand All @@ -49,15 +54,21 @@
&:focus-within {
color: var(--hw-color-primary-dark);
}
}

&:not(.hw-label--line) .hw-input:read-only {
background-color: var(--hw-color-gray-light-fill);
}

&:not(.hw-label--line) .hw-input:disabled {
background-color: var(--hw-color-gray-normal);
}
}

/*!
* Pikaday
* Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
*/


.pika-single {
z-index: var(--z-index--navbar-search);
display: block;
Expand All @@ -81,7 +92,6 @@
color: var(--hw-color-gray-dark);
text-transform: capitalize;
font-size: var(--hw-font-size-smaller);

}

/*
Expand Down Expand Up @@ -150,7 +160,6 @@ http://nicolasgallagher.com/micro-clearfix-hack/
opacity: 0;
}


.pika-prev,
.pika-next {
display: block;
Expand All @@ -164,18 +173,50 @@ http://nicolasgallagher.com/micro-clearfix-hack/
text-indent: 18px; /* hide text using text-indent trick, using width value (it's enough) */
white-space: nowrap;
overflow: hidden;
opacity: 1.0;
opacity: 1;
*position: absolute; /* IE7 */
*top: 0; /* IE7 */
background-color: var(--hw-color-gray-light-fill);
background-image:
/* Cut off the sharp ends of the arrow */
linear-gradient(45deg, transparent 72%, var(--hw-color-gray-light-fill) 0%), /* Bottom right corner of left arrow */
linear-gradient(135deg, var(--hw-color-gray-light-fill) 26%, transparent 26%), /* Top right corner of left arrow */
/* Draw the arrow */
linear-gradient(135deg, transparent 0, transparent 65%, var(--hw-color-gray-light-fill) 65%, var(--hw-color-gray-light-fill) 100%), /* Bottom left corner of left arrow */
linear-gradient(45deg, var(--hw-color-gray-light-fill) 0, var(--hw-color-gray-light-fill) 31%, var(--hw-color-gray-dark) 32%, var(--hw-color-gray-dark) 38%, transparent 39%, transparent 100%), /* Upper stroke of left arrow */
linear-gradient(135deg, transparent 0, transparent 58%, var(--hw-color-gray-dark) 59%, var(--hw-color-gray-dark) 65%, var(--hw-color-gray-light-fill) 66%, var(--hw-color-gray-light-fill) 100%); /* Bottom stroke of left arrow */
/* Cut off the sharp ends of the arrow */ linear-gradient(
45deg,
transparent 72%,
var(--hw-color-gray-light-fill) 0%
),
/* Bottom right corner of left arrow */
linear-gradient(
135deg,
var(--hw-color-gray-light-fill) 26%,
transparent 26%
),
/* Top right corner of left arrow */ /* Draw the arrow */
linear-gradient(
135deg,
transparent 0,
transparent 65%,
var(--hw-color-gray-light-fill) 65%,
var(--hw-color-gray-light-fill) 100%
),
/* Bottom left corner of left arrow */
linear-gradient(
45deg,
var(--hw-color-gray-light-fill) 0,
var(--hw-color-gray-light-fill) 31%,
var(--hw-color-gray-dark) 32%,
var(--hw-color-gray-dark) 38%,
transparent 39%,
transparent 100%
),
/* Upper stroke of left arrow */
linear-gradient(
135deg,
transparent 0,
transparent 58%,
var(--hw-color-gray-dark) 59%,
var(--hw-color-gray-dark) 65%,
var(--hw-color-gray-light-fill) 66%,
var(--hw-color-gray-light-fill) 100%
); /* Bottom stroke of left arrow */
}

.pika-prev {
Expand All @@ -194,9 +235,6 @@ http://nicolasgallagher.com/micro-clearfix-hack/
opacity: 1;
}




.pika-prev,
.is-rtl .pika-next {
float: left;
Expand Down Expand Up @@ -243,7 +281,6 @@ http://nicolasgallagher.com/micro-clearfix-hack/
text-decoration: none;
}


.pika-button {
cursor: pointer;
display: block;
Expand All @@ -254,7 +291,7 @@ http://nicolasgallagher.com/micro-clearfix-hack/
margin: 0;
width: 100%;
height: calc(280px * 0.14285714285714286);
padding: 0px ;
padding: 0px;
color: var(--hw-color-black);
font-size: var(--hw-font-size-smallest);
line-height: 15px;
Expand Down
16 changes: 0 additions & 16 deletions src/shared/components/datepicker/datepicker.example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@ const HWDatepicker = ({
_dateInput.parentElement.classList.add("hw-datepicker__native");
_dateInput.type = "date";
_dateInput.removeAttribute("readonly");
_dateInput.addEventListener("focus", toggleInputType);
_dateInput.addEventListener("blur", toggleInputType);
}
});
} else {
Expand All @@ -36,20 +34,6 @@ const HWDatepicker = ({
}
}

/**
* Method to handle placeholder when native datepicker is used
* @param {eventParam} e
*/
function toggleInputType(e) {
const _selParent = e.target.parentElement;
if (!e.target.value && e.type == "focus") {
_selParent.classList.remove("hw-datepicker__native");
}
if (!e.target.value && e.type == "blur") {
_selParent.classList.add("hw-datepicker__native");
}
}

init();
};

Expand Down

0 comments on commit 88d8643

Please sign in to comment.