<div class="date-filter data-date-filter" method="get">
<div class="date-filter__month">
<label class="date-filter__select-label" for="calendar-month-select">Month</label>
<select class="date-filter__select date-filter__select--month" name="date_month" id="calendar-month-select">
<option class="date-filter__select-option" value="january">January</option>
<option class="date-filter__select-option" value="February">February</option>
<option class="date-filter__select-option" value="march">March</option>
<option class="date-filter__select-option" value="april">April</option>
<option class="date-filter__select-option" value="may">May</option>
<option class="date-filter__select-option" value="june">June</option>
<option class="date-filter__select-option" value="july">July</option>
<option class="date-filter__select-option" value="august" selected>August</option>
<option class="date-filter__select-option" value="september">September</option>
<option class="date-filter__select-option" value="october">October</option>
<option class="date-filter__select-option" value="november">November</option>
<option class="date-filter__select-option" value="december">December</option>
</select>
</div>
<div class="date-filter__day">
<label class="date-filter__select-label" for="calendar-day-select">Day</label>
<select class="date-filter__select" name="date_day" id="calendar-day-select">
<option class="date-filter__select-option" value="1">1</option>
<option class="date-filter__select-option" value="2">2</option>
<option class="date-filter__select-option" value="3">3</option>
<option class="date-filter__select-option" value="4">4</option>
<option class="date-filter__select-option" value="5">5</option>
<option class="date-filter__select-option" value="6">6</option>
<option class="date-filter__select-option" value="7">7</option>
<option class="date-filter__select-option" value="8">8</option>
<option class="date-filter__select-option" value="9">9</option>
<option class="date-filter__select-option" value="10" selected>10</option>
<option class="date-filter__select-option" value="11">11</option>
<option class="date-filter__select-option" value="12">12</option>
<option class="date-filter__select-option" value="13">13</option>
<option class="date-filter__select-option" value="14">14</option>
<option class="date-filter__select-option" value="15">15</option>
<option class="date-filter__select-option" value="16">16</option>
<option class="date-filter__select-option" value="17">17</option>
<option class="date-filter__select-option" value="18">18</option>
<option class="date-filter__select-option" value="19">19</option>
<option class="date-filter__select-option" value="20">20</option>
<option class="date-filter__select-option" value="21">21</option>
<option class="date-filter__select-option" value="22">22</option>
<option class="date-filter__select-option" value="23">23</option>
<option class="date-filter__select-option" value="24">24</option>
<option class="date-filter__select-option" value="25">25</option>
<option class="date-filter__select-option" value="26">26</option>
<option class="date-filter__select-option" value="27">27</option>
<option class="date-filter__select-option" value="28">28</option>
<option class="date-filter__select-option" value="29">29</option>
<option class="date-filter__select-option" value="30">30</option>
<option class="date-filter__select-option" value="31">31</option>
</select>
</div>
<div class="date-filter__year">
<label class="date-filter__select-label" for="calendar-year-select">Year</label>
<select class="date-filter__select" name="date_year" id="calendar-year-select">
<option class="date-filter__select-option" value="2019" selected>2019</option>
<option class="date-filter__select-option" value="2020">2020</option>
<option class="date-filter__select-option" value="2021">2021</option>
</select>
</div>
</div>
{{ enqueue_script('date-filter') }}
<div class="date-filter data-date-filter" method="get">
<div class="date-filter__month">
<label class="date-filter__select-label" for="calendar-month-select">Month</label>
<select class="date-filter__select date-filter__select--month" name="date_month" id="calendar-month-select">
{% for month in filter.months %}
<option class="date-filter__select-option" value="{{ month.value }}"{{ month.selected ? " selected" }}>{{ month.label }}</option>
{% endfor %}
</select>
</div>
<div class="date-filter__day">
<label class="date-filter__select-label" for="calendar-day-select">Day</label>
<select class="date-filter__select" name="date_day" id="calendar-day-select">
{% for day in filter.days %}
<option class="date-filter__select-option" value="{{ day.value }}"{{ day.selected ? ' selected' }}>{{ day.label }}</option>
{% endfor %}
</select>
</div>
<div class="date-filter__year">
<label class="date-filter__select-label" for="calendar-year-select">Year</label>
<select class="date-filter__select" name="date_year" id="calendar-year-select">
{% for year in filter.years %}
<option class="date-filter__select-option" value="{{ year.value }}"{{ year.selected ? " selected" }}>{{ year.label }}</option>
{% endfor %}
</select>
</div>
</div>
{
"filter": {
"months": [
{
"label": "January",
"value": "january"
},
{
"label": "February",
"value": "February"
},
{
"label": "March",
"value": "march"
},
{
"label": "April",
"value": "april"
},
{
"label": "May",
"value": "may"
},
{
"label": "June",
"value": "june"
},
{
"label": "July",
"value": "july"
},
{
"label": "August",
"value": "august",
"selected": true
},
{
"label": "September",
"value": "september"
},
{
"label": "October",
"value": "october"
},
{
"label": "November",
"value": "november"
},
{
"label": "December",
"value": "december"
}
],
"days": [
{
"label": "1",
"value": "1"
},
{
"label": "2",
"value": "2"
},
{
"label": "3",
"value": "3"
},
{
"label": "4",
"value": "4"
},
{
"label": "5",
"value": "5"
},
{
"label": "6",
"value": "6"
},
{
"label": "7",
"value": "7"
},
{
"label": "8",
"value": "8"
},
{
"label": "9",
"value": "9"
},
{
"label": "10",
"value": "10",
"selected": true
},
{
"label": "11",
"value": "11"
},
{
"label": "12",
"value": "12"
},
{
"label": "13",
"value": "13"
},
{
"label": "14",
"value": "14"
},
{
"label": "15",
"value": "15"
},
{
"label": "16",
"value": "16"
},
{
"label": "17",
"value": "17"
},
{
"label": "18",
"value": "18"
},
{
"label": "19",
"value": "19"
},
{
"label": "20",
"value": "20"
},
{
"label": "21",
"value": "21"
},
{
"label": "22",
"value": "22"
},
{
"label": "23",
"value": "23"
},
{
"label": "24",
"value": "24"
},
{
"label": "25",
"value": "25"
},
{
"label": "26",
"value": "26"
},
{
"label": "27",
"value": "27"
},
{
"label": "28",
"value": "28"
},
{
"label": "29",
"value": "29"
},
{
"label": "30",
"value": "30"
},
{
"label": "31",
"value": "31"
}
],
"years": [
{
"label": "2019",
"value": "2019",
"selected": true
},
{
"label": "2020",
"value": "2020"
},
{
"label": "2021",
"value": "2021"
}
],
"submitButtonText": "View",
"cancelButtonText": "Clear"
},
"background": "light"
}
smallestBreakpoint = 588px
mediumBreakpoint = 700px
.date-filter
--backgroundImage url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8001 0.40006C12.1314 0.841888 12.0419 1.46869 11.6001 1.80006L6.00006 6.00006L0.400058 1.80006C-0.0417693 1.46869 -0.131312 0.841887 0.200059 0.400059C0.53143 -0.0417685 1.15823 -0.131312 1.60006 0.200059L6.00006 3.50006L10.4001 0.200059C10.8419 -0.131312 11.4687 -0.041768 11.8001 0.40006Z' fill='%23162F93'/%3E%3C/svg%3E")
--textColor grey500
align-items flex-end
display flex
flex-wrap wrap
gap 16px
width 100%
&__month
&__day
&__year
margin-bottom 8px
&__month
width 100%
+above(mediumBreakpoint)
width 45%
&__day
&__year
width 100%
+above(smallestBreakpoint)
width 48.5%
+above(mediumBreakpoint)
width 22%
&__select-label
@extends $label
color var(--textColor)
display block
padding 0 10px 4px
&__select
@extends $bodySmall
appearance none
box-sizing border-box
background-color white
background-image var(--backgroundImage)
background-repeat no-repeat
background-position right 9px center
border 2px solid grey
border-radius 0
color greyDarkest
padding 10px 32px 10px 16px
width 100%
+above(smallestBreakpoint)
width 100%
&__select-option
@extends $bodySmall
color greyDarkest
No notes defined.