JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/locales/bootstrap-datepicker.id.min.js"></script>
<form action="#" method="post">
  <input type="text" id="PurchaseOrderDate" placeholder="Input Purchase Order Date" class="form-control datepicker"
                       data-bind="datepicker: PurchaseOrderDate, datepickerOptions: { format: 'dd/mm/yyyy', todayBtn: 'linked', autoclose: true, todayHighlight: true, clearBtn: true }" />
  <button type="submit" id="btnSave" class="btn btn-primary" data-bind="click: save">Save</button>
</form>

JavaScript

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var $el = $(element);

        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $el.datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $el.datepicker("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element),
            current = $el.datepicker("getDate");

        var formattedValue = moment(value).format("DD/MM/YYYY");

        if (value - current !== 0) {
            $el.datepicker("setDate", formattedValue);
        }
    }
};

function getCurrentDate() {
    var fullDate = new Date();
    var month = fullDate.getMonth() + 1;
    var day = fullDate.getDate();

    return (day < 10 ? '0' : '') + day + '/' + (month < 10 ? '0' : '') + month + '/' + fullDate.getFullYear();
}

var model = {"PurchaseOrderDate":"/Date(1456592400000)/"};
var currentDate = getCurrentDate();

$(function() {
	$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayBtn: 'linked',
    autoclose: true,
    todayHighlight: true,
    clearBtn: true,
    language: 'id'
  });
  
  var ViewModel = function(purchaseOrder) {
    var self = this;
    self.PurchaseOrderDate = ko.observable(purchaseOrder ? purchaseOrder.PurchaseOrderDate : currentDate);
    self.save = function () {
      var dataToSave = {
        PurchaseOrderDate: self.PurchaseOrderDate()
      }
      console.log(JSON.stringify(dataToSave, null, 2));
      // post using AJAX
    };
 ...