459 lines
14 KiB
Vue
459 lines
14 KiB
Vue
<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>
|