JSFiddle - React, Tailwind, and code Playground

by goranobradovic

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="sample">
    <select data-bind="month:{value:selectedMonth, months:6}"></select>
    <span data-bind="text:selectedMonth"/>
</div>

JavaScript

var model = {
    selectedMonth: new Date('2014-07-01')
};
 
ko.bindingHandlers['month'] = {
    init: function (element, valueAccessor, allBindings) {
        var binding = valueAccessor();
 
        function innerAccessor() {
            return binding.value;
        }
        ko.bindingHandlers['value'].init(element, innerAccessor, allBindings);
    },
    update: function (element, valueAccessor, allBindings) {
        var binding = valueAccessor();
        var options = [];
        for (var i = 0; i < (binding.months || 12); i++) {
            options.push(new Date(binding.value).setMonth(binding.value.getMonth() + i));
        }
 
        function innerAccessor() {
            return options;
        }
        ko.bindingHandlers['option'].update(element, innerAccessor, allBindings);
        ko.bindingHandlers['value'].update(element, innerAccessor, allBindings);
    }
}
 
ko.applyBindings(model, document.getElementById("sample"));