JSFiddle - React, Tailwind, and code Playground

by atitsbest

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>
<h4 data-bind="text:dt().name"></h4>
<!-- <input type="text" data-bind="textInput:dt().name">-->

<input class="flatpickr" 
       data-bind="datetimepicker:dt().date, 
                  datetimepickerOptions:{enableTime:false}" 
       type="text" 
       placeholder="Select Date..">

<pre data-bind="text:dt().date"></pre>

<button data-bind="click:prev">&lt;</button>
&nbsp;
<button data-bind="click:next">&gt;</button>

Babel + JSX

// ------------------ Binding -------------------------

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);
      
    // Save instance for update method.
    $el.data('datetimepickr_inst', picker);

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

    // handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
      $el.flatpickr("destroy");
    });
    
    // Update datepicker with new value from observable
    valueAccessor().subscribe(newVal => $el.val(picker.formatDate(options.dateFormat, newVal)));
  },
  update: function (element, valueAccessor, allBindingsAccessor) {
      // Get datepickr instance.
      var picker = $(element).data('datetimepickr_inst');
      
      picker.setDate(ko.unwrap(valueAccessor()));
  }
};

// ------------------- Viewmodel ---------------------

function Vm() { 
	this.dts = ko.observableArray([
  	{ name: ko.observable('Test 1'), date: ko.observable(new Date(2017, 0, 1)) },
    { name: ko.observable('Test 2'), date: ko.observable(new Date(2017, 1, 2)) },
    { name: ko.observable('Test 3'), date: ko.observable(new Date(2017, 2, 3)) },
    { name: ko.observable('Test 4'), date: ko.observable(new Date(2017, 3, 4)) }
  ]);

	this.index = ko.observable(0); // index of the current datetime
	this.dt = ko.pureComputed(() => this.dts()[this.index()], this); // current visible datetime
  
  this.prev = () => this.index(Math.max(0, this.index()-1));  // move index to prev
  this.next = () => this.index(Math.min(this.dts().length-1,...