How to submit and save value from bootstrap-datepicker in Meteor?

Question

I am prototyping an app in Meteor and am having trouble using the datepicker. I created a minimal example in Meteorpad.

How can I get the selected value from the datepicker when clicked and save to the db? My code for the event is in line 8 of client/app/js. I'm using an input tag as part of the datepicker but since there is no submit button, I'm not sure if I am actually changing the date. Does onchange work here?

Template.Valuation.events({
  'onchange #selectedDate': function(e) {
    e.preventDefault();
    var valuationId = this._id;
    var selectedDate = $(e.target).find('[name=selectedDate]').val();
    Valuations.update(valuationId, {$set: {valuationDate: selectedDate}}, function () {
      });
  }
});

Answer 1

Does onchange work here?

No, it does not. You will need to listen for changeDate events in your Template.Valuation.onRendered function:

Template.Valuation.onRendered(function() {
  $('#valuation .input-group.date').datepicker({
    todayBtn: "linked",
    orientation: "top auto",
    daysOfWeekDisabled: "0,6",
    todayHighlight: true,
    autoclose: true,
    format: 'yyyy-mm-dd'
  });
  var self = this;
  $('#valuation .input-group.date').datepicker().on('changeDate', function(ev) {
    var valuationId = self.data._id;
    var selectedDate = $('#selectedDate').val();
    Valuations.update(valuationId, {
      $set: {
        valuationDate: selectedDate
      }
    }, function() {});
  });
});

I found also a bug in your valuationPrice template helper. This may fix it:

valuationPrice: function() {
  var valuation = Valuations.findOne({
    _id: this._id
  });
  var valuationDate = valuation.valuationDate;
  var valuationPrice = 0;
  _.each(valuation.closingPrices, function(closingPrice) {
    if (closingPrice.date == valuationDate) valuationPrice = closingPrice.close;
  });
  return valuationPrice;
}

Here is the updated MeteorPad.