https://stackoverflow.com/questions/49431997/bind-boostrap-datepicker-with-knockout-js-viewmodel-asp-net-core

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></scrip>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />



<h4>
  Test
</h4>
<input type="text" class="form-control" data-bind="datetimepicker : Observation.ObservationDateTime" />
<div>Viewmodel date as text: <span data-bind="text: Observation.ObservationDateTime"></span></div>
<br/>
<span>Manual change: </span><input type="text" data-bind="textInput: Observation.ObservationDateTime" />
   <input type="text" data-bind="datetimepicker:birthday"/>
   <input type="text" data-bind="datetimepicker:birthday,format:'yyyy-mm-dd'"/>

JavaScript

ko.bindingHandlers.datetimepicker = {
    init: function (element, valueAccessor, allBindings) {
      //initialize datepicker with some optional options
        var format;
        var defaultFormat = 'yyyy-mm-dd hh:ii:ss'
        if (typeof allBindings == 'function') {
            format = allBindings().format || defaultFormat;
        }
        else {
            format = allBindings.get('format') || defaultFormat;
        }
        $(element).datetimepicker({
            autoclose: true,
            todayBtn: true,
            'format': format
        })
      
      //when a user changes the date, update the view model
      ko.utils.registerEventHandler(element, "changeDate", function(event) {
          var value = valueAccessor();
             if (ko.isObservable(value)) {
                 value($(element).datetimepicker("getFormattedDate"));
             }
      });
    },
    update: function (element, valueAccessor) {
        var date = ko.unwrap(valueAccessor());
        if (date) {
            $(element).datetimepicker('setValue', date);
        }
    }
};