作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何设法处理最初为空的时间戳?我需要按步骤设置月份和年份。下拉列表中的月份和文本输入字段中的年份。
在这里摆弄: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;
};
然后绑定(bind)到年
和月
:
<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>
关于javascript - KnockoutJS 将时间戳拆分为月份下拉列表和年份文本输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15088542/
我是一名优秀的程序员,十分优秀!