JSFiddle - React, Tailwind, and code Playground

by Muhammad Dawood Awan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css">
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="control-label">Quote Date</label>
                        <div class='input-group date dateTimes'>
                            <input type="text" class="form-control" data-bind="datepicker: QuoteDateTime" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                </div>

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

<button data-bind="click: print">Print</button>

JavaScript

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {
            format: 'DD/MM/YYYY HH:mm',
            defaultDate: valueAccessor()()
        };
        $(element).datetimepicker(options);
        var picker = $(element).data('datetimepicker');

        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "dp.change", function (event) {
            var value = valueAccessor();
            if (ko.isObservable(value)) {
                value(event.date);
            }
        });
        var defaultVal = $(element).val();
        var value = valueAccessor();
        value(moment(defaultVal, 'DD/MM/YYYY HH:mm'));
    },
    update: function (element, valueAccessor) {
        var widget = $(element).data("datepicker");
        //when the view model is updated, update the widget
        if (widget) {
            widget.date = ko.utils.unwrapObservable(valueAccessor());
            if (widget.date) {
                widget.setValue();
            }
        }
    }
};

var viewModel = {};
function QuoteViewModel(data) {
        var self = this;
        self.QuoteDateTime = ko.observable(data.QuoteDateTime);
    
    self.print = function(){
    console.log(self.QuoteDateTime())
    }
    
};

var defaultModel = {
     QuoteDateTime: "/Date(1427368178393)/"
}

    viewModel = new QuoteViewModel(defaultModel);
    ko.applyBindings(viewModel);