Set datetimepicker max/min values while loading

Question

I'm using a modified version of vue-bootstrap-datetimepicker which is a vue component wrapper for bootstrap-datetimepicker.

I have two inputs: a start date and an end date. When I set the end date, it sets this value to the max-value of the start date, and when I change the start date, it sets this value to the min-value of the end date.

All works well when I change the values, but for pre-loaded values I can't find a way to set the min/max values.

In this fiddle I have all the needed code http://jsfiddle.net/bortao/xhqrdm0t/

I tried some things:

• Triggering dp.change after values are loaded: $(".dpdatainicio, .dpdatafim").trigger("dp.change"); - Result: For some reason the values are reset to blank.
• Changing the order the component is initialized - Result: Doesn't work because when start date gets initialized end date isn't yet.

So how could I do this?

Answer 1

As the guide which introduces options for bootstrap-datetimepicker, uses option property=minDate and maxDate to limit min/max date for initial.

So your new datepickoptions will be like:

   datepickoptions: {
    format: 'DD/MM/YYYY',
    useCurrent: false,
    locale: 'pt-br',
    minDate: '2018-10-09', // min date value
    maxDate: '2018-10-29'  // max date value
  },

Check this fiddle