KnockoutJS将时间戳分成月下拉框和年文本

KnockoutJS splitting timestamp into month dropdown and year textinput

本文关键字：文本 时间戳 KnockoutJS      更新时间：2023-09-26

我如何管理一个时间戳，最初是空的工作?我需要设定月和年的步骤。月在下拉框中，年在文本输入框中。

here提琴:http://jsfiddle.net/DrHyper/azf74/

JS: 

function AgreementData(data) {
var self = this;
data = data || {};

self.effectiveDate = ko.observable(data.effectiveDate || "");
self.effectiveDateMonth = ko.computed({
    read: function () {
        var dateR = new Date(self.effectiveDate());
        return dateR.getMonth();
    },
    write: function (value) {
        var dateW = new Date(self.effectiveDate());
        dateW.setMonth(value);
        self.effectiveDate(dateW.getTime());
    },
    owner: self
});
self.effectiveDateYear = ko.computed({
    read: function () {
        var dateR = new Date(self.effectiveDate());
        return dateR.getFullYear() ? dateR.getFullYear() : "";
    },
    write: function (value) {
        var dateW = new Date(self.effectiveDate());
        dateW.setFullYear(value);
        self.effectiveDate(dateW.getTime());
    }
});
}
var Month = function (monthIndex, monthString) {
this.monthIndex = monthIndex;
this.monthString = monthString;
};
function AgreementViewModel() {
var self = this;
self.agreement = ko.observable(new AgreementData());
self.months = ko.observableArray([new Month(0, 'Januar'), new Month(1, 'Februar'), 
new Month(2, 'Marts'), new Month(3, 'April'), new Month(4, 'Maj'), 
new Month(5, 'Juni'), new Month(6, 'Juli'), new Month(7, 'August'), 
new Month(8, 'September'), new Month(9, 'Oktober'), new Month(10, 'November'), 
new Month(11, 'December')]);
//    self.postAgreement = function () {
//        var jsonData = ko.toJSON(self.agreement);
//        $.post("/sam-rest/agreements", jsonData, function(returnedData) {
//            // This callback is executed if the post was successful
//        })
//
//    };
//
//    self.getAgreement = function (agreementNumber) {
//        $.getJSON("/sam-rest/agreements/"+agreementNumber, function (jsonData) {
//            self.agreement(new AgreementData(jsonData));
//        });
//
//    };
//
//    Sammy(function() {
//            this.get('#:action/:agreementNmb', function() {
//                self.action(this.params.action);
//                self.getAgreement(this.params.agreementNmb);
//            });
//    }).run();
}
var agreementViewModel = new AgreementViewModel();
ko.applyBindings(agreementViewModel);
HTML: 

<form>
Month: <select id="effectiveDateMonth" data-bind="options: months,
                     optionsText: 'monthString',
                     optionsValue: 'monthIndex',
                     value: agreement().effectiveDateMonth,
                     optionsCaption: 'Choose...'"></select>
Year: <input type="text" data-bind="value: agreement().effectiveDateYear" placeholder="YYYY" />
<hr>
</form>

你可以创建一个类似observableDate的东西来共享月份和年份作为可观察对象:

ko.observableDate = function (value) {
    var month = ko.observable(null);
    var year = ko.observable(null);
    var date = ko.computed({
        read: function() {
            if (year() !== null && month() !== null) {
                return new Date(year(), month(), 1);
            }
            else {
                return null;
            }
        },
        write: function (date) {
            if (date) {
                month(date.getMonth());
                year(date.getYear());
            }
            else {
                month(null); 
                year(null);
            }
        }
    });
    date(value);
    date.year = year;
    date.month = month;
    return date;
};

，然后结合到year和month:

<form>
Month: <select id="effectiveDate.month" data-bind="options: months,
                     optionsText: 'monthString',
                     optionsValue: 'monthIndex',
                     value: agreement().effectiveDate.month,
                     optionsCaption: 'Choose...'"></select>
Year: <input type="text" data-bind="value: agreement().effectiveDate.year" placeholder="YYYY" />
<hr>
</form>

完整示例:http://jsfiddle.net/UXjBf/7/

相关文章：