Datepicker using Bacon.js and CLNDR.js (with Foundation5 styles)

datepicker.hbs

<div class="clndr-controls row">
  <div class="large-7 columns">
    <div class="row">
      <div class="clndr-previous-button large-2 columns">&lsaquo;</div>
      <div class="month large-8 columns">{{month}}</div>
      <div class="clndr-next-button large-2 columns">&rsaquo;</div>
    </div>
  </div>
</div>
<div class="clndr-grid large-7 columns">
  <div class="days-of-the-week row">
    {{#each daysOfTheWeek }}
      <div class="header-day large-1 columns">{{ this }}</div>
    {{/each}}
    <div class="days">
    {{#each days }}
        <div class="{{ this.classes }} large-1 columns {{#ifDatePickerIsDateSelected this.date ../selectedDate }} selected {{/ifDatePickerIsDateSelected}}" >{{ this.day }}</div>
    {{/each}}
    <div class="large-1 columns"></div>
    </div>
  </div>
</div>

datepicker.js

var Bacon = require('baconjs').Bacon,
    _ = require('underscore'), 
    moment = require('moment'),
    Handlebars = require("hbsfy/runtime");

Handlebars.registerHelper('ifDatePickerIsDateSelected', function(a, b, options) {
  if (a.format('YYYY-MM-DD') === b.format('YYYY-MM-DD')) {
    return options.fn(this);   
  }
  return options.inverse(this);
}); 
    
var tmpl = require('./datepicker.hbs');

module.exports = function(elem, initialDate) { 
  var bus = new Bacon.Bus();   
  var selectedDate = initialDate || moment();
  elem.clndr({
    weekOffset: 1,
    render: function(data) {   
      return tmpl(_.extend({}, data, {selectedDate: selectedDate})); 
    },
    clickEvents: {             
      click: function(target) {
        bus.push(target.date); 
        selectedDate = target.date;     
        this.render();         
      },
    }
  });
  return bus;
};

datepicker.sass

.clndr-grid
  .day,.header-day
    text-align: center
    padding-bottom: 5px 
    padding-top: 5px 
    -moz-box-sizing: border-box
    box-sizing: border-box
    padding-left: 0px 
    padding-right: 0px 
    width: 14.28%
  .selected
    background-color: #008CBA
    color: white
  .today
    font-weight: bold

usage.js

var datepicker = require('./datepicker'),
    moment = require('moment'),
    $ = require('jquery');

var initialStartDate = moment().add('months', -1).date(1),
    initialEndDate = moment().date(0),
    start = datepicker($('.period-start'), initialStartDate).toProperty(initialStartDate);
    stop = datepicker($('.period-end'), initialEndDate).toProperty(initialEndDate);

start.map('.format', 'DD.MM.YYYY').assign($('.period-start-txt'), 'text');
stop.map('.format', 'DD.MM.YYYY').assign($('.period-end-txt'), 'text');