WIP date picker.
This commit is contained in:
Bryan Mauger
parent
bdfb4bbf8a
commit
eea0b883a7
1 changed files with 147 additions and 86 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<div id="app">
|
||||
<fieldset>
|
||||
<legend class=" sr-only">Date Picker</legend>
|
||||
<div class="grid-container">
|
||||
<div class="calendar-grid-container">
|
||||
<div class="month-year body-small d-flex align-items-center ps-3 small">{{currentMonth}} {{currentYear}}</div>
|
||||
<div class="legend caption d-flex align-items-center justify-content-end"><span class="legend-circle me-1"></span> = Available</div>
|
||||
<div class="nav-back ps-3"><button></button></div>
|
||||
|
|
@ -15,147 +15,146 @@
|
|||
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
|
||||
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
|
||||
<div class="grid-item caption"><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 class="grid-item radio-wrapper">
|
||||
<input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtypast" />
|
||||
<label class="past-day" for="thirtypast"><span>30</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="thirtyonepast" />
|
||||
<label for="thirtyonepast"><span>31</span></label>
|
||||
<input tabindex="-2" hidden type="radio" name="day-of-month" id="thirtyonepast" />
|
||||
<label class="past-day" for="thirtyonepast"><span>31</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<!-- <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>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="one" />
|
||||
<label class="highlighted-day selectable-day" for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
|
||||
<div v-if="isFirstDayOfMonth" class="current-month first-of-month">OCT</div>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="two" />
|
||||
<label for="two"><span>2</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="two" />
|
||||
<label class="highlighted-day selectable-day" :class="[isCurrentDay ? 'current-day' : '']" for="two"><span>2</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="three" />
|
||||
<label for="three"><span>3</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper" :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>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="three" />
|
||||
<label class="highlighted-day selectable-day" for="three"><span>3</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="five" />
|
||||
<label for="five"><span>5</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="four" />
|
||||
<label class="highlighted-day selectable-day" for="four"><span>4</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="six" />
|
||||
<label for="six"><span>6</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="five" />
|
||||
<label class="highlighted-day selectable-day" for="five"><span>5</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="seven" />
|
||||
<label for="seven"><span>7</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="six" />
|
||||
<label class="highlighted-day selectable-day" for="six"><span>6</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="eight" />
|
||||
<label for="eight"><span>8</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="seven" />
|
||||
<label class="highlighted-day selectable-day" for="seven"><span>7</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="nine" />
|
||||
<label for="nine"><span>9</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="eight" />
|
||||
<label class="highlighted-day selectable-day" for="eight"><span>8</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="ten" />
|
||||
<label for="ten"><span>10</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nine" />
|
||||
<label class="highlighted-day selectable-day" for="nine"><span>9</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="eleven" />
|
||||
<label for="eleven"><span>11</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="ten" />
|
||||
<label class="highlighted-day selectable-day" for="ten"><span>10</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twelve" />
|
||||
<label for="twelve"><span>12</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="eleven" />
|
||||
<label class="highlighted-day selectable-day" for="eleven"><span>11</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="thirteen" />
|
||||
<label for="thirteen"><span>13</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twelve" />
|
||||
<label class="highlighted-day selectable-day" for="twelve"><span>12</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="fourteen" />
|
||||
<label for="fourteen"><span>17</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="thirteen" />
|
||||
<label class="highlighted-day selectable-day" for="thirteen"><span>13</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="fifteen" />
|
||||
<label for="fifteen"><span>15</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="fourteen" />
|
||||
<label class="highlighted-day selectable-day" for="fourteen"><span>17</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="sixteen" />
|
||||
<label for="sixteen"><span>16</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="fifteen" />
|
||||
<label class="highlighted-day selectable-day" for="fifteen"><span>15</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="seventeen" />
|
||||
<label for="seventeen"><span>17</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="sixteen" />
|
||||
<label class="highlighted-day selectable-day" for="sixteen"><span>16</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="eighteen" />
|
||||
<label for="eighteen"><span>18</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="seventeen" />
|
||||
<label class="highlighted-day selectable-day" for="seventeen"><span>17</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="nineteen" />
|
||||
<label for="nineteen"><span>19</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="eighteen" />
|
||||
<label class="highlighted-day selectable-day" for="eighteen"><span>18</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twenty" />
|
||||
<label for="twenty"><span>20</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="nineteen" />
|
||||
<label class="highlighted-day selectable-day" for="nineteen"><span>19</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentyone" />
|
||||
<label for="twentyone"><span>21</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twenty" />
|
||||
<label class="highlighted-day selectable-day" for="twenty"><span>20</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentytwo" />
|
||||
<label for="twentytwo"><span>22</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyone" />
|
||||
<label class="highlighted-day selectable-day" for="twentyone"><span>21</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentythree" />
|
||||
<label for="twentythree"><span>23</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentytwo" />
|
||||
<label class="highlighted-day selectable-day" for="twentytwo"><span>22</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentyfour" />
|
||||
<label for="twentyfour"><span>24</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentythree" />
|
||||
<label class="highlighted-day selectable-day" for="twentythree"><span>23</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentyfive" />
|
||||
<label for="twentyfive"><span>25</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyfour" />
|
||||
<label class="highlighted-day selectable-day" for="twentyfour"><span>24</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentysix" />
|
||||
<label for="twentysix"><span>26</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyfive" />
|
||||
<label class="highlighted-day selectable-day" for="twentyfive"><span>25</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentyseven" />
|
||||
<label for="twentyseven"><span>27</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentysix" />
|
||||
<label class="highlighted-day selectable-day" for="twentysix"><span>26</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentyeight" />
|
||||
<label for="twentyeight"><span>28</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyseven" />
|
||||
<label class="highlighted-day selectable-day" for="twentyseven"><span>27</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="twentynine" />
|
||||
<label for="twentynine"><span>29</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentyeight" />
|
||||
<label class="highlighted-day selectable-day" for="twentyeight"><span>28</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="thirty" />
|
||||
<label for="thirty"><span>30</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twentynine" />
|
||||
<label class="highlighted-day selectable-day" for="twentynine"><span>29</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input type="radio" name="day-of-month" id="thirtyone" />
|
||||
<label for="thirtyone"><span>31</span></label>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="thirty" />
|
||||
<label class="highlighted-day selectable-day" for="thirty"><span>30</span></label>
|
||||
</div>
|
||||
<div class="grid-item radio-wrapper">
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="thirtyone" />
|
||||
<label class="highlighted-day selectable-day" 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>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="onefuture" />
|
||||
<label class="future-day selectable-day" 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>
|
||||
<input tabindex="0" type="radio" name="day-of-month" id="twofuture" />
|
||||
<label class="future-day selectable-day" for="twofuture"><span>2</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -175,13 +174,14 @@ export default {
|
|||
isFirstDayOfMonth: true,
|
||||
isCurrentDay: true,
|
||||
isCurrentDayDot: true,
|
||||
isPastDay: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.grid-container {
|
||||
.calendar-grid-container {
|
||||
margin: 0 auto;
|
||||
max-width: 414px;
|
||||
display: grid;
|
||||
|
|
@ -208,7 +208,8 @@ export default {
|
|||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
.nav-back { grid-area: 1 / 6 / 2 / 7;
|
||||
.nav-back {
|
||||
grid-area: 1 / 6 / 2 / 7;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button {
|
||||
|
|
@ -221,7 +222,8 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
.nav-forward { grid-area: 1 / 7 / 2 / 8;
|
||||
.nav-forward {
|
||||
grid-area: 1 / 7 / 2 / 8;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button {
|
||||
|
|
@ -247,6 +249,11 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -257,8 +264,7 @@ export default {
|
|||
align-items: center;
|
||||
outline: none;
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
input[type="radio"] {
|
||||
position: absolute;; //override bootstrap
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
|
|
@ -271,18 +277,40 @@ export default {
|
|||
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
&.past-day {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: $gray-500;
|
||||
font-weight: normal;
|
||||
}
|
||||
&.current-day {
|
||||
&:after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
+ .first-of-month {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&:checked + label {
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
//font-weight: 500;
|
||||
background: $blue-100;
|
||||
}
|
||||
&:checked + label p,
|
||||
&:checked + label span {
|
||||
font-weight: 500;
|
||||
//font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.first-of-month {
|
||||
position: absolute;
|
||||
font-size: 9px;
|
||||
color: $blue;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -293,9 +321,41 @@ export default {
|
|||
height: 40px;
|
||||
min-width: 40px;
|
||||
border-radius: 50%;
|
||||
color: #1574a1;
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
|
||||
&.past-day {
|
||||
color: $gray-500;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.highlighted-day {
|
||||
color: $blue;
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
|
||||
&.current-day {
|
||||
&:after {
|
||||
content: '';
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
border-radius: 50%;
|
||||
background-color: $blue;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&.future-day {
|
||||
|
||||
}
|
||||
|
||||
&.selectable-day {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
&.small {
|
||||
|
|
@ -313,6 +373,7 @@ export default {
|
|||
+ p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue