Merge pull request #766 from Safelite/date-picker
WIP date picker and drop down test.
This commit is contained in:
bmauger
GitHub
commit
1a9b284478
3 changed files with 466 additions and 0 deletions
1
src/common-components/date-picker/date-picker-spec.js
Normal file
1
src/common-components/date-picker/date-picker-spec.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
459
src/common-components/date-picker/date-picker.vue
Normal file
459
src/common-components/date-picker/date-picker.vue
Normal file
|
|
@ -0,0 +1,459 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<fieldset>
|
||||
<legend class="d-flex justify-content-center">Date Picker</legend>
|
||||
<div class="grid-container">
|
||||
<!-- Do the days of the weeek need to be read? -->
|
||||
<div class="grid-item"><span class="sr-only">Sunday</span>S</div>
|
||||
<div class="grid-item"><span class="sr-only">Monday</span>M</div>
|
||||
<div class="grid-item"><span class="sr-only">Tuesday</span>T</div>
|
||||
<div class="grid-item"><span class="sr-only">Wednesday</span>W</div>
|
||||
<div class="grid-item"><span class="sr-only">Thursday</span>T</div>
|
||||
<div class="grid-item"><span class="sr-only">Friday</span>F</div>
|
||||
<div class="grid-item"><span class="sr-only">Saturday</span>S</div>
|
||||
<div class="grid-item radio-wrapper past-day">
|
||||
<input type="radio" name="day-of-month" id="thirtypast" />
|
||||
<label for="thirtypast"><span>30</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper past-day">
|
||||
<input type="radio" name="day-of-month" id="thirtyonepast" />
|
||||
<label for="thirtyonepast"><span>31</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day first-of-month">
|
||||
<div v-if="isFirstDayOfMonth" class="current-month">OCT</div>
|
||||
<input type="radio" name="day-of-month" id="one" />
|
||||
<label for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="two" />
|
||||
<label for="two"><span>2</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="three" />
|
||||
<label for="three"><span>3</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day" :class="[isCurrentDay ? 'current-day' : '']">
|
||||
<div v-if="isCurrentDayDot" class="current-day-dot"></div>
|
||||
<input type="radio" name="day-of-month" id="four" />
|
||||
<label for="four"><span>4</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="five" />
|
||||
<label for="five"><span>5</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="six" />
|
||||
<label for="six"><span>6</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="seven" />
|
||||
<label for="seven"><span>7</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="eight" />
|
||||
<label for="eight"><span>8</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="nine" />
|
||||
<label for="nine"><span>9</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="ten" />
|
||||
<label for="ten"><span>10</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="eleven" />
|
||||
<label for="eleven"><span>11</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twelve" />
|
||||
<label for="twelve"><span>12</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="thirteen" />
|
||||
<label for="thirteen"><span>13</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="fourteen" />
|
||||
<label for="fourteen"><span>17</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="fifteen" />
|
||||
<label for="fifteen"><span>15</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="sixteen" />
|
||||
<label for="sixteen"><span>16</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="seventeen" />
|
||||
<label for="seventeen"><span>17</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="eighteen" />
|
||||
<label for="eighteen"><span>18</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="nineteen" />
|
||||
<label for="nineteen"><span>19</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twenty" />
|
||||
<label for="twenty"><span>20</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentyone" />
|
||||
<label for="twentyone"><span>21</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentytwo" />
|
||||
<label for="twentytwo"><span>22</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentythree" />
|
||||
<label for="twentythree"><span>23</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentyfour" />
|
||||
<label for="twentyfour"><span>24</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentyfive" />
|
||||
<label for="twentyfive"><span>25</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentysix" />
|
||||
<label for="twentysix"><span>26</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentyseven" />
|
||||
<label for="twentyseven"><span>27</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentyeight" />
|
||||
<label for="twentyeight"><span>28</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="twentynine" />
|
||||
<label for="twentynine"><span>29</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="thirty" />
|
||||
<label for="thirty"><span>30</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper highlighted-day">
|
||||
<input type="radio" name="day-of-month" id="thirtyone" />
|
||||
<label for="thirtyone"><span>31</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<input type="radio" name="day-of-month" id="onefuture" />
|
||||
<label for="onefuture"><span>1</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper future-day">
|
||||
<input type="radio" name="day-of-month" id="twofuture" />
|
||||
<label for="twofuture"><span>2</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<form class="w-100 d-flex justify-content-center mt-5">
|
||||
<input type="date">
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "datePicker",
|
||||
data() {
|
||||
return {
|
||||
dayOfWeek: "Tuesday",
|
||||
dayOfMonth: "1st",
|
||||
pastMonth: "October",
|
||||
isFirstDayOfMonth: true,
|
||||
isCurrentDay: true,
|
||||
isCurrentDayDot: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
//max-width: 341px;
|
||||
label {
|
||||
display: initial; //Override Bootstrap default
|
||||
}
|
||||
#availableDates label:nth-child(14n):after {
|
||||
content: "\a";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
margin: 0 auto;
|
||||
max-width: 341px;
|
||||
display: grid;
|
||||
grid-gap: 4px;
|
||||
grid-template-columns: auto auto auto auto auto auto auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.grid-item {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.radio-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
|
||||
.current-day-dot {
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
&.first-of-month {
|
||||
.current-month {
|
||||
position: absolute;
|
||||
font-size: 9px;
|
||||
top: 4px;
|
||||
color: #1574a1;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlighted-day {
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
// opacity: 0;
|
||||
height: 0.1px;
|
||||
width: 0.1px;
|
||||
|
||||
+ label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
color: #1574a1;
|
||||
|
||||
span {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #1574a1;
|
||||
background-color: #e4f1f7;
|
||||
color: #1574a1;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label::after {
|
||||
background: #1574a1;
|
||||
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
||||
color: #fff;
|
||||
}
|
||||
+ label span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
+ label::before {
|
||||
background-color: #1574a1;
|
||||
}
|
||||
+ label span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.past-day {
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
height: 0.1px;
|
||||
width: 0.1px;
|
||||
|
||||
+ label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
color: #8E9292;
|
||||
|
||||
span {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
color: #1574a1;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label::after {
|
||||
background: #1574a1;
|
||||
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
||||
color: #fff;
|
||||
}
|
||||
+ label span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
+ label::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
+ label span {
|
||||
color: #1574a1;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
+ label::before {
|
||||
background-color: #1574a1;
|
||||
}
|
||||
+ label span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.future-day {
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
height: 0.1px;
|
||||
width: 0.1px;
|
||||
|
||||
+ label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
color: #4D5151;
|
||||
|
||||
span {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
color: #1574a1;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current-day {
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
// opacity: 0;
|
||||
height: 0.1px;
|
||||
width: 0.1px;
|
||||
|
||||
&:after {
|
||||
content: "\A";
|
||||
width:4px;
|
||||
height:4px;
|
||||
border-radius:50%;
|
||||
background: #1574a1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label::after {
|
||||
background: #1574a1;
|
||||
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
||||
color: #fff;
|
||||
}
|
||||
+ label span {
|
||||
color: #fff;
|
||||
}
|
||||
&:after {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
position: relative;
|
||||
top: -.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -23,6 +23,7 @@ import { applicationConfig } from "../constants/application-config";
|
|||
|
||||
// Components
|
||||
import quote from "@/layouts/quote/quote.vue";
|
||||
import datePicker from "@/common-components/date-picker/date-picker.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -30,6 +31,11 @@ const routes = [
|
|||
name: "quote",
|
||||
component: quote,
|
||||
},
|
||||
{
|
||||
path: "/date-picker", // This is a temporary route for testing.
|
||||
name: "date-picker",
|
||||
component: datePicker,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "root",
|
||||
|
|
|
|||
Loading…
Reference in a new issue