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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore.js"></script>

<div id='target' class="container">
    <input data-bind="datepicker: test_date, datepickerOptions: datePickerOptions()"/>
    
    <div data-bind="text: test_date"></div>
    
</div>

JavaScript

ko.bindingHandlers.datepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    var value = valueAccessor(), val = ko.unwrap(value),
  		  //$dt = moment( new Date(val || new Date()) ),
    		options = allBindingsAccessor().datepickerOptions || {};
   	
    //value( moment( new Date(val) || new Date() ).format('YYYY-MM-DD') );
    
    $(element).datepicker(options);

    //when a user changes the date, update the view model
    ko.utils.registerEventHandler(element, "changeDate", function(e) {
    	//console.log( $dt.format('YYYY-MM-DD') )
      //value( e.format(e,'yyyy-mm-dd') )
    });

  },
  update: function(element, valueAccessor)   {
    var value = valueAccessor(), val = ko.unwrap(value);
    
    //value( valFormat );
		$(element).datepicker( "update", val );
  }
};

var model = function(){
	let self = this;
  self.test_date = ko.observable( '05-24-2020' )
  self.datePickerOptions = function() {
  let $thisdt = moment( self.test_date() ) || moment();
	return {
      format: {
          toDisplay: function (date) { 
          	return this.toDisplay( $thisdt ).format('L');
          },
          toValue: function (date) { 
          	return this.toValue( $thisdt ).format('YYYY-MM-DD');
          }
      },
      beforeShowDaysd: function(date){
        return {
          enabled:  date.toDateString() >= new Date().toDateString()
        }
      },
      autoclose: true,
      todayHighlight: true,
      todayBtn: true
    }
  }
};

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