JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<h1>Pick Date &amp; Time</h1>
<input class="flatpickr" 
       data-bind="datetimepicker:dt, 
                  datetimepickerOptions:{enableTime:true}" 
       type="text" 
       placeholder="Select Date..">
<pre data-bind="text:dt"></pre>
<button data-bind="click:today">set today</button>

JavaScript

ko.bindingHandlers.datetimepicker = {
  init: function (element, valueAccessor, allBindingsAccessor) {
    var options = $.extend({ dateFormat: 'm-d-Y H:i', enableTime: true }, allBindingsAccessor().datetimepickerOptions),
    	$el = $(element),
    	picker = new Flatpickr(element, options),
    	observable = valueAccessor();

    //handle the field changing by registering datepicker's changeDate event
    ko.utils.registerEventHandler(element, "change", function () {
      observable(picker.parseDate($el.val()));
    });

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      $el.flatpickr("destroy");
    });
    
    observable.subscribe(function(newVal) {
    	$el.val(picker.formatDate(options.dateFormat, newVal));
    });

    picker.setDate(ko.unwrap(observable));
  }
};

function Vm() {
	this.dt = ko.observable(new Date());
  
	this.today = function() { this.dt(new Date()); }
}

ko.applyBindings(new Vm());