Question

我需要在应用程序中更改两个日期的日期输入格式，但不能更改应用程序的其余部分。这两个输入需要收集月和年mm / yyyy。目前他们正在以mm / dd / yyyy格式收集它。我们正在使用Knockout.js

    <li>
        <label class="required_label">Date of Event</label>
        <input style="width: 140px;" type="text" data-bind="date: eventDate" />
    </li>
    <li>
        <label class="required_label">Date of Lawsuit</label>
        <input style="width: 140px;" type="text" data-bind="date: lawsuitDate" />
    </li>

Answer 1

我在DateHandler文件中添加了一个名为date2的新绑定处理程序

<li>
    <label class="required_label">Date of Event</label>
    <input style="width: 140px;" type="text" data-bind="date2: eventDate" />
</li>
<li>
    <label class="required_label">Date of Lawsuit</label>
    <input style="width: 140px;" type="text" data-bind="date2: lawsuitDate" />
</li>

/// <reference path="../../typings/moment/moment.d.ts" />
/// <reference path="../../typings/masked.input/masked.input.d.ts" />
/// <reference path="../../typings/knockout/knockout.d.ts" />
/// <reference path="../../typings/knockout.validation/knockout.validation.d.ts" />

interface KnockoutBindingHandlers {
    date: KnockoutBindingHandler;
    date2: KnockoutBindingHandler;
}

// mm/dd/yyyy format
ko.bindingHandlers.date = {
    init: (element, valueAccessor) => {
        $(element).mask("99/99/9999", { placeholder: "mm/dd/yyyy" });

        ko.utils.registerEventHandler(element, "change", () => {
            var value = valueAccessor();

            if (moment(element.value).isValid()) {
                value(element.value);
            } else {
                value(null);
            }
        });

        ko.validation.makeBindingHandlerValidatable("date");
    },
    update: (element, valueAccessor, allBindingsAccessor) => {
        var value = valueAccessor();
        var allBindings = allBindingsAccessor();
        var valueUnwrapped: any = ko.utils.unwrapObservable(value);
        var pattern = allBindings.format || "MM/DD/YYYY";
        var output = null;

        if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
            output = moment(valueUnwrapped).format(pattern);
        }

        if ($(element).is("input") === true) {
            $(element).val(output);
        } else {
            $(element).text(output);
        }
    }
};


//  mm/yyyy format
ko.bindingHandlers.date2 = {
    init: (element, valueAccessor) => {
        //$(element).mask("99/99/9999", { placeholder: "mm/dd/yyyy" });
        $(element).mask("99/9999", { placeholder: "mm/yyyy" });

        ko.utils.registerEventHandler(element, "change", () => {
            var value = valueAccessor();

            if (moment(element.value).isValid()) {
                value(element.value);
            } else {
                value(null);
            }
        });

        ko.validation.makeBindingHandlerValidatable("date");
    },
    update: (element, valueAccessor, allBindingsAccessor) => {
        var value = valueAccessor();
        var allBindings = allBindingsAccessor();
        var valueUnwrapped: any = ko.utils.unwrapObservable(value);
        //var pattern = allBindings.format || "MM/DD/YYYY";
        var pattern = allBindings.format || "MM/YYYY";
        var output = null;

        if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
            output = moment(valueUnwrapped).format(pattern);
        }

        if ($(element).is("input") === true) {
            $(element).val(output);
        } else {
            $(element).text(output);
        }
    }
};

ko.validation.rules["simpleDate"] = {
    validator: (val: any, validate: any) => {
        if (val == null) return true;

        return moment(val).isValid();
    },
    message: "Invalid date"
};

使用Knockout.js到mm / yyyy时更改输入日期格式

1 个答案: