将默认日期添加到淘汰赛 js datepicker

Question

使用淘汰赛 js datepicker。需要将今天的日期设置为默认日期，并将今年的 1 月 1 日设置为第二个日期，现在也与第一个相同。

这是我的 js 部分

ko.bindingHandlers.datepickerCtrl = {
init: function (element, setup, allBindingsAccessor, viewModel, bindingContext ) {
    var widget = $(element);
    var vl = setup();
    var valueName = vl.valueName;
    var id = vl.id == null ? valueName : vl.id;
    var enableExpr = vl.enableExpr;
    var innerHtml = '<div id="' + id + '" class="input-group date" data-provide="datepicker" style="max-width:110px!important" ' +
                'data-bind="' + (enableExpr != null ? 'enable: ' + enableExpr + ',' : '') + 'validationOptions: { insertMessages: false}">' +
                    '<input type="text" class="form-control" data-bind="' + (enableExpr != null ? 'enable: ' + enableExpr + ',' : '') + 'value: ' + valueName + '">' +
                    '<span class="input-group-addon" style="padding-bottom: 1px!important;padding-top: 1px!important;padding-right: 3px!important;padding-left: 3px!important;"><i class="glyphicon glyphicon-calendar"></i></span></div>' +
                    '<p class="validationMessage" data-bind="validationMessage: ' + valueName + '"></p>';
    widget.html(innerHtml);
    ko.utils.registerEventHandler(widget.find("span"), "click", function (event) {
        widget.find("input").focus();
    });
},

};

这里是html部分：

<div class="col-md-8" data-bind="datepickerCtrl: {valueName:'dtS'}"></div>

Answer 1

请查看Link

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

        if (allBindingsAccessor() !== undefined) {
            if (allBindingsAccessor().datepickerOptions !== undefined) {
                options.format = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : options.format;
            }
        }

        $(element).datetimepicker(options);

        //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, options.format));
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var thisFormat = 'DD/MM/YYYY HH:mm';

        if (allBindingsAccessor() !== undefined) {
            if (allBindingsAccessor().datepickerOptions !== undefined) {
                thisFormat = allBindingsAccessor().datepickerOptions.format !== undefined ? allBindingsAccessor().datepickerOptions.format : thisFormat;
            }
        }

        var value = valueAccessor();
        var unwrapped = ko.utils.unwrapObservable(value());

        if (unwrapped === undefined || unwrapped === null) {
            element.value = new moment(new Date());
            console.log("undefined");
        } else {
            element.value = unwrapped.format(thisFormat);
        }
    }
};


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(1427368178400)/"
}

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