Calendar chooser
We use the calendar chooser pattern in situations where a site visitor needs to select specific time frames that apply to contextual logic.
Calendar chooser: Tools
In this example, the calendar chooser: tools pattern allows a user to select the months in which they had healthcare coverage.
Example & Code
<div class="question_view">
<ul class="block-list">
<li class="controls checkbox">
<span>
<input type="checkbox" value="jan" name="jan" id="jan">
<label for="jan">January</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="feb" name="feb" id="feb">
<label for="feb">February</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="mar" name="mar" id="mar">
<label for="mar">March</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="apr" name="apr" id="apr">
<label for="apr">April</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="may" name="may" id="may">
<label for="may">May</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="jun" name="jun" id="jun">
<label for="jun">June</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="jul" name="jul" id="jul">
<label for="jul">July</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="aug" name="aug" id="aug">
<label for="aug">August</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="sep" name="sep" id="sep">
<label for="sep">September</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="oct" name="oct" id="oct">
<label for="oct">October</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="nov" name="nov" id="nov">
<label for="nov">November</label>
</span>
</li>
<li class="controls checkbox">
<span>
<input type="checkbox" value="dec" name="dec" id="dec">
<label for="dec">December</label>
</span>
</li>
</ul>
</div>