Creating a date picker component that utilizes a calendar styled with CSS grid has been successful, except in IE11 where all elements appear in the top left corner. Is there a specific CSS property for IE11 that could fix this, or is it simply not compatible with IE11?
View in Chrome:
View in IE11
Snippet of the code:
.date-picker .dates .days {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days-of-week {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[7];
grid-template-columns: repeat(7, 1fr);
justify-items: center;
}
.date-picker .dates .days .day {
margin-top: .5em;
margin-bottom: .5em;
height: 36px;
width: 36px;
}
.date-picker .dates .days-of-week .day {
height: 36px;
width: 36px;
}<div
id="date-picker"
class="date-picker relative cursor-pointer input select text-1_25 active"
min="2021-04-28"
max="2021-05-28"
>
<div
class="
dates
hidden
absolute
left-0
right-0
px-24
py-16
bg-white
rounded-16
shadow-xl
active
"
>
<div
class="
days-of-week
border-b-solid border-gray-a9acc4 border-b
text-gray-65657b
py-8
"
>
<div class="day">S</div>
<div class="day">M</div>
<div class="day">T</div>
<div class="day">W</div>
<div class="day">T</div>
<div class="day">F</div>
<div class="day">S</div>
</div>
<div class="days">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day selected">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day inactive">29</div>
<div class="day inactive">30</div>
<div class="day inactive">31</div>
</div>
</div>
</div>