Month picker

Month pickers are used when an exact date is not required, e.g. for showing usage stats.

By itself the month picker is entirely generated by the jQuery UI Month Picker Plugin via the monthPicker binding.

The automatically generated widget DOM nodes have classes that are prefixed with month-picker-.

Single month picker

A single month picker can be generated inline or as a pop-up when an input field is focused.

Example

Inline picker

Selected month:

Input picker


Selected month:

Markup

<h4>Inline picker</h4>
<div data-bind="monthPicker: monthPicker1.selectedMonth"></div>
<p>
    <strong>Selected month: </strong><span data-bind="text: monthPicker1.selectedMonth"></span>
</p>

<h4>Input picker</h4>
<p>
    <input data-bind="monthPicker: monthPicker2.selectedMonth" type="text" value="" /><br />
    <strong>Selected month: </strong><span data-bind="text: monthPicker2.selectedMonth"></span>
</p>

Range month pickers

.MonthPickerRange

Two month pickers can also be combined into a range picker.

The example below shows how to generate such a range picker with a knockout.js template and a simple model.

The click bindings in the template take advantage of the fact that the monthPicker binding value can be set via the uiSetMonthPicker event, and that each monthPicker can be named with the monthPickerName binding.

Example

Start month:
End month:

Markup

<div data-bind="template: { name: 'month-picker-range-template', data: monthPicker3 }"></div>
<p>
    <strong>Start month: </strong><span data-bind="text: monthPicker3.start"></span><br />
    <strong>End month: </strong><span data-bind="text: monthPicker3.end"></span>
</p>

<script type="text/html" id="month-picker-range-template">
    <div class="MonthPickerRange">
        <div class="MonthPickerRange-item">
            <ul class="MonthPickerRange-presets">
                <li class="MonthPickerRange-presetItem" data-bind="click: lastMonth">Last month</li>
                <li class="MonthPickerRange-presetItem" data-bind="click: last3Months">Last 3 months</li>
                <li class="MonthPickerRange-presetItem" data-bind="click: last6Months">Last 6 months</li>
                <li class="MonthPickerRange-presetItem" data-bind="click: lastYear">Last year</li>
            </ul>
        </div>
        <div class="MonthPickerRange-item">
            <h3 class="MonthPickerRange-title">Start</h3>
            <div data-bind="monthPicker: start, monthPickerName: 'start'"></div>
        </div>
        <div class="MonthPickerRange-item">
            <h3 class="MonthPickerRange-title">End</h3>
            <div data-bind="monthPicker: end, monthPickerName: 'end'"></div>
        </div>
    </div>
</script>