Flatpickr KO Binding

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/2.3.0/flatpickr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/2.3.0/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div data-bind="if: isVisible">
    <input type="text" data-bind="datetime: {mode: 'range'}, value: myDate" />
</div>
<p>
    <button data-bind="click: changeDate">
        Change Date to 11/15/2016
    </button>
</p>
<p>
    KO thinks the date is: <span data-bind="text: myDate"></span>
</p>

<button data-bind="click: toggle">
    toggle input element to check for memory leaks
</button>

JavaScript

ko.bindingHandlers.datetime = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        let valueSubscription;
        let pickr;
        let allBindings = allBindingsAccessor();
        let config = Object.assign({
            defaultDate: ko.unwrap(allBindings.value) || null // null is the library default
            // Default config here
        }, valueAccessor());

		pickr = new Flatpickr(element, config);

        if (ko.isObservable(allBindings.value)) {
            valueSubscription = allBindings.value.subscribe(pickr.setDate);
        }

        ko.utils.domNodeDisposal.addDisposeCallback(element, (el) => {
            pickr.destroy();
            if (valueSubscription) {
                valueSubscription.dispose();
            }
        });
    }
}

/***********************************************************************************/
var App = new(function() {
    var self = this;

    self.myDate = ko.observable('2016-12-31');

    self.changeDate = () => {
        self.myDate('2016-11-15');
    }

    self.isVisible = ko.observable(true);

    self.toggle = () => {
        self.isVisible(!self.isVisible());
    }
});

ko.applyBindings(App);