JSFiddle - React, Tailwind, and code Playground

by KANDR101

HTML

<!-- http://jsfiddle.net/69bLa5cv/ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.5.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.js"></script>

<div id='target' class="container">
    <input data-bind="datepicker: test_date, datepickerOptions: {
      format: {
          toDisplay: function (date) { return moment(date).format('MM/DD/YYYY'); },
          toValue: function (date) { return new Date(date); }
      },
      todayHighlight: true,
      todayBtn: true
    }"/>
    
    <div data-bind="text: test_date"></div>
    
    <input data-bind='datepicker: test_date'/>
</div>

JavaScript

ko.bindingHandlers.datepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    //initialize datepicker with some optional options
    var options = allBindingsAccessor().datepickerOptions || {};
    $(element).datepicker(options);

    //when a user changes the date, update the view model
    ko.utils.registerEventHandler(element, "changeDate", function(event) {
      var value = valueAccessor();
      var dt =  moment(event.date).format('YYYY-MM-DD');
      value( dt )
    });
    
    ko.utils.registerEventHandler(element, "show", function(event) {
    		//alert( moment().format('YYYY-MM-DD') );
				//this._setDate( moment().format('YYYY-MM-DD')) );
    });
  },
  update: function(element, valueAccessor)   {
    var value = ko.unwrap(valueAccessor());
    /* console.log( ko.toJS( $(element).data("datepicker") ) ) */
    $(element).datepicker("update", value );
  }
};

var model = {
  test_date: ko.observable( moment(new Date('2012/12/12')).format('YYYY-MM-DD') )
};

ko.applyBindings(model, $("#target")[0]);