How to reload function (tempus dominus) after modifying DOM element with jQuery

Question

I am using tempus dominus for date selection in a form in my booking site.
Some dates need to be disabled so I am passing an array of dates to disable from php to twig.
This array is in 2 dimensions:
1) the apartment to rent
2) the unavailable dates for the latter

When the user chooses an apartment, the variable "home" is updated on click with the new value and I update the attribute "hValue" as well in an hidden div. Then I try to use this "hValue" to access what I want in the array of dates inside datetimepicker disableDatesPerHomeStart[homeValue] .

But of course the value is not updated as the function has already been loaded... In other words, inside datetimepicker I always get the initial value of homeValue, not the chosen one in the form.
I tried to trigger an event inside the .click to call again datetimepicker but it doesn't work...

Here is the code:

<div class="form-group">
    {{ form_label(form.startDate) }}
    <div class="input-group date dateStart" id="datetimepicker1" data-target-input="nearest">
        {{ form_widget(form.startDate, {'attr': {'type': 'text', 'class': 'form-control datetimepicker-input', 'data-target':'#datetimepicker1'}}) }}
        <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
        </div>
        <div class="homeValue d-none" hValue=""></div>
    </div>
</div>

$(function () {
    var home = $('#contact_home').val();
    $('.homeValue').attr('hValue', home);
    var homeValue =  $('.homeValue').attr('hValue');
    var disableDatesPerHomeStart = {{ unavailableDatesForStartComplete|json_encode|raw }};
    var disableDatesPerHomeEnd = {{ unavailableDatesForEndComplete|json_encode|raw }};


    $('#contact_home').click(function (c) {
        home = $('#contact_home').val();
        $('.homeValue').attr('hValue', home);
        homeValue = $('.homeValue').attr('hValue');
        var event = jQuery.Event("myEvent");
        $('body').trigger(event);
    });

    $('.dateStart').datetimepicker({
        locale: 'fr',
        format: 'L',
        disabledDates: disableDatesPerHomeStart[homeValue],
        icons: {
                time: "fas fa-clock",
                date: "fas fa-calendar-alt",
                up: "fas fa-angle-up",
                down: "fas fa-angle-down"
            }
    });

    $('.dateEnd').datetimepicker({
        useCurrent: false,
        locale: 'fr',
        format: 'L',
        disabledDates: disableDatesPerHomeEnd[homeValue],
        icons: {
                time: "fas fa-clock",
                date: "fas fa-calendar-alt",
                up: "fas fa-angle-up",
                down: "fas fa-angle-down"
            }
    });

    $('body').on('myEvent',function(){
        $('.dateStart').datetimepicker('disabledDates', disableDatesPerHomeStart[homeValue]);
        $('.dateEnd').datetimepicker('disabledDates', disableDatesPerHomeEnd[homeValue]);
    });
});

I am new to jQuery/javascript so maybe I miss something obvious.

How can I pass the new value to the datetimepicker?
Thanks

Answer 1

I think your looking for the setOptions function :

$('.dateStart').datetimepicker('setOptions', {disabledDates: ['01.01.2019','02.01.2019','03.01.2019'] });

It allows to change the options of the datetimepicker.