1

最初は null であるタイムスタンプを処理するにはどうすればよいですか? 月と年をステップに設定する必要があります。ドロップダウンの月とテキスト入力フィールドの年。

ここでフィドル：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>
4

1 に答える 1

0

月と年を観察可能として共有する 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;
};

そして and にバインドし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/

于 2013-02-26T18:34:27.977 に答える