Autoform datepicker set value dynamically

help
1

Hi,

Is there someone know how to set a value of a datepicker dynamically in autoform?

Situation
I have effectivity date field and maturity field, both datepicker. the value of maturity date is based on effectivity date + a certain range:

Here’s my working code:

'change input[name=effectivityDate]': function ( event, template ) {
    var effectivity = $( event.target ).val();
    var range = ( $( 'select[name=productRange]' ).val() );
    var duration = moment.duration( parseInt( range, 10 ), 'months' );    
    template.$( 'input[name=maturityDate]' ).val( moment( effectivity ).add( duration ).format( 'MM-DD-YYYY' ); );
  },

the above code is working as expected during creation of document since no value yet on the db, if I select 6 on productRange, i pick a date on effectivityDate let say, 1-1-2016 the value of maturityDate will be 6-1-2016 then save it to db.

Schema

maturityDate: {
    type: Date,
    label: "Maturity Date",
    optional: true,
    autoform: {
      type: "bootstrap-datepicker",
      datePickerOptions: {
        format: 'mm-dd-yyyy',
        forceParse: false,
        useCurrent: false
      },
      afFormGroup: {
        'formgroup-class': 'col-xs-4 col-sm-4 col-lg-1'
      }
    }
  },

Problem
When updating the document, I updated the effectivityDate to a later date, the output is correct but when I click submit, the value of maturityDate is not setting the desired date based on the calculation, basically it didn’t update, when i investigated the issue, it seems that the user have to pick the date to set the desired date. I want the user to lessen the clicks inside the app.

Possible solution
Set the date dynamically using DateTimePicker function describe here, so I test it:


Template.productsAvailedUpdate.onRendered( function () {
  this.$( '.datetimepicker' ).datetimepicker();
} );

but the problem is i get this error: TypeError: this.$(...).datetimepicker is not a function

I’ve researched some issues and docs in the github repo from the original author of the datetimepicker not the meteor package for possible solution, I’ve seen that the function can be accessed via the data attribute, so /my question is, where should I put this code?

$(".datetimepicker").on("dp.change", function (e) {
            $('.datetimepicker').data("DateTimePicker").minDate(e.date);
        });

Thanks in advance.